/* Design tokens — moved as-is from the approved mockup
 * (__SITE_KIT/mockups/zumospin.co/b-two-doors.html, :root). Palette is fixed by
 * the brief (§1 Дизайн). Below the mockup block: what the mockup did not define
 * (states, errors, layers, motion) and aliases the kit core reads.
 */
@property --split { syntax: '<percentage>'; inherits: true; initial-value: 50%; }

:root {
  /* ── palette — fixed by the brief ─────────────────────────────────────── */
  --bg: #10131C; --surface: #1D2230; --brand: #8B5CF6; --accent: #F5B942; --text: #FFFFFF; --text-2: #AEB7C7;

  /* ── roles (mockup) ───────────────────────────────────────────────────── */
  --color-casino: var(--brand);
  --color-sports: var(--accent);
  --casino-ink: color-mix(in oklab, var(--brand), #000 16%);
  --casino-soft: color-mix(in oklab, var(--brand) 18%, transparent);
  --casino-line: color-mix(in oklab, var(--brand) 45%, transparent);
  --casino-text: color-mix(in oklab, var(--brand), #fff 45%);
  --sports-soft: color-mix(in oklab, var(--accent) 16%, transparent);
  --sports-line: color-mix(in oklab, var(--accent) 45%, transparent);
  --on-sports: #10131C;
  --surface-0: var(--bg);
  --surface-1: color-mix(in oklab, var(--bg) 62%, var(--surface));
  --surface-2: var(--surface);
  --surface-3: color-mix(in oklab, var(--surface), #fff 6%);
  --hair: color-mix(in oklab, #fff 8%, transparent);
  --hair-2: color-mix(in oklab, #fff 14%, transparent);
  --text-3: color-mix(in oklab, var(--text-2) 80%, var(--bg));   /* mockup 72% → 80%: 4.5:1 on --surface-2 */
  --shadow-1: 0 1px 2px rgb(5 6 12 / .4), 0 8px 24px -12px rgb(5 6 12 / .6);
  --shadow-2: 0 1px 2px rgb(5 6 12 / .5), 0 24px 48px -20px rgb(5 6 12 / .8);

  /* ── radius scale ─────────────────────────────────────────────────────── */
  --radius-1: 8px; --radius-2: 14px; --radius-3: 22px; --radius-pill: 999px;

  /* ── type ─────────────────────────────────────────────────────────────── */
  --font-display: 'Bricolage Grotesque', 'Manrope', sans-serif;
  --font-text: 'Manrope', sans-serif;
  --fs-h1: clamp(2.1rem, 1.2rem + 2.6vw, 3.75rem);
  --fs-h2: clamp(1.9rem, 1.2rem + 2.2vw, 3.25rem);
  --fs-h3: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  --fs-door: clamp(3.4rem, 1.6rem + 5.2vw, 7rem);
  --fs-body: 1rem; --fs-sm: .875rem; --fs-xs: .75rem;

  /* ── geometry: the 12° signature ──────────────────────────────────────── */
  --angle: 12deg;
  --tan: 0.2126;
  --cut: calc(100vw * var(--tan));
  --cut-sm: calc(min(100vw, 1440px) * .07);   /* added: shallow cut for inner pages, same 12° feel */
  --header-h: 64px;
  --container: 1320px;
  --gutter: clamp(16px, 4vw, 60px);
  --ease: cubic-bezier(.2,.8,.2,1);
  --spring: cubic-bezier(.34,1.4,.5,1);

  /* ── added by us (not in the mockup) ──────────────────────────────────── */
  --color-error: #FF8A80;
  --color-success: #7EE2A8;
  --dur-fast: 150ms; --dur-base: 220ms; --dur-slow: 300ms;
  --z-header: 50; --z-tabbar: 60; --z-overlay: 80; --z-modal: 100;

  /* aliases read by the kit core (base.css, forms) */
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--text-2);
  --color-brand: var(--brand);
  --color-border: var(--hair-2);
  --font-body: var(--font-text);
  --lh-base: 1.55;
}

/* Breakpoints (mockup): 1180 — header search collapses, widgets drop; 900 — mobile app
   (burger, tab bar, stacked doors); 420 — small phones. kit.config.json → breakpoints. */