/* ═══════════════════════════════════════════════════════════════
   BonusLoots CSS Variables — Design System Tokens
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Backgrounds ── */
  --bg-primary: #0A0A0A;
  --bg-secondary: #111111;
  --bg-tertiary: #1A1A1A;
  --bg-card: #141414;
  --bg-card-hover: #1C1C1C;
  --bg-elevated: #1E1E1E;

  /* ── Accent: Champagne Gold ── */
  --gold: #C9A96E;
  --gold-light: #D4BA8A;
  --gold-dark: #A8894F;
  --gold-muted: rgba(201, 169, 110, 0.15);
  --gold-glow: rgba(201, 169, 110, 0.12);

  /* ── Accent: Deep Emerald ── */
  --emerald: #2D8B5E;
  --emerald-light: #3AAF76;

  /* ── Text ── */
  --text-primary: #F5F0E8;
  --text-secondary: #B8AFA0;     /* Improved contrast: was #A09888 */
  --text-tertiary: #8A8078;      /* Improved contrast: was #6B6058 */
  --text-inverse: #0A0A0A;
  --text-muted: #7A7268;         /* For decorative/non-essential text - improved WCAG AA contrast */

  /* ── Semantic ── */
  --success: #2D8B5E;
  --warning: #D4A843;
  --error: #C44B4B;
  --info: #4A8EC4;

  /* ── Rating Tiers ── */
  --rating-exceptional: #C9A96E;   /* 9.0+ */
  --rating-excellent: #3AAF76;     /* 8.0–8.9 */
  --rating-good: #4A8EC4;          /* 7.0–7.9 */
  --rating-average: #D4A843;       /* 6.0–6.9 */
  --rating-below: #C44B4B;         /* Below 6.0 */

  /* ── Borders ── */
  --border-subtle: rgba(201, 169, 110, 0.08);
  --border-default: rgba(201, 169, 110, 0.15);
  --border-strong: rgba(201, 169, 110, 0.30);

  /* ── Glass / Overlays ── */
  --glass-bg: rgba(20, 20, 20, 0.85);
  --glass-border: rgba(201, 169, 110, 0.12);
  --overlay-dark: rgba(0, 0, 0, 0.60);

  /* ── Typography ── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  --font-accent: 'Barlow Condensed', 'Arial Narrow', sans-serif;

  /* ── Font Sizes ── */
  --text-hero: clamp(3rem, 6vw, 5rem);
  --text-h1: clamp(2rem, 4vw, 3.25rem);
  --text-h2: clamp(1.6rem, 3vw, 2.25rem);
  --text-h3: clamp(1.2rem, 2vw, 1.6rem);
  --text-h4: clamp(1.05rem, 1.5vw, 1.25rem);
  --text-body: 1.0625rem;          /* 17px */
  --text-body-sm: 0.9375rem;       /* 15px */
  --text-caption: 0.8125rem;       /* 13px */
  --text-overline: 0.75rem;        /* 12px */

  /* ── Line Heights ── */
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.65;
  --leading-relaxed: 1.8;

  /* ── Letter Spacing ── */
  --tracking-tight: -0.02em;
  --tracking-wide: 0.05em;
  --tracking-widest: 0.12em;

  /* ── Layout ── */
  --max-width-site: 1440px;
  --max-width-content: 1200px;
  --max-width-article: 780px;
  --max-width-narrow: 640px;
  --max-width-prose: 65ch;

  --section-padding-y: clamp(4rem, 8vw, 7rem);
  --section-padding-x: clamp(1rem, 4vw, 2rem);

  --card-padding: clamp(1.25rem, 2vw, 2rem);
  --card-radius: 16px;
  --card-radius-sm: 10px;
  --card-radius-lg: 24px;

  --gap-xs: 0.5rem;
  --gap-sm: 0.75rem;
  --gap: 1.5rem;
  --gap-lg: 2rem;
  --gap-xl: 3rem;

  /* ── Aspect Ratios ── */
  --aspect-slot-card: 4/3;
  --aspect-casino-logo: 120/70;

  /* ── Transitions ── */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;   /* Slightly faster for snappier feel */
  --transition-slow: 0.4s ease;
  --transition-bounce: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);  /* Playful bounce */

  /* ── Shadows ── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.25);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.3);
  --shadow-gold: 0 0 30px var(--gold-glow);

  /* ── Z-Index Scale ── */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}