/* ==========================================================================
   Y1 GAME — tokens.css
   Design system: "Midnight Boulevard"
   Colour, typography, spacing, elevation and motion primitives.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Self-hosted webfonts (WOFF2)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/bebas-neue-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/rajdhani-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/rajdhani-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var.woff2') format('woff2');
}

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

:root {
  /* --- Base surfaces: boulevard-at-night canvas --- */
  --color-bg: #08060c;
  --color-bg-alt: #120e17;
  --color-surface: #1c1620;
  --color-surface-2: #241d29;
  --color-surface-glass: rgba(28, 22, 32, 0.65);
  --color-surface-glass-strong: rgba(12, 9, 16, 0.88);

  /* --- Brand accents --- */
  --color-crimson: #c41e3a;
  --color-crimson-bright: #e8375a;
  --color-crimson-deep: #8e1029;
  --color-gold: #d4af37;
  --color-gold-bright: #f4d77e;
  --color-gold-deep: #9a7c1e;
  --color-midnight: #050408;

  /* --- Text --- */
  --color-text-primary: #f6f0e4;
  --color-text-muted: #b6aca0;
  --color-text-dim: #8b8279;

  /* --- Utility --- */
  --color-border-gold: rgba(212, 175, 55, 0.3);
  --color-border-gold-soft: rgba(212, 175, 55, 0.16);
  --color-border-crimson: rgba(196, 30, 58, 0.35);
  --color-border-hair: rgba(246, 240, 228, 0.08);

  --gradient-gold: linear-gradient(135deg, #9a7c1e 0%, #d4af37 38%, #f4d77e 55%, #d4af37 72%, #9a7c1e 100%);
  --gradient-crimson: linear-gradient(135deg, #8e1029 0%, #c41e3a 50%, #e8375a 100%);
  --gradient-marquee: linear-gradient(180deg, #f4d77e 0%, #d4af37 48%, #9a7c1e 100%);
  --gradient-curtain: linear-gradient(180deg, #120e17 0%, #08060c 40%, #050408 100%);

  --shadow-neon-gold: 0 0 18px rgba(212, 175, 55, 0.55), 0 0 40px rgba(212, 175, 55, 0.25);
  --shadow-neon-crimson: 0 0 18px rgba(196, 30, 58, 0.55), 0 0 40px rgba(196, 30, 58, 0.25);
  --shadow-card: 0 18px 44px rgba(0, 0, 0, 0.55);
  --shadow-card-hover: 0 26px 60px rgba(0, 0, 0, 0.68);
  --shadow-nav: 0 12px 34px rgba(0, 0, 0, 0.6);

  /* --- Typography --- */
  --font-display: 'Bebas Neue', 'Rajdhani', 'Arial Narrow', 'Impact', sans-serif;
  --font-heading: 'Rajdhani', 'Bebas Neue', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --fs-hero: clamp(2.85rem, 7.4vw, 5.6rem);
  --fs-h1: clamp(2.15rem, 5vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 3.6vw, 2.7rem);
  --fs-h3: clamp(1.28rem, 2.3vw, 1.65rem);
  --fs-h4: clamp(1.08rem, 1.7vw, 1.24rem);
  --fs-lead: clamp(1.02rem, 1.55vw, 1.18rem);
  --fs-body: 1rem;
  --fs-sm: 0.9rem;
  --fs-xs: 0.79rem;

  --lh-tight: 1.06;
  --lh-heading: 1.2;
  --lh-body: 1.78;

  --ls-display: 0.028em;
  --ls-eyebrow: 0.26em;

  /* --- Spacing & layout --- */
  --space-2xs: 0.35rem;
  --space-xs: 0.6rem;
  --space-sm: 0.95rem;
  --space-md: 1.5rem;
  --space-lg: 2.4rem;
  --space-xl: 3.6rem;
  --space-2xl: 5.2rem;
  --space-3xl: 7rem;

  /* Generous breathing room on the left/right edges of every page. */
  --gutter: clamp(1.25rem, 5.5vw, 5rem);
  --container-max: 1240px;
  --container-wide: 1440px;
  --container-narrow: 860px;

  --section-pad: clamp(3.6rem, 7vw, 6.75rem);

  /* --- Radii --- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --dur-fast: 180ms;
  --dur-mid: 340ms;
  --dur-slow: 720ms;

  /* --- Layers --- */
  --z-bg: 0;
  --z-content: 2;
  --z-nav: 80;
  --z-menu: 90;
  --z-modal: 100;
}

/* --------------------------------------------------------------------------
   3. Reduced-motion contract
   All ambient effects (skyline twinkle, parallax, marquee sequencing, coin
   rotation, curtain, rail auto-drift) collapse to static or simple fades.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-mid: 1ms;
    --dur-slow: 1ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}