/* Design tokens — ArdRock Casino.
 * Source: mockups/ardrockcasino.nl/a-affiche.html (A · Affiche, Neo-Retro), approved 2026-10-05.
 * Mockup values moved as they are; everything marked "added" is not in the mockup.
 */
:root {
  /* ── Colour: from the mockup ─────────────────────────────────────────── */
  --color-bg: #EFE6D4;          /* paper */
  --color-bg-2: #E6DAC2;        /* paper, darker: hover rows, chips, image wells */
  --color-surface: #FBF6EC;     /* card / ticket */
  --color-ink: #1A1714;         /* text, rules, hard shadows, util bar */
  --color-text: #1A1714;
  --color-text-2: #4A433B;      /* secondary text — 8.6:1 on paper */
  --color-muted: #6B6156;       /* was #7A7064 in mockup: 4.1:1 on paper → darkened to 5.0:1 (added) */
  --color-line: #CDBFA6;        /* hairline separators */
  --color-brand: #D7362B;       /* signal red: primary CTA, accent word */
  --color-brand-ink: #B02A20;   /* red as text on paper — 5.2:1 */
  --color-teal: #1F5F5B;        /* trust: licence, live status, focus */
  --color-mustard: #DDA233;     /* tickets: «Populair» tag, stars — sparingly */
  --color-on-ink: #EFE6D4;      /* paper-coloured text on ink */
  --color-on-ink-2: #D9CFBC;

  /* ── Colour: added ───────────────────────────────────────────────────── */
  --color-brand-hover: color-mix(in srgb, var(--color-brand) 88%, black);
  --color-brand-active: color-mix(in srgb, var(--color-brand) 76%, black);
  --color-error: #B3261E;
  --color-error-bg: #F6DCD6;
  --color-success: #1F5F5B;     /* teal doubles as success */
  --color-success-bg: #D6E6DF;
  --color-warn: #8A5A00;
  --color-warn-bg: #F4E3B8;
  --focus-ring: 0 0 0 3px var(--color-teal);

  /* ── Typography: from the mockup ─────────────────────────────────────── */
  --font-display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-mast: clamp(64px, 12.5vw, 196px);
  --fs-h1: clamp(52px, 8.6vw, 138px);
  --fs-h1-page: clamp(44px, 6.4vw, 96px);   /* added: inner pages — a lobby H1 on every page drowns the content */
  --fs-h2: clamp(34px, 4.6vw, 64px);
  --fs-h3: clamp(22px, 2.2vw, 30px);
  --fs-bill-1: clamp(28px, 4.4vw, 64px);
  --fs-bill-2: clamp(20px, 2.7vw, 38px);
  --fs-lead: 19px;
  --fs-body: 17px;
  --fs-small: 14px;
  --fs-label: 13px;             /* uppercase labels, tracked */
  --fs-micro: 12px;
  --lh-tight: .9;
  --lh-head: 1.05;
  --lh-base: 1.55;
  --track-label: .1em;

  /* ── 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-section: clamp(48px, 6vw, 88px);

  /* ── Shape & depth: from the mockup ──────────────────────────────────── */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-pill: 999px;
  --border: 2px solid var(--color-ink);
  --border-thin: 1.5px solid var(--color-ink);
  --shadow-hard: 4px 4px 0 var(--color-ink);
  --shadow-hard-lg: 6px 6px 0 var(--color-ink);
  --shadow-hard-xl: 8px 8px 0 var(--color-ink);
  --shadow-teal: 8px 8px 0 var(--color-teal);

  /* ── Container: from the mockup (.wrap) ──────────────────────────────── */
  --container: 1320px;
  --container-pad: clamp(16px, 3vw, 40px);

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --dur-fast: 160ms;
  --dur-base: 220ms;
  --dur-slow: 400ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-in: cubic-bezier(.5, 0, .8, .3);

  /* ── Layers (added) ──────────────────────────────────────────────────── */
  --z-header: 100;
  --z-sticky: 50;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-gate: 1100;
}

/* Breakpoints (constants, keep in step with kit.config.json):
   --bp-mobile: 390   --bp-sm: 720   --bp-md: 960   --bp-lg: 1200   --bp-desktop: 1440 */