/* ==========================================================================
   Six Game — tokens.css
   Design system: "Obsidian Royale"
   Every colour, type step, space step and motion curve used site-wide.
   ========================================================================== */

:root {
  /* ---------- Core Palette ---------- */
  --color-obsidian:      #0A0908;   /* near-black base, warmer than pure black */
  --color-obsidian-2:    #14120F;   /* elevated surface */
  --color-obsidian-3:    #1D1A15;   /* card / panel surface */
  --color-obsidian-4:    #26221B;   /* hover surface, inputs */
  --color-royal-gold:    #C9A227;   /* primary accent — muted, premium gold */
  --color-royal-gold-lt: #E8C766;   /* gold highlight / hover state */
  --color-royal-gold-dk: #8C6F16;   /* gold shadow / pressed state */
  --color-ivory:         #F5F0E6;   /* primary text on dark */
  --color-ivory-dim:     #C9C2B3;   /* secondary text */
  --color-ivory-muted:   #7A7468;   /* tertiary / muted text */
  --color-border-gold:   rgba(201, 162, 39, 0.25);
  --color-border-gold-s: rgba(201, 162, 39, 0.45);
  --color-border-soft:   rgba(245, 240, 230, 0.08);
  --color-success:       #4CAF7D;
  --color-error:         #C6564A;
  --color-telegram:      #29A9EB;

  /* ---------- Gradients ---------- */
  --gradient-gold:        linear-gradient(135deg, #C9A227 0%, #E8C766 50%, #C9A227 100%);
  --gradient-gold-soft:   linear-gradient(135deg, #8C6F16 0%, #C9A227 45%, #E8C766 100%);
  --gradient-obsidian:    linear-gradient(180deg, #0A0908 0%, #14120F 100%);
  --gradient-glass:       linear-gradient(135deg, rgba(201,162,39,0.08) 0%, rgba(201,162,39,0.02) 100%);
  --gradient-panel:       linear-gradient(160deg, rgba(29,26,21,0.94) 0%, rgba(20,18,15,0.94) 100%);
  --gradient-hairline:    linear-gradient(90deg, transparent, rgba(201,162,39,0.55), transparent);
  --gradient-text-gold:   linear-gradient(180deg, #F0DFA4 0%, #C9A227 55%, #8C6F16 100%);

  /* ---------- Typography ---------- */
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-body:    'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-accent:  'Cinzel', 'Cormorant Garamond', serif;

  /* Fluid type scale (mobile → desktop, clamped so nothing overflows) */
  --fs-eyebrow: clamp(0.68rem, 0.64rem + 0.2vw, 0.78rem);
  --fs-xs:      clamp(0.76rem, 0.74rem + 0.12vw, 0.83rem);
  --fs-sm:      clamp(0.86rem, 0.83rem + 0.16vw, 0.94rem);
  --fs-base:    clamp(0.98rem, 0.95rem + 0.2vw, 1.06rem);
  --fs-lg:      clamp(1.08rem, 1.02rem + 0.3vw, 1.22rem);
  --fs-xl:      clamp(1.24rem, 1.14rem + 0.5vw, 1.5rem);
  --fs-h4:      clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --fs-h3:      clamp(1.45rem, 1.28rem + 0.85vw, 2rem);
  --fs-h2:      clamp(1.9rem, 1.5rem + 1.9vw, 3.1rem);
  --fs-h1:      clamp(2.3rem, 1.7rem + 2.7vw, 3.9rem);
  /* Capped so the hero headline still sets on three lines inside the
     narrower copy column at 1440px and above. */
  --fs-display: clamp(2.6rem, 1.85rem + 3.4vw, 4.5rem);

  /* ---------- Spacing scale ---------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  /* Vertical rhythm between major page sections */
  --section-y: clamp(3.5rem, 2.4rem + 5vw, 7rem);

  /* ---------- Layout ---------- */
  /* Generous breathing room on the left and right of every page. */
  --gutter: 1.25rem;
  --container-max: 1240px;
  --container-narrow: 880px;
  --container-wide: 1440px;
  --header-h: 72px;

  /* ---------- Shadows & Glow ---------- */
  --shadow-card:              0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-card-hover:        0 18px 48px rgba(0, 0, 0, 0.65);
  --shadow-gold-glow:         0 0 24px rgba(201, 162, 39, 0.35);
  --shadow-gold-glow-strong:  0 0 48px rgba(201, 162, 39, 0.5);
  --shadow-inset-gold:        inset 0 1px 0 rgba(232, 199, 102, 0.15);
  --shadow-plate:             0 2px 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(232,199,102,0.22);

  /* ---------- Radius ---------- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* ---------- Motion ---------- */
  --ease-luxury: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --transition-fast:   200ms var(--ease-luxury);
  --transition-normal: 350ms var(--ease-luxury);
  --transition-slow:   600ms var(--ease-luxury);

  /* ---------- Z-index ladder ---------- */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 500;
  --z-drawer: 700;
  --z-modal: 900;
  --z-toast: 1000;

  /* ---------- Texture ---------- */
  --noise-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (min-width: 768px) {
  :root {
    --gutter: 2.5rem;
    --header-h: 80px;
  }
}

@media (min-width: 1200px) {
  :root {
    --gutter: 4.5rem;
    --header-h: 88px;
  }
}

@media (min-width: 1600px) {
  :root {
    --gutter: 6rem;
  }
}