/* Jetons de design. Le thème clair/sombre repose sur light-dark() : :root suit le système, data-theme force un mode. */
:root {
  color-scheme: light dark;
  --bg: light-dark(#f6f7fa, #07090f);
  --bg-elev: light-dark(#ffffff, #0d1119);
  --bg-soft: light-dark(#eef0f5, #131824);
  --ink: light-dark(#0e1320, #e8ecf6);
  --ink-2: light-dark(#4b5671, #9aa6bf);
  --ink-3: light-dark(#7d879e, #66728c);
  --line: light-dark(#e3e6ed, #1f2736);
  --line-strong: light-dark(#cfd4df, #2c374c);
  --accent: light-dark(#4f5bff, #7c8cff);
  --accent-2: light-dark(#0aa5d6, #3ee0ff);
  --accent-ink: light-dark(#ffffff, #07090f);
  --accent-soft: light-dark(#eceeff, #171c3a);
  --ok: light-dark(#0b9b72, #3ddcaa);
  --ok-soft: light-dark(#dff5ec, #0f2e27);
  --warn: light-dark(#c98200, #f5b942);
  --warn-soft: light-dark(#fff1d3, #33270d);
  --bad: light-dark(#d23b52, #ff7288);
  --bad-soft: light-dark(#ffe4e8, #371a22);
  --plaque: #ffffff;
  --grad: linear-gradient(135deg, var(--accent), var(--accent-2));
  --glow: color-mix(in srgb, var(--accent) 22%, transparent);
  --shadow-1: light-dark(0 1px 2px rgba(14,19,32,.05), 0 1px 0 rgba(255,255,255,.03) inset);
  --shadow-2: light-dark(0 12px 40px rgba(14,19,32,.12), 0 16px 48px rgba(0,0,0,.55));
  --r-s: 6px; --r-m: 10px; --r-l: 14px; --r-pill: 999px;
  --gap: 14px; --gutter: clamp(16px, 4vw, 36px); --wrap: 1180px;
  --font: ui-sans-serif, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --ratio-photo: 4 / 3;
  --etoile: light-dark(#f2a900, #ffc933);
  --nav-h: 58px; --tab-h: 60px;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }