/* ==========================================================================
   B9 Game — Design Tokens
   Single source of truth for colour, type, spacing, radius, shadow, motion.
   Light mode only. Emerald + soft white with a champagne-gold accent.
   ========================================================================== */

:root {
  /* ---------- Brand: Emerald ramp ---------- */
  --emerald-50: #ECFDF3;
  --emerald-100: #D6F7E5;
  --emerald-200: #A9EDC9;
  --emerald-300: #6FDCA8;
  --emerald-400: #34C98A;
  --emerald-500: #10B981;
  --emerald-600: #0F9D58;
  --emerald-700: #0B7C46;
  --emerald-800: #0A5C36;
  --emerald-900: #073D25;

  /* ---------- Accent: champagne gold (premium, never neon) ---------- */
  --gold-50: #FDF8EC;
  --gold-100: #FAEFD2;
  --gold-200: #F2DDA6;
  --gold-300: #E7C877;
  --gold-400: #D9AF4B;
  --gold-500: #C0902F;
  --gold-600: #9A6F1F;

  /* ---------- Neutrals: warm soft whites + deep ink-green ---------- */
  --white: #FFFFFF;
  --paper: #FAFAF8;
  --paper-2: #F5F7F4;
  --line: #E6EBE6;
  --line-soft: #EFF3EF;

  /* Ink ramp — every value below passes WCAG AA (>=4.5:1) on white/paper */
  --ink-900: #0B1F17;   /* headings          — 16.4:1 */
  --ink-700: #24352D;   /* strong body       — 12.1:1 */
  --ink-500: #4A5D54;   /* body              —  7.2:1 */
  --ink-400: #5C6D65;   /* muted body        —  5.5:1 */
  --ink-300: #6A7B73;   /* captions / meta   —  4.5:1 */

  /* ---------- Semantic ---------- */
  --bg: var(--paper);
  --bg-elevated: var(--white);
  --text: var(--ink-500);
  --heading: var(--ink-900);
  --brand: var(--emerald-600);
  --brand-strong: var(--emerald-700);
  --accent: var(--gold-400);

  /* ---------- Gradients ----------
     --grad-brand is the surface behind white text (buttons, active tabs,
     badges). Its lightest stop stays dark enough for AA contrast on white.
     --grad-brand-vivid is decoration only — never place text on it. */
  --grad-brand: linear-gradient(135deg, #086238 0%, #0A7442 52%, #0C8248 100%);
  --grad-brand-vivid: linear-gradient(135deg, var(--emerald-600) 0%, var(--emerald-500) 55%, var(--emerald-400) 100%);
  --grad-brand-deep: linear-gradient(135deg, #06301F 0%, #0A5C36 52%, #0B7C46 100%);
  --grad-gold: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-300) 50%, var(--gold-200) 100%);
  --grad-mist: linear-gradient(180deg, #FFFFFF 0%, var(--emerald-50) 100%);
  --grad-mist-rev: linear-gradient(180deg, var(--emerald-50) 0%, #FFFFFF 100%);
  --grad-halo: radial-gradient(60% 60% at 50% 40%, rgba(16, 185, 129, 0.18) 0%, rgba(16, 185, 129, 0) 70%);

  /* ---------- Glass ---------- */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-strong: rgba(255, 255, 255, 0.88);
  --glass-border: rgba(15, 157, 88, 0.14);
  --glass-blur: saturate(180%) blur(18px);

  /* ---------- Typography ---------- */
  --font-display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-eyebrow: 0.78rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9063rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: clamp(1.08rem, 0.4vw + 1rem, 1.2rem);
  --fs-h6: clamp(1.02rem, 0.4vw + 0.95rem, 1.14rem);
  --fs-h5: clamp(1.14rem, 0.6vw + 1rem, 1.34rem);
  --fs-h4: clamp(1.3rem, 0.9vw + 1.1rem, 1.6rem);
  --fs-h3: clamp(1.5rem, 1.4vw + 1.15rem, 2.05rem);
  --fs-h2: clamp(1.85rem, 2.3vw + 1.2rem, 2.9rem);
  --fs-h1: clamp(2.35rem, 4.2vw + 1.1rem, 4.15rem);

  --lh-tight: 1.1;
  --lh-snug: 1.28;
  --lh-body: 1.75;
  --lh-loose: 1.85;

  --tracking-tight: -0.022em;
  --tracking-wide: 0.12em;

  /* ---------- Spacing scale ---------- */
  --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;

  /* Vertical rhythm between full sections */
  --section-y: clamp(58px, 7vw, 116px);
  --section-y-sm: clamp(40px, 5vw, 76px);

  /* ---------- Layout: generous side gutters ---------- */
  --container: 1200px;
  --container-wide: 1340px;
  --container-narrow: 860px;
  --gutter: clamp(20px, 6.5vw, 88px);

  /* ---------- Radii ---------- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* ---------- Shadows (soft, premium, green-tinted) ---------- */
  --sh-xs: 0 1px 2px rgba(11, 31, 23, 0.05);
  --sh-sm: 0 2px 8px rgba(11, 31, 23, 0.06);
  --sh-md: 0 10px 28px -12px rgba(11, 31, 23, 0.16), 0 2px 6px rgba(11, 31, 23, 0.04);
  --sh-lg: 0 24px 54px -22px rgba(11, 31, 23, 0.22), 0 4px 14px rgba(11, 31, 23, 0.05);
  --sh-xl: 0 40px 90px -34px rgba(9, 61, 37, 0.32), 0 8px 22px rgba(11, 31, 23, 0.06);
  --sh-brand: 0 16px 34px -14px rgba(15, 157, 88, 0.55);
  --sh-brand-lg: 0 26px 60px -20px rgba(15, 157, 88, 0.5);
  --sh-gold: 0 16px 34px -14px rgba(192, 144, 47, 0.42);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 160ms;
  --t-med: 280ms;
  --t-slow: 560ms;

  /* ---------- Z-index ---------- */
  --z-base: 1;
  --z-sticky: 40;
  --z-nav: 60;
  --z-drawer: 80;
  --z-fab: 70;
  --z-top: 100;

  /* ---------- Component metrics ---------- */
  --nav-h: 78px;
  --nav-h-scrolled: 66px;
  --promo-h: 44px;
  --bottombar-h: 66px;
}

/* Respect reduced-motion preferences globally. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0.01ms;
    --t-med: 0.01ms;
    --t-slow: 0.01ms;
  }
}