/* =============================================================
   tokens.css — CSS Custom Properties
   Single source of truth for all colour, font, and spacing tokens.
   All other stylesheets consume these via var() references.
   ============================================================= */

:root {

  /* ----------------------------------------------------------
     Landing Page Surface (dark background context)
     ---------------------------------------------------------- */
  --hud-bg:    #0a0a0f;
  --text-white: #ffffff;
  --text-dim:  rgba(255,255,255,0.45);

  /* ----------------------------------------------------------
     Inner Pages Surface (cream background context)
     ---------------------------------------------------------- */
  --bg:        #FAFAF5;
  --bg-2:      #F4F1E8;
  --text:      #0F0F0F;
  --text-off:  #5C5C52;
  --muted:     #9A9A8E;
  --border:    rgba(0,0,0,0.08);

  /* ----------------------------------------------------------
     Accent Tokens (shared across both surface contexts)
     ---------------------------------------------------------- */
  --amber:      #F5B800;
  --amber-dim:  rgba(245,184,0,0.6);
  --amber-glow: rgba(245,184,0,0.15);

  /* --yellow-h is the darker amber variant — use for amber text
     on cream surfaces to satisfy WCAG AA contrast (4.5:1) */
  --yellow:      #EAB308;
  --yellow-h:    #CA8A04;
  --yellow-glow: rgba(234,179,8,0.15);

  /* ----------------------------------------------------------
     Font Stack Tokens
     ---------------------------------------------------------- */
  --display: 'Space Grotesk', system-ui, sans-serif;
  --sans:    'Inter', system-ui, sans-serif;

  /* ----------------------------------------------------------
     Spacing Scale (multiples of 4)
     ---------------------------------------------------------- */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

}