/* ==========================================================================
   B9 GAME — DESIGN TOKENS
   Single source of truth for colour, type, spacing, motion and elevation.
   Light-mode emerald system. Loaded before main.css on every page.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------
     1. BRAND — Emerald scale
     --------------------------------------------------------------- */
  --brand-950: #02190E;
  --brand-900: #032B18;
  --brand-800: #04422A;
  --brand-700: #046A38;   /* deep forest — hover / active / headings */
  --brand-600: #0B7C4C;
  --brand-500: #0E9F6E;   /* primary emerald — buttons, links */
  --brand-400: #22C08A;
  --brand-300: #6EE7B7;
  --brand-200: #A7F3D0;
  --brand-100: #D6F5E5;
  --brand-50:  #ECFDF5;

  /* ---------------------------------------------------------------
     2. ACCENTS — gold for reward/badge, mint for highlight
     --------------------------------------------------------------- */
  --gold-700: #7C5A0F;    /* AA text on light gold */
  --gold-600: #9A7415;
  --gold-500: #C79A28;
  --gold-400: #E3BE5E;
  --gold-200: #F6E6BC;
  --gold-100: #FDF6E4;

  --mint-500: #14C2A0;
  --mint-100: #DFF7F1;

  --danger-600: #B4341F;
  --danger-100: #FDEAE5;

  /* ---------------------------------------------------------------
     3. SURFACES — soft white dominant, never dark
     --------------------------------------------------------------- */
  --bg:          #FAFAF8;
  --bg-tint:     #F3F7F4;
  --bg-mint:     #EFF9F4;
  --surface:     #FFFFFF;
  --surface-2:   #F5F7F5;
  --surface-3:   #EDF2EE;

  --line:        #E2EAE5;
  --line-strong: #CBDAD1;
  --line-brand:  #BFEBD6;

  /* ---------------------------------------------------------------
     4. INK — text colours (all AA+ on --bg)
     --------------------------------------------------------------- */
  --ink:    #08170F;   /* 16.9:1 */
  --ink-2:  #294036;   /* 10.2:1 */
  --ink-3:  #526760;   /*  5.6:1 */
  --ink-4:  #6B7F78;   /*  4.6:1 — meta text only, 14px+ */
  --on-brand: #FFFFFF;

  /* ---------------------------------------------------------------
     5. GRADIENTS
     --------------------------------------------------------------- */
  --grad-brand:   linear-gradient(135deg, var(--brand-600) 0%, var(--brand-500) 48%, var(--brand-400) 100%);
  --grad-deep:    linear-gradient(140deg, var(--brand-800) 0%, var(--brand-700) 55%, var(--brand-600) 100%);
  --grad-gold:    linear-gradient(135deg, var(--gold-500) 0%, var(--gold-400) 50%, var(--gold-200) 100%);
  --grad-surface: linear-gradient(180deg, #FFFFFF 0%, var(--bg-tint) 100%);
  --grad-halo:    radial-gradient(60% 60% at 50% 40%, rgba(14,159,110,.16) 0%, rgba(14,159,110,0) 70%);
  --grad-text:    linear-gradient(120deg, var(--brand-700) 0%, var(--brand-500) 45%, var(--mint-500) 100%);

  /* ---------------------------------------------------------------
     6. ELEVATION — green-tinted, never harsh black
     --------------------------------------------------------------- */
  --shadow-xs:   0 1px 2px rgba(4,66,42,.05);
  --shadow-sm:   0 2px 4px rgba(4,66,42,.05), 0 4px 12px rgba(4,66,42,.05);
  --shadow-md:   0 4px 10px rgba(4,66,42,.07), 0 14px 32px rgba(4,66,42,.07);
  --shadow-lg:   0 10px 22px rgba(4,66,42,.09), 0 30px 64px rgba(4,66,42,.10);
  --shadow-xl:   0 18px 40px rgba(4,66,42,.12), 0 48px 96px rgba(4,66,42,.12);
  --shadow-glow: 0 10px 28px rgba(14,159,110,.32);
  --shadow-gold: 0 8px 24px rgba(199,154,40,.28);
  --ring:        0 0 0 4px rgba(14,159,110,.22);

  /* ---------------------------------------------------------------
     7. TYPOGRAPHY
     --------------------------------------------------------------- */
  --font-display: "Sora", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Plus Jakarta Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

  /* fluid type scale */
  --fs-display: clamp(2.5rem, 1.55rem + 4.2vw, 4.6rem);
  --fs-h1:      clamp(2.1rem, 1.45rem + 2.8vw, 3.5rem);
  --fs-h2:      clamp(1.7rem, 1.25rem + 1.9vw, 2.7rem);
  --fs-h3:      clamp(1.28rem, 1.08rem + 0.85vw, 1.7rem);
  --fs-h4:      clamp(1.08rem, 1rem + 0.4vw, 1.28rem);
  --fs-lead:    clamp(1.03rem, 0.97rem + 0.35vw, 1.22rem);
  --fs-body:    1rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-eyebrow: 0.78rem;

  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-body:  1.75;
  --lh-loose: 1.85;

  --ls-display: -0.03em;
  --ls-heading: -0.015em;
  --ls-eyebrow: 0.18em;
  --ls-button:  0.01em;

  /* ---------------------------------------------------------------
     8. SPACING & LAYOUT
     --------------------------------------------------------------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-7: 32px;  --sp-8: 40px;
  --sp-9: 48px;  --sp-10: 64px; --sp-11: 80px; --sp-12: 104px;

  --container: 1200px;
  --container-wide: 1360px;
  --container-narrow: 820px;

  /* generous breathing room on the left / right edges */
  --gutter: clamp(20px, 6vw, 88px);

  --section-y: clamp(64px, 8vw, 120px);
  --section-y-sm: clamp(48px, 5.5vw, 80px);

  --r-xs: 8px;  --r-sm: 12px; --r-md: 16px;
  --r-lg: 22px; --r-xl: 30px; --r-2xl: 40px;
  --r-pill: 999px;

  --header-h: 76px;
  --mobilebar-h: 66px;

  /* ---------------------------------------------------------------
     9. MOTION
     --------------------------------------------------------------- */
  --ease-out:    cubic-bezier(.22,.68,.32,1);
  --ease-spring: cubic-bezier(.34,1.4,.5,1);
  --ease-soft:   cubic-bezier(.4,0,.2,1);

  --t-fast: 160ms;
  --t-base: 280ms;
  --t-slow: 520ms;
  --t-reveal: 820ms;

  --z-base: 1;
  --z-sticky: 60;
  --z-header: 80;
  --z-fab: 90;
  --z-drawer: 100;
  --z-modal: 120;
}

/* Users who prefer reduced motion get an instant, static experience. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1ms; --t-base: 1ms; --t-slow: 1ms; --t-reveal: 1ms;
  }
}