/* ============================================================
   MHC Type System — single source of truth
   Linked by index.html, quiz.html, builder.html,
   funnel-detail.html, offline.html.
   Families: Poppins = headings, eyebrows, buttons, nav, labels,
   stats.  DM Sans = body, subheadlines, captions.
   ============================================================ */
:root {
  /* font families (full fallback stacks - never resolve to serif) */
  --font-head: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* weights (4 only) */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  /* size scale (7 steps) */
  --fs-1: 11px;       /* caption, label, eyebrow, table head */
  --fs-2: 13px;       /* body small, nav, button, secondary */
  --fs-3: 15px;       /* body, H4, inputs */
  --fs-4: 18px;       /* body large, subhead, H3 */
  --fs-5: 22px;       /* H2 */
  --fs-6: 28px;       /* H1 */
  --fs-display: 34px; /* hero / big stat numbers */
  /* line-heights (3) */
  --lh-tight: 1.15;   /* headings, display, numbers */
  --lh-snug: 1.4;     /* subheads, dense UI, table cells */
  --lh-normal: 1.6;   /* body copy */
  /* letter-spacing (3) */
  --ls-tight: -0.01em;  /* large headings */
  --ls-label: 0.06em;   /* uppercase labels */
  --ls-eyebrow: 0.08em; /* uppercase eyebrows, nav caps */

  /* ----------------------------------------------------------
     CANONICAL MHC COLOR SYSTEM (dark) — single source of truth.
     index.html, quiz.html and builder.html all resolve to these.
     Page-local :root blocks may alias these names, but the values
     below are the brand reference. Do not fork the accent.
     ---------------------------------------------------------- */
  --mhc-page:        #080B12;
  --mhc-surface:     #0D1120;
  --mhc-surface-2:   #111827;
  --mhc-surface-3:   #161E33;
  --mhc-line:        rgba(255,255,255,0.07);
  --mhc-line-strong: rgba(255,255,255,0.14);
  --mhc-text:        #F2F4F9;
  --mhc-muted:       #C8D2E6;
  --mhc-muted-2:     #8A95AE;
  --mhc-accent:      #2155DB;  /* brand blue — never #3b82f6 */
  --mhc-accent-hover:#3D6EE8;
  --mhc-success:     #6EE7B7;
  --mhc-warning:     #FB923C;
  --mhc-danger:      #F87171;

  /* radius + shadow scale */
  --radius-card: 12px;
  --radius-btn:  10px;
  --radius-pill: 999px;
  --shadow-card: 0 8px 30px rgba(0,0,0,0.40);
}