/* ==========================================================================
   YY GAME — tokens.css
   Design tokens for the "Reel Royale — Midnight Gold" system.
   Obsidian cabinet + burgundy velvet + champagne gold, lifted with an
   imperial-violet depth wash and a jade signal accent.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Self-hosted typefaces (WOFF2, latin + latin-ext for the ₹ glyph)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/bebas-neue-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/bebas-neue-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/nunito-sans-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/nunito-sans-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* --- Base: the machine's matte cabinet --------------------------------- */
  --color-obsidian: #0b0708;
  --color-obsidian-panel: #16100e;
  --color-obsidian-elevated: #211613;
  --color-obsidian-border: #33231b;
  --color-obsidian-hairline: rgba(232, 184, 92, 0.16);

  /* --- Burgundy: the velvet backdrop behind the reels -------------------- */
  --color-burgundy-cabinet: #7a1226;
  --color-burgundy-light: #a31b33;
  --color-burgundy-deep: #4e0a16;

  /* --- Champagne gold: coin, trim, marquee bulb -------------------------- */
  --color-gold-coin: #e8b85c;
  --color-gold-jackpot: #ffe9ae;
  --color-gold-deep: #a87428;
  --color-gold-coin-a: rgba(232, 184, 92, 0.35);
  --color-gold-faint-a: rgba(232, 184, 92, 0.09);
  --color-burgundy-a: rgba(163, 27, 51, 0.4);

  /* --- Imperial violet: depth wash, category accents --------------------- */
  --color-violet: #6b2a8e;
  --color-violet-light: #9b4fc4;
  --color-violet-a: rgba(155, 79, 196, 0.32);
  /* Text-safe tint: --color-violet-light is only 3.9:1 on the panel, below AA */
  --color-violet-text: #c08ce0;

  /* --- Jade: live / verified signal -------------------------------------- */
  --color-jade: #2fd3a0;
  --color-jade-deep: #127f60;
  --color-jade-a: rgba(47, 211, 160, 0.28);

  /* --- Text & neutrals --------------------------------------------------- */
  --color-text-primary: #f8f1e3;
  --color-text-secondary: #cdbba2;
  --color-text-muted: #96856f;
  --color-text-on-gold: #1a0f07;

  /* --- Functional -------------------------------------------------------- */
  --color-success: #55a66b;
  --color-warning: #e2932e;
  --color-danger: #c13a34;
  /* Text-safe tint of --color-danger, which is only 3.5:1 on the panel */
  --color-danger-text: #e8756e;

  /* --- Gradients --------------------------------------------------------- */
  --grad-gold: linear-gradient(135deg, var(--color-gold-deep) 0%,
    var(--color-gold-coin) 42%, var(--color-gold-jackpot) 62%,
    var(--color-gold-coin) 82%, var(--color-gold-deep) 100%);
  --grad-cta: linear-gradient(118deg, var(--color-burgundy-deep) 0%,
    var(--color-burgundy-cabinet) 28%, var(--color-gold-deep) 68%,
    var(--color-gold-coin) 100%);
  --grad-velvet: linear-gradient(160deg, var(--color-burgundy-cabinet) 0%,
    var(--color-burgundy-deep) 58%, var(--color-obsidian) 100%);
  --grad-marquee: linear-gradient(180deg, rgba(255, 233, 174, 0.16) 0%,
    rgba(122, 18, 38, 0.2) 38%, rgba(11, 7, 8, 0) 100%);
  --grad-panel: linear-gradient(165deg, rgba(51, 35, 27, 0.72) 0%,
    rgba(22, 16, 14, 0.94) 46%, rgba(11, 7, 8, 0.98) 100%);
  --grad-violet-wash: radial-gradient(ellipse 70% 60% at 50% 0%,
    rgba(107, 42, 142, 0.24) 0%, rgba(11, 7, 8, 0) 70%);

  /* --- Elevation & glow -------------------------------------------------- */
  --shadow-card: 0 10px 34px rgba(0, 0, 0, 0.65);
  --shadow-card-lg: 0 24px 64px rgba(0, 0, 0, 0.72);
  --shadow-glow-gold: 0 0 28px var(--color-gold-coin-a);
  --shadow-glow-burgundy: 0 0 28px var(--color-burgundy-a);
  --shadow-glow-violet: 0 0 34px var(--color-violet-a);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 233, 174, 0.14);

  /* --- Radii ------------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

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

  /* --- Layout ------------------------------------------------------------ */
  --container-max: 1240px;
  --container-narrow: 860px;
  --gutter: 1.25rem;          /* extra breathing room left + right */
  --nav-height: 66px;

  /* --- Typography -------------------------------------------------------- */
  --font-display: 'Bebas Neue', 'Arial Narrow', 'Haettenschweiler', sans-serif;
  --font-body: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;

  --fs-display: clamp(2.6rem, 9vw, 4.6rem);
  --fs-h1: clamp(2.15rem, 7vw, 3.6rem);
  --fs-h2: clamp(1.75rem, 5.2vw, 2.7rem);
  --fs-h3: clamp(1.32rem, 3.6vw, 1.75rem);
  --fs-h4: clamp(1.08rem, 2.6vw, 1.25rem);
  --fs-body: 1rem;
  --fs-sm: 0.9125rem;
  --fs-xs: 0.8125rem;
  --fs-2xs: 0.72rem;

  --lh-tight: 1.04;
  --lh-snug: 1.28;
  --lh-body: 1.72;

  --tracking-marquee: 0.14em;
  --tracking-wide: 0.06em;

  /* --- Motion ------------------------------------------------------------ */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 620ms;

  /* --- Z-index scale ----------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 60;
  --z-nav: 80;
  --z-drawer: 90;
  --z-banner: 95;
  --z-modal: 100;
}

@media (min-width: 768px) {
  :root {
    --gutter: 2.25rem;
    --nav-height: 76px;
    --fs-body: 1.0325rem;
  }
}

@media (min-width: 1200px) {
  :root {
    --gutter: 3.25rem;
    --nav-height: 84px;
    --fs-body: 1.06rem;
  }
}

@media (min-width: 1480px) {
  :root {
    --gutter: 4.5rem;
  }
}