@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600;700&family=Anton&family=Bebas+Neue&display=swap');
/* ============================================================
   NEONBET · Design Tokens  (frontend-redesign-v2 · Phase 1)
   ------------------------------------------------------------
   Semantic CSS custom properties. Components must reach through
   these tokens, never raw hex.

   SOURCE OF TRUTH: extracted verbatim from the approved Netlify
   reference (aesthetic-cendol-ad01ec.netlify.app · css/tokens.css).
   Temporary until Figma access is available (login-gated today).

   SAFETY (Phase 1): this file is LOAD-ORDER-INERT. It is linked
   BEFORE css/style.css, so the three names that collide with the
   legacy palette (--font-body, --font-mono, --radius-lg) are
   intentionally overridden by style.css and the live app is
   unchanged. Every other token here is currently unconsumed.
   Phase 2 removes the legacy :root and switches consumers over.

   No games / categories / providers are encoded here — tokens only.
   ============================================================ */

:root {
  /* ---- Surfaces (deep casino-navy, dark-only) ---- */
  --bg-base:        #0A1233;   /* page background */
  --bg-surface-1:   #0D1740;   /* page-level cards */
  --bg-surface:     #111B47;   /* default card */
  --bg-surface-2:   #16215A;   /* nested card */
  --bg-elevated:    #1B286A;   /* modal / floating */
  --bg-elevated-2:  #21307A;   /* hover on elevated */
  --bg-overlay:     rgba(10, 18, 51, 0.78);
  --scrim:          #07070C;   /* near-black scrim for art gradients */

  /* ---- Borders ---- */
  --border-subtle:  rgba(255,255,255,0.06);
  --border-strong:  rgba(255,255,255,0.12);
  --border-neon:    rgba(0, 229, 255, 0.55);

  /* ---- Text ---- */
  --text-primary:   #F5F5F8;
  --text-secondary: #9FA0B5;
  --text-muted:     #696A82;
  --text-inverse:   #0A1233;

  /* ---- Brand accents ---- */
  --neon-magenta:   #FF2E93;
  --neon-cyan:      #00E5FF;
  --neon-violet:    #8B5CFF;
  --gold-premium:   #E8C26A;
  --casino-gold:    #FFC428;

  /* ---- Status ---- */
  --success:        #3DDC97;
  --warning:        #FFB547;
  --danger:         #FF5470;
  --info:           #00E5FF;

  /* ---- Brand gradients ---- */
  --grad-primary:   linear-gradient(135deg, #FF2E93 0%, #8B5CFF 50%, #00E5FF 100%);
  --grad-violet:    linear-gradient(135deg, #8B5CFF 0%, #FF2E93 100%);
  --grad-cyan:      linear-gradient(135deg, #00E5FF 0%, #8B5CFF 100%);
  --grad-gold:      linear-gradient(135deg, #E8C26A 0%, #FF2E93 100%);
  --grad-surface:   linear-gradient(180deg, #16215A 0%, #0D1740 100%);

  /* ---- Shadows / glows ---- */
  --shadow-card:     0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-elevated: 0 12px 32px rgba(0, 0, 0, 0.55);
  --glow-magenta:    0 0 20px rgba(255, 46, 147, 0.55);
  --glow-cyan:       0 0 20px rgba(0, 229, 255, 0.55);
  --glow-violet:     0 0 24px rgba(139, 92, 255, 0.45);

  /* ---- Typography ----
     Display = Archivo Black (headlines / labels / game titles).
     Body    = Archivo 400-700.   Mono = Archivo numerals + system mono.
     NOTE: --font-body / --font-mono collide with legacy style.css and are
     deliberately shadowed in Phase 1 (see header). --font-display is new. */
  --font-display:   "Archivo Black", "Anton", "Bebas Neue", Impact, "Arial Black", Helvetica, sans-serif;
  --font-body:      "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-sans:      "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:      "Archivo", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Fluid type ramp · clamp(min, fluid, max) ---- */
  --text-xs:        clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --text-sm:        clamp(0.82rem, 0.80rem + 0.12vw, 0.88rem);
  --text-base:      clamp(0.94rem, 0.90rem + 0.18vw, 1.02rem);
  --text-lg:        clamp(1.06rem, 1.00rem + 0.30vw, 1.20rem);
  --text-xl:        clamp(1.20rem, 1.10rem + 0.50vw, 1.45rem);
  --text-2xl:       clamp(1.50rem, 1.30rem + 0.90vw, 2.00rem);
  --text-3xl:       clamp(1.90rem, 1.60rem + 1.50vw, 2.75rem);
  --text-4xl:       clamp(2.40rem, 1.80rem + 2.80vw, 3.75rem);
  --text-5xl:       clamp(3.00rem, 2.00rem + 4.50vw, 5.00rem);

  /* ---- Spacing rhythm (4 / 8) ---- */
  --space-1:  4px;   --space-2:  8px;   --space-3:  12px;  --space-4:  16px;
  --space-5:  20px;  --space-6:  24px;  --space-8:  32px;  --space-10: 40px;
  --space-12: 48px;  --space-16: 64px;  --space-20: 80px;  --space-24: 96px;

  /* ---- Radii ---- (legacy --radius-lg is shadowed in Phase 1) */
  --radius-xs:  4px;   --radius-sm: 6px;  --radius-md: 12px;
  --radius-lg:  14px;  --radius-xl: 20px; --radius-pill: 999px;

  /* ---- Layout ---- */
  --container-max:     1320px;
  --nav-height:        72px;
  --nav-height-mobile: 60px;
  --bottombar-height:  64px;

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:     cubic-bezier(0.55, 0, 1, 0.45);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    150ms;
  --dur-base:    200ms;
  --dur-slow:    300ms;
  --dur-slower:  400ms;

  /* ---- Focus ring ---- */
  --focus-ring:  0 0 0 2px var(--bg-base), 0 0 0 4px var(--neon-cyan);

  /* ---- Z-index scale ---- */
  --z-nav:     50;
  --z-drawer:  80;
  --z-modal:   100;
  --z-toast:   120;
  --z-tooltip: 140;

  color-scheme: dark;
}

/* Reduced-motion: collapse motion-duration tokens (inert until consumed) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:   1ms;
    --dur-base:   1ms;
    --dur-slow:   1ms;
    --dur-slower: 1ms;
  }
}