/* La Gapette — design tokens, compiled from tokens.json (v3).
   Load this BEFORE components.css. Theme: <html data-theme="jour"> (default) or data-theme="nuit".
   Rounded corners only on clickable elements. Text on orange is --on-orange, never white.
   The four *-fixe tokens do not invert in nuit: use them for blocks that stay dark (or white) in both themes. */

/* theme: jour */
:root, [data-theme="jour"] {
  --coton-50: #fbf8f1;
  --coton-100: #f4eee1;
  --coton-200: #ebe3d1;
  --coton-300: #cfc4ad;
  --peche-100: #fbecd6;
  --orange-300: #f9c98a;
  --orange-500: #f49511;
  --orange-600: #9e4d00;
  --jaune-400: #fac811;
  --on-orange: #14233c;
  --marine-900: #14233c;
  --marine-700: #3b4a66;
  --marine-500: #56617a;
  --damier-ink: var(--on-orange);
  --ok-600: #2c6a38;
  --alerte-600: #a4281c;
  --focus: #14233c;
  --coton-fixe: #f4eee1;
  --marine-fixe: #14233c;
  --orange-fixe: #f49511;
  --blanc-fixe: #ffffff;
  --shadow-musette: 6px 6px 0 0 #14233c;
}

/* theme: nuit */
[data-theme="nuit"] {
  --coton-50: #0a111f;
  --coton-100: #0f1829;
  --coton-200: #17233a;
  --coton-300: #2c3a55;
  --peche-100: #2b231a;
  --orange-300: #6a3d0a;
  --orange-500: #f6a53a;
  --orange-600: #ffb86b;
  --jaune-400: #ffd54a;
  --on-orange: #0f1829;
  --marine-900: #f3ecdd;
  --marine-700: #d3cbb9;
  --marine-500: #a8a295;
  --damier-ink: var(--on-orange);
  --ok-600: #8bd49c;
  --alerte-600: #f39c93;
  --focus: #ffb86b;
  --coton-fixe: #f4eee1;
  --marine-fixe: #14233c;
  --orange-fixe: #f49511;
  --blanc-fixe: #ffffff;
  --shadow-musette: 6px 6px 0 0 #f6a53a;
}

:root {
  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  /* radius — clickable elements only */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-visiere: 28px;
  --radius-pill: 999px;
  /* motifs: damier (check), bande (stripe), couture (stitch) */
  --damier-tile: 12px;
  --damier-strip: 8px;
  --bande-height: 6px;
  --couture-dash: 6px;
  --couture-gap: 4px;
  /* rhythm */
  --cadence-fast: 160ms;
  --cadence-base: 280ms;
  --cadence-sprint: 480ms;
  --ease-sprint: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-ride: cubic-bezier(0.3, 0, 0.2, 1);
  --ease-settle: cubic-bezier(0.4, 0, 0.2, 1);
  /* grid: breakpoints (reference only — media queries hard-code them), widths */
  --bp-sm: 480px;
  --bp-md: 760px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --container-max: 1200px;
  --container-text: 720px;
  --gutter: 16px;
  --header-height: 88px;
  /* font families */
  --font-affiche: "Bricolage Grotesque", "Archivo Black", Impact, sans-serif;
  --font-texte: Barlow, "Helvetica Neue", Arial, sans-serif;
  --font-dossard: "Barlow Condensed", "Arial Narrow", sans-serif;
}

/* type styles (the -mobile variants are applied by components.css below 760px) */
.display-xl { font-family: var(--font-affiche); font-size: 64px; line-height: 0.95; font-weight: 800; letter-spacing: -0.02em; }
.display-lg { font-family: var(--font-affiche); font-size: 44px; line-height: 1; font-weight: 800; letter-spacing: -0.015em; }
.title-md { font-family: var(--font-affiche); font-size: 28px; line-height: 1.1; font-weight: 700; letter-spacing: -0.01em; }
.title-sm { font-family: var(--font-affiche); font-size: 20px; line-height: 1.2; font-weight: 700; }
.body-lg { font-family: var(--font-texte); font-size: 19px; line-height: 1.5; font-weight: 400; }
.body { font-family: var(--font-texte); font-size: 16px; line-height: 1.55; font-weight: 400; }
.body-sm { font-family: var(--font-texte); font-size: 14px; line-height: 1.5; font-weight: 400; }
.cta { font-family: var(--font-texte); font-size: 16px; line-height: 1; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.dossard-lg { font-family: var(--font-dossard); font-size: 32px; line-height: 1; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.dossard { font-family: var(--font-dossard); font-size: 18px; line-height: 1; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.label { font-family: var(--font-dossard); font-size: 13px; line-height: 1.2; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

/* motif recipes (no component needed) */
.damier { background: repeating-conic-gradient(var(--damier-ink) 0 25%, transparent 0 50%) 0 0 / var(--damier-tile) var(--damier-tile); }
.couture { height: 2px; background: repeating-linear-gradient(90deg, var(--coton-300) 0 var(--couture-dash), transparent var(--couture-dash) calc(var(--couture-dash) + var(--couture-gap))); }
.focus-ring:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }