:root {
  /* ── Colour palette ───────────────────────────────────────────────
     Numbered by lightness, Tailwind-style. Only shades in use are
     defined; add new ones as needed. */

  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;

  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;

  --color-green-400: #34d399;
  --color-green-500: #22c55e;
  --color-green-600: #10b981;

  --color-sky-400: #38bdf8;
  --color-sky-500: #0ea5e9;

  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;

  --color-yellow-400: #facc15;

  --color-red-400: #f87171;

  --color-violet-400: #a78bfa;

  --color-indigo-500: #6366f1;

  /* ── Semantic colour aliases ─────────────────────────────────────
     Components reference these, not the raw palette. */

  --color-bg:            var(--color-slate-900);
  --color-surface:       var(--color-slate-800);
  --color-border:        var(--color-slate-700);
  --color-text:          var(--color-slate-300);
  --color-text-muted:    var(--color-slate-400);

  --color-primary:       var(--color-green-400);
  --color-primary-hover: var(--color-green-600);
  --color-primary-strong: var(--color-green-500);

  --color-accent:        var(--color-sky-400);
  --color-success:       var(--color-green-400);
  --color-warning:       var(--color-amber-400);
  --color-danger:        var(--color-red-400);
  --color-info:          var(--color-sky-400);
  --color-experimental:  var(--color-violet-400);

  --color-nav-bg: color-mix(in srgb, var(--color-bg) 92%, transparent);

  /* ── Fonts ────────────────────────────────────────────────────── */

  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* ── Font sizes (semantic, rem-based) ───────────────────────────
   * 11 tokens. Four fluid clamps (hero, display-stat, page-title,
   * section) scale with viewport; the rest are fixed for predictable
   * hierarchy. Clamps are proportional with divergent slopes and never
   * cross: hero floor (32px) stays above page-title floor (28px);
   * page-title slope (2.5vw) > section slope (2vw); page-title max
   * (32px) > section max (28px). display-stat max (42px) stays below
   * hero max (56px).
   *
   * Ladder (fixed rungs):  page-title 28–32 > section 24–28
   *                        > subsection 18 > body 16 > ui 14 > meta 12.
   * Heading order is invariant at every viewport width.
   *
   * Domain-specific tokens (numeric/display, not in the heading ladder):
   *   display-stat  28–42px  hero KPI number
   *   price         32px     plan price (fixed)
   *   icon          64px     decorative
   *
   * Rules of thumb:
   * • An <h1> on a hero page (index, pricing, models) uses --font-size-hero.
   * • An <h1> on a content page (docs, account, usage, activate, chat) uses
   *   --font-size-page-title.
   * • Real H3 subheadings use --font-size-subsection (18px): a subsection in
   *   the page's heading hierarchy, or readable heading text (e.g. FAQ
   *   questions, docs subsections).
   * • .overline headings (uppercase, muted, letter-spaced, 14px) are small
   *   label-style headings for sub-groupings within a card or section, where
   *   a full h3 would be too prominent. They may appear alone (e.g. "Why
   *   TrustedRouter", "Subscription") or as a kicker above an h2 (e.g. "The
   *   Problem" → h2). NOT for readable content like FAQ question text.
   * • If two usages share a role, they MUST share a token. A >1px
   * difference is an inconsistency to fix, not a feature to keep.
   * • --font-size-hero, --font-size-display-stat, --font-size-page-title,
   *   and --font-size-section use clamp(). Do NOT add clamp() to any other
   *   token.
   * • --font-size-micro (10px) is for decorative/fine-print only, not
   * body content. 12px remains the legibility floor for readable text.
   * ──────────────────────────────────────────────────────────── */

  --font-size-hero:         clamp(2rem, 5vw, 3.5rem);          /* 32–56px hero H1         */
  --font-size-page-title:   clamp(1.75rem, 2.5vw, 2rem);       /* 28–32px content H1      */
  --font-size-section:      clamp(1.5rem, 2vw, 1.75rem);       /* 24–28px H2 + KPI in card*/
  --font-size-subsection:   1.125rem;                          /* 18px H3 + H4/card title */
  --font-size-body:         1rem;                              /* 16px paragraphs         */
  --font-size-ui:           0.875rem;                          /* 14px controls/nav/table */
  --font-size-meta:         0.75rem;                           /* 12px muted + micro      */
  --font-size-micro:        0.625rem;                          /* 10px fine-print only    */
  --font-size-display-stat: clamp(1.75rem, 4.375vw, 2.625rem); /* 28–42px hero KPI     */
  --font-size-price:        2rem;                              /* 32px plan price         */
  --font-size-icon:         4rem;                              /* 64px decorative         */

  /* ── Spacing scale (rem, keyed by px-equivalent) ──────────────── */

  --space-4:  0.25rem;    /*  4px */
  --space-6:  0.375rem;   /*  6px */
  --space-8:  0.5rem;     /*  8px */
  --space-12: 0.75rem;    /* 12px */
  --space-16: 1rem;       /* 16px */
  --space-20: 1.25rem;    /* 20px */
  --space-24: 1.5rem;     /* 24px */
  --space-32: 2rem;       /* 32px */
  --space-48: 3rem;       /* 48px */
  --space-64: 4rem;       /* 64px */

  /* ── Layout widths ──────────────────────────────────────────────
     CSS custom properties can't be used in @media queries, so the
     two breakpoints are documented here as literal values:
     48rem  (768px) — primary: nav hamburger, grids collapse, container
                      padding shrinks, sections shrink
     37.5rem (600px) — secondary: grids collapse to single column,
                       footer stacks
     ──────────────────────────────────────────────────────────── */

  --page-max-width: 75rem;     /* 1200px — full-width: grids, sidebars, full-bleed */
  --content-width: 60rem;     /* 960px — content pages: forms, tables, single-column */
  --prose-width:   42.5rem;   /* 680px — paragraphs, forms, info grids within pages */

  --nav-height: 3.5rem;       /* 56px */

  /* ── Borders ─────────────────────────────────────────────────── */

  --border-thin:         1px solid var(--color-border);
  --border-thin-primary: 1px solid var(--color-primary);

  /* ── Radii ────────────────────────────────────────────────────── */

  --radius-4:     0.25rem;    /*  4px */
  --radius-6:   0.375rem;   /*  6px */
  --radius-10:  0.625rem;   /* 10px */
  --radius-12:  0.75rem;    /* 12px */
  --radius-16:  1rem;       /* 16px */
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ── Line height ──────────────────────────────────────────────── */

  --line-height-tight:    1.15;
  --line-height-snug:     1.2;
  --line-height-normal:   1.5;
  --line-height-relaxed:  1.6;
  --line-height-loose:    1.7;

  /* ── Letter spacing ───────────────────────────────────────────── */

  --tracking-tight:    -0.0625rem;
  --tracking-snug:     -0.03125rem;
  --tracking-label:     0.03125rem;
  --tracking-wide:      0.05rem;
  --tracking-wider:     0.0625rem;
  --tracking-widest:    0.09375rem;

  /* ── Motion (numbered by ms) ─────────────────────────────────── */

  --duration-150:  0.15s;
  --duration-200:  0.2s;
  --duration-300:  0.3s;
  --duration-600:  0.6s;
  --duration-2000: 2s;
  --ease-standard: ease;
  --ease-in-out:   ease-in-out;

  /* ── Elevation ───────────────────────────────────────────────── */

  --shadow-glow-sm: 0 0 0.75rem color-mix(in srgb, var(--color-primary) 8%, transparent);
  --shadow-glow:    0 0 1.25rem color-mix(in srgb, var(--color-primary) 10%, transparent);
  --shadow-glow-lg: 0 0 1.875rem color-mix(in srgb, var(--color-primary) 8%, transparent);
  --shadow-glow-btn: 0 0.25rem 1.25rem color-mix(in srgb, var(--color-primary) 30%, transparent);
  --shadow-spotlight: 0 0 2.5rem color-mix(in srgb, var(--color-primary) 8%, transparent);

  /* ── Z-index scale ──────────────────────────────────────────── */

  --z-base: 1;
  --z-nav:  1000;
}