/* ==========================================================================
   S9 GAME — DESIGN TOKENS
   Single source of truth for colour, type, spacing, radius, shadow & motion.
   Palette: Midnight Navy base · Slate Blue surfaces · Royal Gold accent.
   ========================================================================== */

:root {
  /* ---------- Core palette : Midnight Navy ---------- */
  --navy-990: #05080F;
  --navy-950: #070C16;
  --navy-900: #0B1120;   /* brand background base */
  --navy-860: #0E1524;
  --navy-820: #121A2C;
  --navy-780: #162036;

  /* ---------- Slate Blue : secondary surfaces ---------- */
  --slate-800: #22304A;
  --slate-700: #3B4C6B;  /* brand slate */
  --slate-600: #4A5D7E;  /* brand slate light */
  --slate-500: #64789B;
  --slate-400: #8598B8;

  /* ---------- Royal Gold : accent, CTA, highlight ---------- */
  --gold-700: #8A6B1C;
  --gold-600: #B8912A;
  --gold-500: #D4AF37;   /* brand gold */
  --gold-400: #F0C766;   /* brand gold light */
  --gold-300: #F7DF9B;
  --gold-200: #FBEFC9;

  /* ---------- Neutral / text ---------- */
  --white: #FFFFFF;
  --ink-050: #F4F7FC;    /* headings on navy  — contrast 16.9:1 */
  --ink-100: #DCE4F1;    /* body copy         — contrast 13.2:1 */
  --ink-200: #B7C4DA;    /* muted body        — contrast  9.1:1 */
  --ink-300: #94A4C0;    /* meta / captions   — contrast  6.4:1 */
  --ink-400: #7C8DAB;    /* min AA on navy    — contrast  4.9:1 */

  /* ---------- Semantic ---------- */
  --success: #3DD68C;
  --warning: #F0B429;
  --danger:  #F1657A;
  --telegram: #29A9EB;
  --telegram-dark: #1E8CC7;

  /* ---------- Surfaces & glass ---------- */
  --surface-1: rgba(18, 26, 44, 0.72);
  --surface-2: rgba(34, 48, 74, 0.55);
  --surface-3: rgba(59, 76, 107, 0.32);
  --glass-bg: linear-gradient(155deg, rgba(59, 76, 107, 0.30) 0%, rgba(11, 17, 32, 0.62) 58%, rgba(11, 17, 32, 0.82) 100%);
  --glass-blur: saturate(150%) blur(18px);

  /* ---------- Hairlines & borders ---------- */
  --line-soft: 1px solid rgba(212, 175, 55, 0.16);
  --line-gold: 1px solid rgba(212, 175, 55, 0.38);
  --line-slate: 1px solid rgba(101, 121, 155, 0.24);

  /* ---------- Gold gradients (foil style) ---------- */
  --grad-gold: linear-gradient(135deg, #8A6B1C 0%, #D4AF37 26%, #F7DF9B 48%, #F0C766 62%, #B8912A 100%);
  --grad-gold-soft: linear-gradient(135deg, #D4AF37 0%, #F0C766 55%, #D4AF37 100%);
  --grad-gold-text: linear-gradient(100deg, #F7DF9B 0%, #F0C766 26%, #FFFDF4 48%, #D4AF37 72%, #F0C766 100%);
  --grad-navy: linear-gradient(180deg, #0B1120 0%, #0E1524 50%, #070C16 100%);
  --grad-mesh: radial-gradient(60% 60% at 12% 8%, rgba(212, 175, 55, 0.13) 0%, transparent 62%),
               radial-gradient(50% 55% at 88% 14%, rgba(74, 93, 126, 0.28) 0%, transparent 66%),
               radial-gradient(70% 60% at 50% 100%, rgba(59, 76, 107, 0.22) 0%, transparent 70%);

  /* ---------- Shadows & glows ---------- */
  --shadow-xs: 0 2px 8px rgba(2, 5, 12, 0.34);
  --shadow-sm: 0 6px 18px rgba(2, 5, 12, 0.40);
  --shadow-md: 0 14px 38px rgba(2, 5, 12, 0.50);
  --shadow-lg: 0 28px 70px rgba(2, 5, 12, 0.62);
  --shadow-xl: 0 44px 110px rgba(2, 5, 12, 0.72);
  --glow-gold-sm: 0 0 0 1px rgba(212, 175, 55, 0.30), 0 8px 26px rgba(212, 175, 55, 0.16);
  --glow-gold-md: 0 0 0 1px rgba(212, 175, 55, 0.44), 0 14px 42px rgba(212, 175, 55, 0.26);
  --glow-gold-lg: 0 0 0 1px rgba(240, 199, 102, 0.55), 0 20px 64px rgba(212, 175, 55, 0.34);
  --inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.07);

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

  --fs-hero:   clamp(2.35rem, 1.30rem + 4.4vw, 4.65rem);
  --fs-h1:     clamp(2.05rem, 1.32rem + 3.0vw, 3.55rem);
  --fs-h2:     clamp(1.72rem, 1.22rem + 2.1vw, 2.85rem);
  --fs-h3:     clamp(1.28rem, 1.06rem + 0.9vw, 1.72rem);
  --fs-h4:     clamp(1.08rem, 0.98rem + 0.4vw, 1.28rem);
  --fs-lead:   clamp(1.03rem, 0.96rem + 0.34vw, 1.22rem);
  --fs-body:   clamp(0.975rem, 0.945rem + 0.16vw, 1.06rem);
  --fs-sm:     0.918rem;
  --fs-xs:     0.812rem;
  --fs-eyebrow:0.752rem;

  --lh-tight: 1.08;
  --lh-snug: 1.24;
  --lh-normal: 1.55;
  --lh-relaxed: 1.78;

  /* ---------- 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 page sections */
  --section-y: clamp(64px, 8vw, 124px);
  --section-y-sm: clamp(48px, 6vw, 88px);

  /* ---------- Layout ---------- */
  --container: 1200px;
  --container-wide: 1360px;
  --container-narrow: 880px;
  /* Generous breathing room on the left & right edges of every page */
  --gutter: clamp(20px, 5.2vw, 72px);
  --header-h: 78px;
  --header-h-shrunk: 62px;

  /* ---------- Radius ---------- */
  --r-xs: 8px;  --r-sm: 12px; --r-md: 18px;
  --r-lg: 24px; --r-xl: 32px; --r-2xl: 42px; --r-pill: 999px;

  /* ---------- 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);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;
  --dur-reveal: 820ms;

  /* ---------- Z-index ladder ---------- */
  --z-bg: 0;
  --z-content: 1;
  --z-sticky: 60;
  --z-header: 70;
  --z-fab: 80;
  --z-drawer: 90;
  --z-modal: 100;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-reveal: 1ms;
  }
}