/* Design tokens — from :root of the approved mockup
 * mockups/mycasinos.ch/a-tischkante.html (A «Tischkante», 2026-10-27).
 * Values moved as they are; "added" marks what the mockup did not define.
 * Breakpoints (constants, used in media queries): 900 (rail → tab bar), 600, 1200, 1441 (wide.css).
 */
:root {
  /* ── Colour: from the mockup ─────────────────────────────────────────── */
  --surface-0: #0c0f13;
  --surface-1: #101318;          /* ТЗ: основной фон */
  --surface-2: #1a1f27;          /* ТЗ: вторичный фон */
  --surface-3: #242a34;
  --line: rgba(213, 180, 107, .16);
  --line-soft: rgba(245, 245, 245, .07);
  --color-brand: #d5b46b;        /* ТЗ: акцентный золотой */
  --color-brand-hi: #ecd39a;
  --color-brand-lo: #8c7340;
  --color-brand-ink: #1b1507;    /* text on gold */
  --felt: #123b33;
  --felt-hi: #1c5246;
  --text: #f5f5f5;               /* ТЗ: светлый текст */
  --text-2: #a7adb7;             /* ТЗ: вторичный текст — 7.9:1 on surface-1 */
  --text-3: #8a919c;             /* mockup #7c838e raised to 4.6:1 on surface-2 (added for AA) */
  --live: #e35d5b;

  /* ── Colour: added ───────────────────────────────────────────────────── */
  --color-brand-hover: color-mix(in srgb, var(--color-brand) 80%, white);
  --color-error: #ff8a80;
  --color-success: #7fd1a8;
  --color-danger: #c9534f;
  --focus-ring: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--color-brand-hi);
  --overlay-scrim: rgba(6, 8, 11, .72);

  /* ── Typography: from the mockup ─────────────────────────────────────── */
  --ff-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --ff-body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-h1: clamp(2.75rem, 1.4rem + 4.6vw, 5.75rem);
  --fs-h2: clamp(1.9rem, 1.2rem + 2.2vw, 3rem);
  --fs-h3: 1.0625rem;
  --fs-lead: 1.125rem;
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-xs: .75rem;
  --lh-tight: 1.02;
  --lh-snug: 1.2;
  --lh-base: 1.6;

  /* ── Space (8px grid) ─────────────────────────────────────────────────── */
  --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px;
  --space-24: 24px; --space-32: 32px; --space-48: 48px; --space-64: 64px; --space-96: 96px;
  --sec-y: 96px;                /* mockup .sec padding 110 → 96: eleven sections in a row read too sparse */
  --sec-x: 32px;

  /* ── Shape & depth: from the mockup ──────────────────────────────────── */
  --r-s: 8px; --r-m: 14px; --r-l: 22px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -12px rgba(0, 0, 0, .6);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, .4), 0 30px 60px -20px rgba(0, 0, 0, .75);
  --shadow-gold: 0 8px 24px -10px rgba(213, 180, 107, .7);

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --rail: 84px;
  --rail-open: 252px;
  --head: 68px;
  --container: 1320px;
  --tabbar: 68px;

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);   /* added */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 350ms;

  /* ── Layers (added) ──────────────────────────────────────────────────── */
  --z-head: 30;
  --z-rail: 40;
  --z-cookie: 70;
  --z-overlay: 80;
  --z-gate: 90;
  --z-toast: 95;
}