/* Design tokens — the numbers of the approved mockup, named by role.
 *
 * Source: <kit>/mockups/deltacasino.co/a-daub-board.html (approved 2026-10-29, round 1).
 * Palette is fixed by the brief (TZ §1.2): #101B2B / #19283D / #00B8D9 / #FFB547 / #FFF / #B7C4D5.
 * Merged from the mockup: --color-bg-2 and --surface-1 were near-twins → --color-bg-2 kept as the TZ name,
 * --surface-1..3 kept as the depth scale.
 */
:root {
  /* ── Colour: from the mockup ─────────────────────────────────────────── */
  --color-bg: #101B2B;
  --color-bg-2: #19283D;
  --surface-0: #0C1522;
  --surface-1: #142236;
  --surface-2: #1B2C44;
  --surface-3: #233752;
  --color-brand: #00B8D9;
  --color-gold: #FFB547;
  --color-text: #FFFFFF;
  --color-muted: #B7C4D5;
  --color-on-brand: #04202A;
  --color-on-gold: #2B1A00;
  --line: color-mix(in oklab, #B7C4D5 14%, transparent);
  --line-2: color-mix(in oklab, #B7C4D5 24%, transparent);
  --brand-tint: color-mix(in oklab, var(--color-brand) 16%, transparent);
  --gold-tint: color-mix(in oklab, var(--color-gold) 16%, transparent);
  --color-live: #3DDC97;

  /* ── Colour: added by us (not in the mockup) ─────────────────────────── */
  --color-brand-hover: color-mix(in oklab, var(--color-brand) 86%, white);
  --color-brand-active: color-mix(in oklab, var(--color-brand) 82%, black);
  --color-error: #FF7A7A;          /* 6.1:1 on --surface-1 */
  --color-success: #3DDC97;
  --color-scrim: rgb(6 12 20 / .72);
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--color-brand) 55%, transparent);

  /* ── Typography: from the mockup ─────────────────────────────────────── */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --fs-h1: clamp(2.3rem, 1.4rem + 3.4vw, 4.4rem);
  --fs-h2: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  --fs-h3: 1.15rem;
  --fs-lead: 1.08rem;
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-xs: .78rem;
  --lh-tight: 1.04;
  --lh-base: 1.55;
  --track-display: -.025em;

  /* ── Space, shape, depth ─────────────────────────────────────────────── */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-72: 72px;
  --section-gap: clamp(40px, 6vw, 72px);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 26px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgb(0 0 0 / .35), 0 10px 30px -14px rgb(0 0 0 / .6);
  --shadow-2: 0 1px 2px rgb(0 0 0 / .4), 0 24px 48px -20px rgb(0 0 0 / .75);
  --shadow-card: var(--shadow-1);

  /* ── Container: from the mockup ──────────────────────────────────────── */
  --rail: 248px;
  --container: 1440px;
  --container-pad: clamp(16px, 3vw, 36px);

  /* ── Motion: from the mockup + added ─────────────────────────────────── */
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.5, 0, .8, .3);

  /* ── Layers ──────────────────────────────────────────────────────────── */
  --z-header: 30;
  --z-rail: 40;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-toast: 1100;
}

/* Breakpoints (media queries cannot read custom properties):
   --bp-mobile: 640px   --bp-tablet: 900px (rail → drawer)   --bp-laptop: 1200px   --bp-desktop: 1440px */