/* Design tokens — from the approved mockup mockups/otoquebec.com/b-triptyque.html (S3, 2026-11-09).
 * Palette fixed by the brief (TZ §3.2): bg #F7F9FC, surface #FFF, accent #E53935, secondary #174EA6,
 * additional #F5B841, text #17212F, muted #667085, borders #E1E5EC, buttons #D62828.
 * Values move as they are; additions are marked «added».
 */
:root {
  /* ── Surfaces & colour roles (mockup) ── */
  --surface-0: #F7F9FC;
  --surface-1: #FFFFFF;
  --surface-2: #EEF2F8;
  --surface-3: #E3E9F2;
  --color-brand: #E53935;
  --color-cta: #D62828;
  --color-cta-hover: #B91F1F;
  --color-trust: #174EA6;
  --color-gold: #F5B841;
  --brand-50: #FDECEC;
  --trust-50: #E8EFFB;
  --gold-50: #FEF5E1;
  --gold-ink: #7A5300;
  --ink: #17212F;
  --ink-2: #5B6779;          /* TZ #667085 darkened: 4.43:1 on surface-2 failed AA; now ≥5:1 on every surface */
  --line: #E1E5EC;
  --line-strong: #C3CBD8;
  --on-dark: #FFFFFF;
  --up: #12805C;
  --up-50: #E3F5EE;
  --down: #C62828;

  /* added: states */
  --color-error: #B42318;
  --color-error-50: #FEECEB;
  --color-success: #12805C;
  --color-success-50: #E3F5EE;
  --trust-hover: color-mix(in srgb, var(--color-trust) 86%, black);
  --focus: var(--color-trust);

  /* ── Type (mockup) ── */
  --font-h: "Montserrat", system-ui, sans-serif;
  --font-b: "Inter", system-ui, sans-serif;
  --fs-display: clamp(40px, 7.4vw, 96px);
  --fs-h1: clamp(36px, 5vw, 64px);       /* added: inner pages */
  --fs-h2: clamp(32px, 3.8vw, 52px);
  --fs-h3: clamp(20px, 1.8vw, 24px);
  --fs-lead: clamp(17px, 1.35vw, 19px);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-micro: 12px;
  --lh-tight: 1.05;
  --lh-base: 1.6;

  /* ── Shape & depth (mockup) ── */
  --r-1: 8px;
  --r-2: 14px;
  --r-3: 22px;
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(23,33,47,.06), 0 1px 1px rgba(23,33,47,.04);
  --sh-2: 0 1px 2px rgba(23,33,47,.05), 0 6px 16px rgba(23,33,47,.07), 0 18px 40px rgba(23,33,47,.05);
  --sh-3: 0 2px 4px rgba(23,33,47,.06), 0 12px 28px rgba(23,33,47,.10), 0 32px 72px rgba(23,33,47,.10);

  /* ── Space (added: 8px scale used by the mockup's paddings) ── */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --sec-y: clamp(96px, 10vw, 140px);

  /* ── Layout (mockup) ── */
  --wrap: 1280px;
  --gut: clamp(16px, 4vw, 40px);
  --cut: clamp(28px, 10.5vw, 150px);     /* signature diagonal ≈ 6° over full width */
  --header-h: 72px;

  /* ── Motion (mockup) ── */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.45, .64, 1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 450ms;

  /* ── Layers (added) ── */
  --z-header: 50;
  --z-tabbar: 60;
  --z-cookie: 70;
  --z-menu: 100;
  --z-gate: 200;
}

/* Breakpoints (constants, kit.config.json → breakpoints):
   --bp-mobile 390 · 760 (mobile layout) · 900 (one column) · 1100 · 1200 (header quick nav) · 1440 desktop */