/* ═══════════════════════════════════════════════════
   JACQUARD DESIGN SYSTEM — Design Tokens
   Version 3.0 · April 2026
   ═══════════════════════════════════════════════════
   GENERATED FROM /tokens by `npm run build:tokens`.
   Do not edit by hand — your changes will be overwritten.
   ═══════════════════════════════════════════════════

   @font-face rules live in assets/css/fonts.css — import that
   alongside tokens.css to load the Syne / DM Sans variable fonts.
   The --ff-* family tokens below reference them by name only. */

:root {
  /* ── Brand Colour ── */
  --glycine: #8080E0;
  --glycine-pale: #DFDDF6;
  --glycine-deep: #4845B5;

  /* ── Named Colour Palette ── */
  --rose-sakura: #F2A7B0;
  --rose-sakura-pale: #FCDFE4;
  --rose-sakura-deep: #C0606C;
  --jaune-poussin: #F0C840;
  --jaune-poussin-pale: #FDF0C8;
  --jaune-poussin-deep: #B8922A;
  --bleu-ciel: #9FC3E8;
  --bleu-ciel-pale: #D8EAF8;
  --bleu-ciel-deep: #3A7CB8;
  --vert-menthe: #8FD5B8;
  --vert-menthe-pale: #D4F2E6;
  --vert-menthe-deep: #2E9170;

  /* ── Neutrals ── */
  --blanc: #FBFBFC;
  --craie: #EEEFF3;
  --pierre: #DDDFE5;
  --gris: #A4A7B0;
  --fumee: #656870;
  --encre: #1A1B20;

  --rule: var(--pierre);

  /* ── Semantic foregrounds ── */
  --fg-1: var(--encre);
  --fg-2: var(--fumee);
  --fg-3: var(--gris);
  --fg-brand: var(--glycine-deep);
  --fg-on-dark: var(--blanc);
  --fg-code: var(--glycine-deep);

  /* ── Semantic surfaces (opaque) ── */
  --surface-0: var(--blanc);
  --surface-1: var(--craie);
  --surface-2: var(--pierre);
  --surface-inverse: var(--encre);

  /* ── Fonts ── */
  --font-display: Syne, ui-sans-serif, system-ui, sans-serif;
  --font-body: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ── Tracking (letter-spacing) ── */
  --track-display: -0.03em;
  --track-heading: -0.02em;
  --track-compact: -0.01em;
  --track-label: 0.12em;
  --track-label-loose: 0.20em;

  /* ── Spacing (4px base) ── */
  --sp-zero: 0;
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-sm-p: 12px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-2xl: 40px;
  --sp-3xl: 48px;
  --sp-4xl: 60px;

  /* ── Semantic spacing ── */
  --page-margin: 20px;
  --section-top-pad: var(--sp-xl);
  --section-gap: var(--sp-xl);
  --grid-gap: 6px;

  /* ── Corner Radii ── */
  --r-mini: 1px;
  --r-micro: 2px;
  --r-tiny: 4px;
  --r-checkbox: 6px;
  --r-compact: 8px;
  --r-image: 10px;
  --r-control: 12px;
  --r-button: 14px;
  --r-card: 18px;
  --r-sheet: 28px;
  --r-pill: 100px;

  /* ── Elevation ── */
  --shadow-rest: 0 1px 3px rgba(26,27,32,0.06), 0 1px 2px rgba(26,27,32,0.04);
  --shadow-floating: 0 4px 12px rgba(26,27,32,0.08), 0 2px 4px rgba(26,27,32,0.04);
  --shadow-modal: 0 12px 32px rgba(26,27,32,0.14), 0 4px 8px rgba(26,27,32,0.06);
  --shadow-thumb: 0 1px 2px rgba(26,27,32,0.08), 0 1px 1px rgba(26,27,32,0.04);

  /* ── Motion ── */
  --ease-snap: cubic-bezier(0.2, 0.8, 0.3, 1);
  --ease-out: cubic-bezier(0.2, 0.6, 0.3, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-micro: 60ms;
  --dur-exit: 120ms;
  --dur-pop: 140ms;
  --dur-quick: 200ms;
  --dur-snap: 220ms;
  --dur-breathe: 350ms;

  /* ── Opacity tokens ── */
  --op-wash: 0.08;
  --op-tint: 0.1;
  --op-pressed: 0.16;
  --op-faded: 0.3;
  --op-muted: 0.32;
  --op-scrim: 0.4;
  --op-secondary: 0.56;
  --op-dimmed: 0.7;
  --op-press-fb: 0.75;
  --op-prominent: 0.8;

  /* ── Control sizes ── */
  --touch-min: 44px;
  --touch-compact: 32px;
  --touch-large: 56px;
  --fab: 52px;
  --toggle-track-w: 48px;
  --toggle-track-h: 28px;
  --toggle-thumb: 22px;
  --checkbox-sz: 20px;

  /* ── Type sizes ── */
  --type-display: 80px;
  --type-title: 28px;
  --type-heading: 20px;
  --type-compact: 18px;
  --type-small: 13px;
  --type-eyebrow: 12px;
  --type-body: 15px;
  --type-compact-body: 14px;
  --type-caption: 12px;
  --type-label: 11px;
  --type-micro: 10px;
  --type-nano: 9px;

  /* ── Line height ── */
  --lh-display: 0.95;
  --lh-tight: 1;
  --lh-prose-title: 1.05;
  --lh-title: 1.1;
  --lh-heading: 1.2;
  --lh-compact: 1.25;
  --lh-small: 1.3;
  --lh-field: 1.4;
  --lh-caption: 1.5;
  --lh-dense: 1.55;
  --lh-compact-body: 1.6;
  --lh-body: 1.7;
  --lh-prose: 1.75;

  /* ── Border widths ── */
  --bw-hairline: 1px;
  --bw-standard: 2px;
  --bw-selection: 2px;

  /* ── Layer / surface bounds ── */
  --max-modal-width: 720px;

  /* ── Breakpoints (docs-only; media queries can't consume var()) ── */
  --bp-mobile: 820px;

  /* ── Focus ring ── */
  --focus-ring: 0 0 0 var(--bw-selection) var(--glycine-pale), 0 0 0 4px var(--glycine);
  --focus-ring-inset: inset 0 0 0 var(--bw-selection) var(--glycine);

  /* Back-compat aliases */
  --display: var(--font-display);
  --body: var(--font-body);
}

/* ── Dark Mode ──
   Scoped with :not([data-theme]) so it only fires when JS hasn't set
   an explicit theme. Once an app writes data-theme="light" | "dark"
   on <html>, the explicit-theme selectors below win and user choice
   overrides OS preference. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --glycine-pale: #1A1828;
    --glycine-deep: #B5B0F0;
    --rose-sakura-pale: #221A1E;
    --rose-sakura-deep: #F0BBC2;
    --jaune-poussin-pale: #221F16;
    --jaune-poussin-deep: #F5D98A;
    --bleu-ciel-pale: #161E2C;
    --bleu-ciel-deep: #B4D4F0;
    --vert-menthe-pale: #142220;
    --vert-menthe-deep: #A8E0CA;
    --blanc: #111215;
    --craie: #181920;
    --pierre: #24252E;
    --gris: #787A82;
    --fumee: #9496A0;
    --encre: #E8E9EE;
    --shadow-rest: 0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.15);
    --shadow-floating: 0 4px 12px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.2);
    --shadow-modal: 0 12px 32px rgba(0,0,0,0.4), 0 4px 8px rgba(0,0,0,0.25);
    --shadow-thumb: 0 1px 2px rgba(0,0,0,0.25), 0 1px 1px rgba(0,0,0,0.15);
  }
}

/* Explicit theme overrides (set via <html data-theme="…">). */
[data-theme="light"] {
  color-scheme: light;
}
[data-theme="dark"] {
  color-scheme: dark;
  --glycine-pale: #1A1828;
  --glycine-deep: #B5B0F0;
  --rose-sakura-pale: #221A1E;
  --rose-sakura-deep: #F0BBC2;
  --jaune-poussin-pale: #221F16;
  --jaune-poussin-deep: #F5D98A;
  --bleu-ciel-pale: #161E2C;
  --bleu-ciel-deep: #B4D4F0;
  --vert-menthe-pale: #142220;
  --vert-menthe-deep: #A8E0CA;
  --blanc: #111215;
  --craie: #181920;
  --pierre: #24252E;
  --gris: #787A82;
  --fumee: #9496A0;
  --encre: #E8E9EE;
  --shadow-rest: 0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.15);
  --shadow-floating: 0 4px 12px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.2);
  --shadow-modal: 0 12px 32px rgba(0,0,0,0.4), 0 4px 8px rgba(0,0,0,0.25);
  --shadow-thumb: 0 1px 2px rgba(0,0,0,0.25), 0 1px 1px rgba(0,0,0,0.15);
}