/* ==========================================================================
   RealMoneyCasinoRank — Design Tokens
   Single source of truth for all visual variables
   ========================================================================== */

:root {
  /* ── Surfaces ── */
  --bg-base:       #0b0f16;
  --bg-surface:    #121822;
  --bg-card:       #19202e;
  --bg-card-hover: #1e2738;
  --bg-elevated:   #222d40;
  --bg-overlay:    rgba(11,15,22,0.85);

  /* ── Brand Accents ── */
  --gold:          #e0a84b;
  --accent-gold:   #e0a84b;   /* alias — matches copilot-instructions token */
  --gold-light:    #efc06e;
  --gold-dim:      rgba(224,168,75,0.18);
  --gold-border:   rgba(224,168,75,0.28);
  --gold-subtle:   rgba(224,168,75,0.07);

  --blue:          #5b9cf6;
  --blue-dim:      rgba(91,156,246,0.15);
  --green:         #3fb950;
  --green-dim:     rgba(63,185,80,0.15);
  --red:           #f85149;
  --red-dim:       rgba(248,81,73,0.12);
  --amber:         #d29922;

  /* ── Text ── */
  --text-primary:  #edf0f4;
  --text-secondary:#a8b3c2;
  --text-muted:    #6b7a8f;
  --text-faint:    #3d4d60;

  /* ── Borders ── */
  --border:        rgba(255,255,255,0.07);
  --border-md:     rgba(255,255,255,0.11);
  --border-strong: rgba(255,255,255,0.18);

  /* ── Typography ── */
  --font-sans:     'Inter', system-ui, -apple-system, sans-serif;
  --font-serif:    'DM Serif Display', Georgia, serif;

  --fs-xs:   0.75rem;     /* 12px — WCAG minimum */
  --fs-sm:   0.8125rem;   /* 13px */
  --fs-base: 1rem;        /* 16px */
  --fs-md:   1.0625rem;   /* 17px */
  --fs-lg:   1.1875rem;   /* 19px */
  --fs-xl:   1.375rem;    /* 22px */
  --fs-2xl:  1.75rem;     /* 28px */
  --fs-3xl:  2.25rem;     /* 36px */
  --fs-4xl:  3rem;        /* 48px */

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

  --lh-tight:  1.2;
  --lh-snug:   1.4;
  --lh-normal: 1.6;
  --lh-loose:  1.75;

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

  /* ── Layout ── */
  --max-w-content: 760px;
  --max-w-wide:    1120px;
  --max-w-full:    1320px;

  /* ── Radius ── */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  24px;
  --r-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.6);
  --shadow-gold: 0 0 0 1px var(--gold-border), 0 4px 20px rgba(224,168,75,0.12);

  /* ── Transitions ── */
  --t-fast:   150ms ease;
  --t-normal: 250ms ease;
  --t-slow:   400ms ease;

  /* ── Z-index ── */
  --z-base:   1;
  --z-above:  10;
  --z-header: 100;
  --z-modal:  200;
  --z-toast:  300;

  /* ── Rating colours ── */
  --rating-5: #3fb950;
  --rating-4: #58a6ff;
  --rating-3: #d29922;
  --rating-2: #f85149;
}