/* Design tokens — from the approved mockup a-marquee.html (library mockups/tardustcasino.com), 2026-11-06.
 * Values are the mockup's own; additions are marked "added". Palette and fonts are fixed by the ТЗ §18. */
:root {
  /* colour — mockup */
  --color-bg: #10101B;           /* ТЗ main background */
  --color-surface-1: #1D1B2E;    /* ТЗ secondary background */
  --color-surface-2: #242238;
  --color-surface-3: #2D2A44;
  --color-ink: #0B0B14;          /* deepest layer, text on gold */
  --color-brand: #D4AF37;        /* ТЗ primary accent / buttons */
  --color-brand-hi: #F3D77A;
  --color-accent: #8B5CF6;       /* ТЗ secondary accent — accents only */
  --color-live: #F05D6C;
  --color-text: #FFFFFF;
  --color-muted: #C5C3D4;
  --color-dim: #9A97AE;          /* added: tertiary text on dark (≥4.5:1 on --color-bg) */
  --color-border: #39364D;
  --bulb-on: #FFE7A1;
  --bulb-glow: 0 0 6px 1px rgba(255,214,110,.85), 0 0 14px 2px rgba(212,175,55,.45);

  /* states — added */
  --color-success: #4ADE80;
  --color-error: #FF8A95;
  --color-warning: #F5C451;
  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-brand);

  /* type — mockup */
  --font-head: 'Montserrat', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --fs-h1: clamp(2.1rem, 1.2rem + 3.6vw, 4.1rem);
  --fs-h2: clamp(1.6rem, 1.15rem + 1.6vw, 2.4rem);
  --fs-h3: clamp(1.15rem, 1rem + .5vw, 1.4rem);     /* added */
  --fs-lead: clamp(1rem, .94rem + .3vw, 1.18rem);
  --fs-body: 16px;
  --fs-small: 14px;
  --lh-tight: 1.08;
  --lh-base: 1.6;

  /* space — added scale (8px grid) */
  --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-24: 24px;
  --space-32: 32px; --space-48: 48px; --space-64: 64px; --space-96: 96px;
  --sec-pad: clamp(56px, 7vw, 96px);

  /* radius — mockup */
  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px;

  /* shadow — mockup */
  --shadow-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 2px 6px rgba(0,0,0,.25);
  --shadow-2: 0 1px 0 rgba(255,255,255,.05) inset, 0 10px 24px -8px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.3);
  --shadow-3: 0 30px 60px -20px rgba(0,0,0,.7), 0 12px 24px -12px rgba(0,0,0,.5);

  /* motion — mockup */
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease: var(--ease-out);
  --dur-fast: .2s; --dur-base: .3s; --dur-slow: .6s;

  /* layout — mockup */
  --wrap: 1320px;
  --gutter: clamp(16px, 3vw, 32px);

  /* layers — added */
  --z-sticky: 50; --z-menu: 90; --z-modal: 100; --z-gate: 120; --z-banner: 110;
  /* breakpoints (reference): 1180 · 1024 · 640 · 389 */
}