/* ==========================================================================
   tokens.css — Casino Bonus Site Design Tokens
   Dark neon theme: deep navy bg, gold + neon-green accents, Oswald display
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* ── Font families ─────────────────────────────────────────────────────── */
  --font-base:    'DM Sans', sans-serif;
  --font-display: 'Oswald', sans-serif;

  /* ── Font sizes ────────────────────────────────────────────────────────── */
  --fs-h1:        64px;
  --fs-h1-md:     48px;
  --fs-h1-sm:     34px;
  --fs-h2:        38px;
  --fs-h2-sm:     24px;
  --fs-h3:        22px;
  --fs-h4:        18px;

  --fs-metric:    56px;
  --fs-metric-sm: 40px;

  --fs-body:      16px;
  --fs-subhead:   20px;
  --fs-lead:      17px;
  --fs-sm:        14px;
  --fs-caption:   13px;
  --fs-micro:     12px;

  --fs-kicker:    11px;
  --fs-label:     11px;
  --fs-badge:     11.5px;
  --fs-btn:       15px;
  --fs-btn-sm:    13px;
  --fs-btn-lg:    17px;
  --fs-input:     15.5px;
  --fs-footer-label: 11px;

  /* ── Font weights ──────────────────────────────────────────────────────── */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-display:   800;

  /* ── Tracking ──────────────────────────────────────────────────────────── */
  --ls-tight:    -0.02em;
  --ls-snug:     -0.01em;
  --ls-base:     0;
  --ls-wide:     0.04em;
  --ls-wider:    0.08em;
  --ls-widest:   0.12em;

  /* ── Leading ───────────────────────────────────────────────────────────── */
  --lh-display:  1.05;
  --lh-heading:  1.15;
  --lh-tight:    1;
  --lh-card:     1.3;
  --lh-body:     1.55;
  --lh-prose:    1.65;

  /* ── Dark Theme Colors ─────────────────────────────────────────────────── */
  --ink:         #f0f4ff;
  --ink-rgb:     240, 244, 255;
  --ink-2:       #c8d0e8;
  --ink-3:       #8892aa;
  --muted:       #5a6480;
  --white:       #ffffff;
  --white-rgb:   255, 255, 255;

  /* ── Surfaces (dark) ───────────────────────────────────────────────────── */
  --bg:          #080c18;
  --bg-soft:     #0d1222;
  --bg-3:        #111828;
  --bg-elevated: #141a2e;
  --bg-dark:     #050810;
  --bg-dark-rgb: 5, 8, 16;
  --bg-card:     rgba(14, 20, 40, 0.85);
  --bg-glass:    rgba(255, 255, 255, 0.04);

  /* ── Borders ───────────────────────────────────────────────────────────── */
  --line:        rgba(255,255,255,.1);
  --line-2:      rgba(255,255,255,.06);
  --line-soft:   rgba(255,255,255,.04);
  --line-gold:   rgba(255, 215, 0, 0.3);
  --line-green:  rgba(0, 255, 136, 0.25);

  /* ── Brand / Accent ────────────────────────────────────────────────────── */
  --brand:         #FFD700;
  --brand-rgb:     255, 215, 0;
  --brand-ink:     #FFC200;
  --brand-soft:    rgba(255, 215, 0, 0.12);
  --brand-tint:    rgba(255, 215, 0, 0.06);

  --neon:          #00FF88;
  --neon-rgb:      0, 255, 136;
  --neon-soft:     rgba(0, 255, 136, 0.12);
  --neon-tint:     rgba(0, 255, 136, 0.06);

  --star:          #FFD700;
  --accent-live:   #00FF88;

  --error:         #ff4d6a;
  --error-rgb:     255, 77, 106;
  --error-ink:     #ff2244;

  /* ── Casino Brand Colors ───────────────────────────────────────────────── */
  --ice-1:       #4fc3f7;
  --ice-2:       #0288d1;
  --slotoro-1:   #FF6B00;
  --slotoro-2:   #FF9500;
  --mrbet-1:     #2ecc71;
  --mrbet-2:     #16a34a;
  --verde-1:     #00b894;
  --verde-2:     #00897b;
  --lemon-1:     #ffe600;
  --lemon-2:     #ffc400;

  /* ── Shadows ───────────────────────────────────────────────────────────── */
  --shadow-sm:   0 1px 3px rgba(0,0,0,.4);
  --shadow-md:   0 6px 24px rgba(0,0,0,.5);
  --shadow-lg:   0 20px 48px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.3);

  --shadow-brand:       0 4px 20px rgba(var(--brand-rgb), .35);
  --shadow-brand-hover: 0 6px 28px rgba(var(--brand-rgb), .55);
  --shadow-neon:        0 4px 20px rgba(var(--neon-rgb), .35);
  --shadow-neon-hover:  0 6px 28px rgba(var(--neon-rgb), .55);
  --shadow-header:      0 4px 24px rgba(0,0,0,.6);
  --shadow-header-strip: 0 2px 12px rgba(0,0,0,.5);

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

  /* ── Spacing ────────────────────────────────────────────────────────────── */
  --space-2:     2px;
  --space-3:     3px;
  --space-4:     4px;
  --space-5:     5px;
  --space-6:     6px;
  --space-8:     8px;
  --space-10:   10px;
  --space-12:   12px;
  --space-14:   14px;
  --space-16:   16px;
  --space-18:   18px;
  --space-20:   20px;
  --space-24:   24px;
  --space-28:   28px;
  --space-32:   32px;
  --space-40:   40px;
  --space-44:   44px;
  --space-48:   48px;
  --space-56:   56px;
  --space-64:   64px;
  --space-72:   72px;
  --space-88:   88px;
  --space-100: 100px;
  --space-120: 120px;
  --space-144: 144px;
  --space-180: 180px;

  /* ── Layout ─────────────────────────────────────────────────────────────── */
  --container-max:  1200px;
  --container-pad:  var(--space-24);

  --bp-tablet:  980px;
  --bp-mobile:  720px;
}