/* Design tokens — mycasino.
 * Source: mockups/rnycasino.ch/b-fasnacht.html (approved 2026-10-27), values moved as they are.
 * Names say the role. "added" marks what the mockup did not define.
 */
:root {
  /* ── Colour: from the mockup ─────────────────────────────────────────── */
  --color-bg: #F4EFE6;            /* paper */
  --surface-0: #F4EFE6;
  --surface-1: #FBF8F2;
  --surface-2: #FFFFFF;
  --surface-3: #EAE3D6;
  --color-text: #16161D;          /* ink */
  --color-muted: #5E5B57;         /* 5.9:1 on paper */
  --color-border: rgb(22 22 29 / .12);
  --color-brand: #E8452C;         /* vermilion — shapes, bands, accents */
  --color-cobalt: #2747D6;        /* highlight slab, RG tile, links */
  --color-sun: #F5C142;           /* triangle, active dock item, badges */
  --color-mint: #1F9E7A;          /* live / status dot */

  /* ── Colour: added ───────────────────────────────────────────────────── */
  --color-brand-strong: #C4341D;  /* white text on red: 4.9:1 (the mockup's #E8452C gives 3.6:1) */
  --color-brand-shadow: #9E2715;  /* the pressed "ledge" under red buttons, from the mockup */
  --color-brand-hover: color-mix(in srgb, var(--color-brand-strong) 88%, black);
  --color-cobalt-hover: color-mix(in srgb, var(--color-cobalt) 85%, black);
  --color-ink-soft: rgb(244 239 230 / .7);    /* text on the ink dock */
  --color-error: #B3261E;
  --color-success: #17734F;
  --color-warning-bg: #FFF4D6;
  --focus-ring: 0 0 0 3px var(--color-bg), 0 0 0 6px var(--color-cobalt);

  /* ── Typography: from the mockup ─────────────────────────────────────── */
  --font-display: "Unbounded", system-ui, sans-serif;
  --font-body: "Inter Tight", system-ui, sans-serif;
  --fs-display: clamp(2.7rem, 1rem + 6.4vw, 7.2rem);   /* hero H1 */
  --fs-h1: clamp(2.2rem, 1rem + 3.6vw, 4.2rem);        /* inner pages (added: the mockup had only the hero) */
  --fs-h2: clamp(1.7rem, 1rem + 2.4vw, 3rem);
  --fs-h3: clamp(1.15rem, 1rem + .5vw, 1.4rem);
  --fs-lead: 1.18rem;
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-tiny: .78rem;
  --lh-tight: .95;
  --lh-snug: 1.2;
  --lh-base: 1.6;
  --tracking-display: -.05em;
  --tracking-h2: -.045em;

  /* ── Space ───────────────────────────────────────────────────────────── */
  --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;
  --space-120: 120px;
  --section-pad: clamp(72px, 4rem + 4vw, 120px);

  /* ── Shape & depth: from the mockup ──────────────────────────────────── */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --cut: 46px;                     /* signature: cut corner of tiles */
  --shadow-card: 0 1px 2px rgb(22 22 29 / .08), 0 18px 40px -18px rgb(22 22 29 / .35);
  --shadow-dock: 0 20px 50px -18px rgb(22 22 29 / .6);

  /* ── Container ───────────────────────────────────────────────────────── */
  --container: 1300px;
  --container-pad: 16px;

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-in: cubic-bezier(.5, 0, .8, .3);

  /* ── Layers ──────────────────────────────────────────────────────────── */
  --z-header: 100;
  --z-dock: 400;
  --z-toast: 800;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-gate: 1100;
}

/* Breakpoints (media queries cannot read custom properties):
   --bp-xs: 389px   --bp-mobile: 700px   --bp-tablet: 1040px   --bp-desktop: 1440px */