/* ==========================================================================
   tokens.css — single source of truth for all design values.
   MEGA_PROMPT §3 (cleaned values; the extractor's noisy values were dropped).
   No other file may use raw hex / spacing / radius values for design tokens.
   ========================================================================== */

:root {
  /* --- Color (§3.1) --- */
  --color-bg: #ffffff;               /* light sections */
  --color-bg-dark: #0b0b0c;          /* hero, footer, dark sections */
  --color-surface: #f4f4f4;          /* light cards / alternate sections */
  --color-surface-strong: #d0d0d0;   /* borders, dividers on light */
  --color-text: #181818;             /* main text on light */
  --color-text-muted: #5a5a5a;       /* secondary text on light */
  --color-text-inverse: #ffffff;     /* text on dark */
  --color-text-inverse-muted: #b8b8b8; /* secondary text on dark */
  --color-accent: #ec0000;           /* THE one accent: primary buttons, key underline, focus highlights */
  --color-accent-hover: #c40000;     /* hover for accent */
  --color-focus: rgba(0, 56, 255, 0.22); /* keyboard focus ring (0 0 0 4px) */

  /* --- Typography (§3.2) --- */
  --font-sans: "Neue Haas Grotesk Display Pro", Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fs-sm: 0.875rem;   /* 14px */
  --fs-base: 1rem;     /* 16px */
  --fs-md: 1.25rem;    /* 20px */
  --fs-lg: 1.5rem;     /* 24px */
  --fs-xl: 1.75rem;    /* 28px */
  --fs-2xl: 2rem;      /* 32px */
  --lh-body: 1.6;
  --lh-tight: 1.05;
  --lh-heading: 1.15;

  /* --- Spacing (§3.3) — base unit 4px --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Section rhythm */
  --section-pad: 96px;        /* desktop; 64px on mobile (see base.css) */
  --content-max: 1200px;
  --content-pad: 24px;        /* mobile 16px (see base.css) */

  /* --- Radius, shadow, motion (§3.4) --- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 50px;        /* buttons */
  --shadow-card: 0 10px 20px rgba(0, 0, 0, 0.2); /* hover / elevated only */
  --duration-fast: 200ms;     /* hover */
  --duration-med: 300ms;      /* menus and reveals */
  --ease: ease-out;

  /* --- Header --- */
  --header-height: 72px;
  --announcement-height: 40px;
  --header-total: 112px; /* announcement + header (sticky block) */
}