/* ============================================================
   Design tokens — all v2 components reference these variables
   ============================================================ */

:root {
  /* ── Brand ─────────────────────────────────────────── */
  --color-brand: #0077cc;
  --color-brand-dark: #005fa3;
  --color-brand-light: #e8f4ff;

  /* ── Neutral palette ────────────────────────────────── */
  --color-ink: #1a1a2e;
  --color-ink-muted: #4a5568;
  --color-ink-subtle: #718096;
  --color-icon: #52525b;
  --color-ink-faint: #b0b8c8;
  --color-border: #e2e8f0;
  --color-surface: #ffffff;
  --color-surface-alt: #f7f9fc;
  --color-surface-dark: #0f172a;

  /* ── Accent ─────────────────────────────────────────── */
  --color-accent: #00c2ff;

  /* ── Text on dark surfaces ──────────────────────────── */
  --color-on-dark: #ffffff;
  --color-on-dark-body: rgba(255, 255, 255, 0.75);
  --color-on-dark-paragraph: rgba(255, 255, 255, 0.70);
  --color-on-dark-secondary: rgba(255, 255, 255, 0.65);
  --color-on-dark-note: rgba(255, 255, 255, 0.60);
  --color-on-dark-subtle: rgba(255, 255, 255, 0.55);
  --color-on-dark-dim: rgba(255, 255, 255, 0.50);
  --color-on-dark-faint: rgba(255, 255, 255, 0.40);
  --color-on-dark-border: rgba(255, 255, 255, 0.10);

  /* ── Typefaces ──────────────────────────────────────── */
  --font-primary: 'Funnel Sans', sans-serif;
  --font-display: 'DM Sans', sans-serif;
  --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Fira Mono", monospace;

  /* ── Font size scale ────────────────────────────────── */
  --text-xs: 0.75rem;
  /*  12px */
  --text-sm: 0.875rem;
  /*  14px */
  --text-base: 1.0625rem;
  /*  17px */
  --text-lg: 1.125rem;
  /*  18px */
  --text-xl: 1.25rem;
  /*  20px */
  --text-2xl: 1.5rem;
  /*  24px */
  --text-3xl: 1.875rem;
  /*  30px */
  --text-4xl: 2.25rem;
  /*  36px */
  --text-hero: 2.5rem;
  /*  40px — hero display */
  --text-5xl: 3rem;
  /*  48px */
  --text-6xl: 3.75rem;
  /*  60px */

  /* ── Font weights ───────────────────────────────────── */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi: 600;
  --weight-bold: 700;

  /* ── Line heights ───────────────────────────────────── */
  --lh-btn: 1.25rem;
  /*  20px — button labels  */
  --lh-nav: 1.5rem;
  /*  24px — nav items      */
  --lh-hero: 3rem;
  /*  48px — hero headline  */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.6;

  /* ── Letter spacing ─────────────────────────────────── */
  --tracking-tighter: -0.5px;
  --tracking-tight: -0.03em;
  --tracking-snug: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.1em;

  /* ── Spacing scale (8px base) ──────────────────────── */
  --space-1: 0.25rem;
  /*   4px */
  --space-2: 0.5rem;
  /*   8px */
  --space-3: 0.75rem;
  /*  12px */
  --space-4: 1rem;
  /*  16px */
  --space-5: 1.25rem;
  /*  20px */
  --space-6: 1.5rem;
  /*  24px */
  --space-8: 2rem;
  /*  32px */
  --space-10: 2.5rem;
  /*  40px */
  --space-12: 3rem;
  /*  48px */
  --space-16: 4rem;
  /*  64px */
  --space-20: 5rem;
  /*  80px */
  --space-24: 6rem;
  /*  96px */
  --space-32: 8rem;
  /* 128px */

  /* ── Layout ─────────────────────────────────────────── */
  --container-max: 80rem;
  --container-pad: var(--space-6);

  /* ── Border radius ──────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ── Shadows ────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, .08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .10);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, .12);
  --shadow-brand: 0 2px 8px rgba(0, 119, 204, .35);
  --shadow-brand-lg: 0 4px 14px rgba(0, 119, 204, .40);

  /* ── Transitions ────────────────────────────────────── */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;

  /* ── Component tokens ───────────────────────────────── */
  --nav-height: 56px;
  --nav-logo-height: 38px;
  --nav-pill-bg: #ebf3fc;
}