/* Design tokens — from the approved mockup
 *   <kit>/mockups/iotoquebec.com/b2-constructivist-grille.html  (B2 «Grille 49», approved 2026-10-07)
 * Values are the mockup's own; anything marked "added" is not in the mockup but the site needs it.
 * Duplicates merged: mockup --surface-0 and page background are one token (--color-bg).
 */
:root {
  /* ── Colour: surfaces (mockup) ───────────────────────────────────────── */
  --color-bg: oklch(97.5% .006 265);            /* --surface-0 */
  --color-surface: oklch(100% 0 0);             /* --surface-1: cards, slip, header glass base */
  --color-surface-2: oklch(95% .01 265);        /* cells, segmented track */
  --color-surface-3: oklch(91% .014 265);       /* cell hover */
  --color-ink-bg: oklch(17% .02 265);           /* dark band */

  /* ── Colour: text (mockup) ───────────────────────────────────────────── */
  --color-text: oklch(19% .02 265);
  --color-text-2: oklch(38% .02 265);
  --color-muted: oklch(50% .018 265);           /* mockup 55% → 50%: 4.5:1 on --color-bg (added, a11y) */
  --color-on-ink: oklch(96% .01 265);
  --color-on-ink-muted: oklch(78% .015 265);
  --color-border: oklch(19% .02 265 / .08);
  --color-border-strong: oklch(19% .02 265 / .14);

  /* ── Colour: roles (mockup) ──────────────────────────────────────────── */
  --color-brand: oklch(50% .21 268);            /* cobalt — structure, selection, loteries */
  --color-brand-2: oklch(42% .19 270);
  --color-brand-light: oklch(56% .21 268);
  --color-brand-soft: color-mix(in oklch, var(--color-brand) 10%, transparent);
  --color-sun: oklch(86% .16 88);               /* jaune — highlight word, circle family */
  --color-signal: oklch(55% .19 35);            /* closing time, triangle family; mockup 63% → 55% for text contrast (added) */
  --color-signal-shape: oklch(63% .19 35);      /* the mockup's value, for shapes only */
  --color-calm: oklch(48% .1 170);              /* limits / RG; mockup 56% → 48% for text contrast (added) */
  --color-calm-shape: oklch(56% .1 170);
  --color-calm-soft: color-mix(in oklch, var(--color-calm) 12%, transparent);

  /* ── Colour: states (added) ──────────────────────────────────────────── */
  --color-brand-hover: color-mix(in oklch, var(--color-brand) 88%, black);
  --color-brand-active: color-mix(in oklch, var(--color-brand) 76%, black);
  --color-error: oklch(52% .19 27);
  --color-error-soft: color-mix(in oklch, var(--color-error) 10%, transparent);
  --color-success: var(--color-calm);
  --focus-ring: 0 0 0 3px color-mix(in oklch, var(--color-brand) 40%, transparent);

  /* ── Gradients (mockup) ──────────────────────────────────────────────── */
  --grad-brand: linear-gradient(180deg, var(--color-brand-light), var(--color-brand-2));
  --grad-hero: radial-gradient(40rem 30rem at 78% 40%, oklch(62% .2 268), transparent 70%), linear-gradient(135deg, oklch(52% .21 268), oklch(38% .17 272));

  /* ── Typography (mockup) ─────────────────────────────────────────────── */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  --stretch-display: 115%;
  --fs-h1: clamp(2.6rem, 5.6vw, 5rem);
  --fs-h2: clamp(2rem, 3.6vw, 3.2rem);
  --fs-h3: 1.6rem;
  --fs-h4: 1.15rem;
  --fs-lead: 1.18rem;
  --fs-body: 1.0625rem;
  --fs-small: .875rem;
  --fs-xs: .78rem;
  --fs-label: .75rem;
  --lh-tight: .95;
  --lh-snug: 1.2;
  --lh-base: 1.6;
  --track-display: -.045em;

  /* ── Space (8px grid; mockup values) ─────────────────────────────────── */
  --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;
  --section-y: clamp(64px, 9vw, 128px);
  --cut: clamp(36px, 5vw, 80px);                /* diagonal cut of bands — signature */

  /* ── Shape and depth (mockup) ────────────────────────────────────────── */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px oklch(19% .03 265 / .06);
  --shadow-2: 0 1px 2px oklch(19% .03 265 / .05), 0 14px 34px -14px oklch(19% .03 265 / .2);
  --shadow-3: 0 2px 6px oklch(19% .03 265 / .06), 0 40px 80px -24px oklch(25% .12 268 / .35);
  --shadow-brand: inset 0 1px 0 oklch(100% 0 0 / .25), 0 8px 20px -8px oklch(45% .2 268 / .6);

  /* ── Container (mockup) ──────────────────────────────────────────────── */
  --container: 1280px;
  --container-pad: clamp(16px, 3vw, 40px);
  --header-h: 64px;

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

  /* ── Layers (added) ──────────────────────────────────────────────────── */
  --z-header: 100;
  --z-tabbar: 110;
  --z-overlay: 900;
  --z-modal: 1000;
}

/* Breakpoints (constants; media queries cannot read custom properties).
   Mockup: 1100 (hero stacks), 860 (header collapses), 560 (phone).  Reference widths 1440 / 390. */