/* Design tokens — from the approved mockup B2 «Tirage sombre»
 * (__SITE_KIT/mockups/1otoquebec.com/b2-kinetic-tirage-dark.html), 2026-10-08.
 * Values moved as they are; anything the mockup did not define is marked "added".
 */
:root {
  color-scheme: dark;

  /* ── Colour: brand (mockup) ─────────────────────────────────────────── */
  --color-base: #0C1C1D;               /* deep tinted ink-teal, never #000 */
  --color-ink: #0F2E2E;                /* dark ink: text on lime / coral fills only */
  --color-brand: #D4F25C;              /* lime: primary CTA, highlighter, key numbers */
  --color-accent-2: #FF8A65;           /* coral: live dot, complementary number */
  --color-brand-soft: color-mix(in oklch, var(--color-brand) 22%, transparent);
  --color-coral-soft: color-mix(in oklch, var(--color-accent-2) 22%, transparent);
  --color-ok: oklch(74% .13 160);
  --color-cat-casino: var(--color-ok);
  --color-cat-instant: var(--color-accent-2);
  --color-cat-bingo: oklch(72% .1 250);
  --color-cat-sports: oklch(78% .12 85);
  --color-cat-poker: oklch(72% .09 300);

  /* ── Surfaces (mockup) ──────────────────────────────────────────────── */
  --surface-0: var(--color-base);
  --surface-1: oklch(24.5% .026 198);
  --surface-2: oklch(28.5% .028 197);
  --surface-3: oklch(33.5% .03 196);
  --surface-deep: oklch(16.5% .02 200);
  --surface-deep-2: oklch(22% .024 199);

  /* ── Text (mockup) ──────────────────────────────────────────────────── */
  --text-1: oklch(96.5% .012 115);
  --text-2: oklch(82% .022 170);
  --text-muted: oklch(70% .022 180);   /* added +2% L: 4.5:1 on surface-2 */

  /* ── Lines (mockup) ─────────────────────────────────────────────────── */
  --line: oklch(96% .012 115 / .09);
  --line-strong: oklch(96% .012 115 / .17);

  --field-num: color-mix(in oklch, var(--text-1) 7.5%, var(--surface-0));
  --icon-duo: var(--color-brand);
  --icon-duo-o: .55;

  /* ── States (added) ─────────────────────────────────────────────────── */
  --color-brand-hover: oklch(93% .16 118);
  --color-error: oklch(72% .16 28);
  --color-error-soft: color-mix(in oklch, var(--color-error) 16%, transparent);
  --color-success: var(--color-ok);
  --focus-ring: 0 0 0 2px var(--surface-0), 0 0 0 4px var(--color-brand);
  --placeholder: oklch(96% .012 115 / .14);   /* "to be completed" fields */

  /* ── Typography (mockup) ────────────────────────────────────────────── */
  --font-display: "Unbounded", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-h1: clamp(2.1rem, 4.1vw, 3.6rem);
  --fs-h1-page: clamp(1.9rem, 3.4vw, 3rem);   /* added: inner pages */
  --fs-h2: clamp(1.75rem, 2.9vw, 2.6rem);
  --fs-h3: 1.08rem;
  --fs-body: 1.0625rem;
  --fs-small: .875rem;
  --fs-xs: .78rem;
  --fs-field: clamp(3.2rem, 7.4vw, 7rem);
  --lh-tight: 1.06;
  --lh-base: 1.6;

  /* ── Space (8px grid; mockup section rhythm) ────────────────────────── */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --section-pad: clamp(72px, 9vw, 136px);

  /* ── Shape (mockup) ─────────────────────────────────────────────────── */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: clamp(22px, 3vw, 40px);
  --r-pill: 999px;

  /* ── Depth (mockup, dark execution) ─────────────────────────────────── */
  --shadow-1: 0 1px 2px oklch(8% .02 200 / .5), inset 0 1px 0 oklch(96% .01 115 / .04);
  --shadow-2: 0 1px 2px oklch(8% .02 200 / .45), 0 14px 34px -14px oklch(6% .02 200 / .7), inset 0 1px 0 oklch(96% .01 115 / .05);
  --shadow-3: 0 2px 6px oklch(8% .02 200 / .5), 0 40px 80px -28px oklch(5% .02 200 / .85), inset 0 1px 0 oklch(96% .01 115 / .06);

  /* ── Container (mockup) ─────────────────────────────────────────────── */
  --wrap: 1280px;
  --gutter: clamp(16px, 3vw, 40px);
  --tier1: 36px;
  --tier2: 72px;

  /* ── Motion (mockup + added scale) ──────────────────────────────────── */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.5, .5, 1);
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 380ms;

  /* ── Layers (added) ─────────────────────────────────────────────────── */
  --z-header: 50;
  --z-scrim: 60;
  --z-drawer: 61;
  --z-skip: 99;
}

/* Breakpoints (constants, keep in step with kit.config.json → breakpoints):
   1180 — draw card hides · 1040 — header collapses to burger · 720 — mobile · 389 — below reference */