/* ============================================================
   B9 GAME — Design Tokens
   Premium emerald + soft-white system for b99pk.pk
   ============================================================ */

:root {
  /* ---------- Brand: Emerald ---------- */
  --em-950: #032b0d;
  --em-900: #04310f;
  --em-800: #054d18;
  --em-700: #046307;   /* deep emerald (primary anchor) */
  --em-600: #067a1e;
  --em-500: #0f9d38;
  --em-400: #10b981;   /* bright emerald accent */
  --em-300: #34d399;
  --em-200: #6ee7b7;
  --em-100: #b8f5d6;
  --em-050: #e7fbf0;

  /* Primary aliases */
  --brand: #046307;
  --brand-bright: #10b981;
  --brand-glow: rgba(16, 185, 129, .45);
  --brand-gold: #f5c451;   /* accent used sparingly (bonus highlights) */
  --brand-gold-deep: #d99e21;

  /* ---------- Neutrals / Soft white ---------- */
  --white: #ffffff;
  --paper: #fdfdfd;
  --paper-soft: #f8faf9;
  --mist: #eef4f1;
  --line: #e2ede8;
  --line-strong: #cfe0d8;

  --ink-900: #071410;   /* near-black text on light */
  --ink-800: #0f2a20;
  --ink-700: #24413a;
  --ink-600: #40564f;
  --ink-500: #5d726b;
  --ink-400: #839790;
  --muted: #64756e;

  /* Dark surfaces (header/hero/footer) */
  --surface-dark: #041007;
  --surface-dark-2: #06180c;
  --surface-dark-3: #0a2413;
  --glass-dark: rgba(6, 24, 12, .72);
  --glass-light: rgba(255, 255, 255, .72);
  --glass-border: rgba(255, 255, 255, .16);
  --glass-border-dark: rgba(16, 185, 129, .22);

  /* ---------- 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-hero: clamp(2.6rem, 6vw, 4.75rem);
  --fs-h1: clamp(2.1rem, 4.5vw, 3.35rem);
  --fs-h2: clamp(1.7rem, 3.4vw, 2.6rem);
  --fs-h3: clamp(1.3rem, 2.2vw, 1.7rem);
  --fs-h4: clamp(1.1rem, 1.6vw, 1.28rem);
  --fs-body: clamp(1rem, 1.05vw, 1.075rem);
  --fs-sm: .9rem;
  --fs-xs: .8rem;

  --lh-tight: 1.08;
  --lh-snug: 1.3;
  --lh-normal: 1.7;

  /* ---------- Spacing / layout ---------- */
  --container: 1200px;
  --container-wide: 1320px;
  --gutter: clamp(1.25rem, 5vw, 4rem);   /* generous left/right blank space */
  --section-y: clamp(4rem, 8vw, 7.5rem);

  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* ---------- Radii ---------- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --sh-xs: 0 1px 2px rgba(4, 49, 15, .06);
  --sh-sm: 0 4px 14px rgba(4, 49, 15, .08);
  --sh-md: 0 14px 40px -12px rgba(4, 49, 15, .18);
  --sh-lg: 0 30px 70px -22px rgba(4, 49, 15, .32);
  --sh-glow: 0 20px 60px -18px var(--brand-glow);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, .6);

  /* ---------- Gradients ---------- */
  --grad-brand: linear-gradient(135deg, #046307 0%, #0f9d38 52%, #10b981 100%);
  --grad-brand-soft: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  --grad-cta: linear-gradient(120deg, #067a1e 0%, #10b981 55%, #34d399 100%);
  --grad-dark: radial-gradient(120% 120% at 20% 0%, #0a2413 0%, #041007 60%, #020a05 100%);
  --grad-gold: linear-gradient(120deg, #f5c451, #d99e21);
  --grad-mesh:
    radial-gradient(40% 55% at 12% 18%, rgba(16,185,129,.22), transparent 60%),
    radial-gradient(45% 55% at 88% 12%, rgba(52,211,153,.18), transparent 60%),
    radial-gradient(60% 60% at 50% 110%, rgba(4,99,7,.20), transparent 60%);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .18s;
  --t: .32s;
  --t-slow: .6s;

  --header-h: 76px;
}

@media (max-width: 640px) {
  :root { --header-h: 64px; }
}