/* ============================================================
   AussiePokies96 — Design Tokens
   Single source of truth. Never hardcode values outside this file.
   Aesthetic: Modern sportsbook · Red on black · Dense · Editorial
   ============================================================ */

:root {
  /* ---------- COLOR ---------- */
  --bg:           #ffffff;
  --ink:          #0a0a0a;   /* true black — authority */
  --ink-2:        #1a1a1a;   /* secondary surfaces */
  --ink-3:        #2a2a2a;   /* borders on dark */
  --muted:        #6b6b6b;   /* meta text */
  --muted-2:      #aaaaaa;   /* meta text on dark */
  --line:         #e5e5e5;   /* hairlines on light */
  --surface-alt:  #fafafa;   /* subtle fill */

  --accent:       #ff2d2d;   /* primary CTA, energy */
  --accent-ink:   #ffffff;
  --accent-soft:  #fff5f5;   /* tinted bg */
  --accent-line:  #ffd6d6;   /* tinted border */

  --gold:         #ffc629;   /* highlight, editor's pick */
  --ok:           #00a86b;   /* PayID confirmed, positive */
  --warn:         #ff9500;

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --f-xs:   clamp(.72rem, .70rem + .10vw, .78rem);
  --f-sm:   clamp(.85rem, .82rem + .15vw, .92rem);
  --f-base: clamp(.95rem, .92rem + .20vw, 1.02rem);
  --f-lg:   clamp(1.10rem, 1.00rem + .40vw, 1.25rem);
  --f-xl:   clamp(1.40rem, 1.20rem + .80vw, 1.75rem);
  --f-2xl:  clamp(1.90rem, 1.50rem + 1.50vw, 2.50rem);
  --f-3xl:  clamp(2.60rem, 2.00rem + 2.50vw, 4.00rem);

  --lh-tight:  .95;
  --lh-snug:   1.15;
  --lh-normal: 1.5;
  --lh-loose:  1.65;

  --track-tight:  -.035em;
  --track-snug:   -.02em;
  --track-normal: 0;
  --track-wide:   .05em;
  --track-wider:  .10em;

  /* ---------- SPACING (8pt grid, dense) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  28px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-14: 56px;
  --s-16: 64px;

  /* Page rhythm (dense — ~30-40% tighter than default) */
  --section-y:  36px;
  --hero-top:   20px;
  --hero-bot:   24px;
  --row-pad:    14px;
  --card-pad:   16px;
  --gap-hero:   28px;

  /* ---------- RADIUS ---------- */
  --r-sm: 4px;
  --r:    6px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 99px;

  /* ---------- SHADOWS ---------- */
  --shadow-sm: 0 1px 0 rgba(0,0,0,.06);
  --shadow:    0 4px 20px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.12);
  --shadow-accent: 0 8px 24px rgba(255,45,45,.25);

  /* ---------- LAYOUT ---------- */
  --container:  1240px;
  --container-pad: 20px;

  /* ---------- Z-INDEX LAYERS ---------- */
  --z-sticky-cta: 100;
  --z-header:     50;
  --z-overlay:    200;
  --z-modal:      300;

  /* ---------- MOTION ---------- */
  --ease:     cubic-bezier(.2,.8,.2,1);
  --dur-fast: .15s;
  --dur:      .25s;
}

/* ---------- DARK MODE (system preference) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #0a0a0a;
    --ink:         #ffffff;
    --ink-2:       #f0f0f0;
    --muted:       #aaaaaa;
    --line:        #2a2a2a;
    --surface-alt: #1a1a1a;
    --accent-soft: #2a0a0a;
    --accent-line: #4a0a0a;
  }
}

/* ---------- ACCESSIBILITY ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Focus ring — accessible, branded */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}