/* Rature — design system « Digital Precision ».
   Jetons partagés par l'appli (app/src/css/app.css) et le site (site/assets/css). Documentation : docs/DESIGN-SYSTEM.md.
   Identité majoritairement monochrome (graphite, blancs froids, gris neutres) ; le rouge est une signature, pas une couleur d'interface. */
:root{
  /* ---------- couleurs de base */
  --graphite:#111318;      /* texte principal, boutons principaux, fonds sombres */
  --white:#FFFFFF;
  --g-25:#FAFAFB;
  --g-50:#F4F5F7;          /* surface secondaire */
  --g-100:#ECEDF0;
  --g-150:#E4E6EA;
  --g-200:#DFE1E6;         /* filets */
  --g-300:#C9CCD3;         /* filets appuyés, contours de champs */
  --g-400:#A2A7B1;
  --g-500:#808692;
  --g-600:#69707C;         /* texte secondaire : 4,99:1 sur blanc, 4,57:1 sur --g-50 */
  --g-700:#4A505B;
  --g-800:#2A2E36;
  --g-850:#1F2228;
  --g-900:#181A20;
  --red:#EA483C;           /* signature Rature : tracés, marque, indicateurs. Jamais pour du petit texte sur blanc (3,8:1) */
  --red-text:#C8352B;      /* rouge pour du texte ou un bouton à texte blanc (5,25:1) */
  --red-tint:#FDEEEC;
  --green:#16804D;         /* succès (4,97:1) */
  --green-tint:#E8F5EE;
  --amber:#8A5300;         /* avertissement (6,3:1) */
  --amber-tint:#FBF2E3;

  /* ---------- rôles (thème clair) */
  --bg:var(--white);
  --surface:var(--g-50);
  --surface-2:var(--g-100);
  --raised:var(--white);
  --line:var(--g-200);
  --line-strong:var(--g-300);
  --text:var(--graphite);
  --text-2:var(--g-600);
  --text-3:var(--g-500);    /* uniquement grand texte ou éléments non essentiels */
  --accent:var(--red);
  --accent-text:var(--red-text);
  --primary:var(--graphite);
  --on-primary:var(--white);
  --focus:#111318;
  --selection:rgba(234,72,60,.16);
  --canvas:#E9EBEF;         /* fond derrière les pages PDF */

  /* ---------- typographie */
  --font:"Geist","Geist Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-15:15px; --fs-16:16px; --fs-18:18px; --fs-20:20px;
  --fs-24:24px; --fs-32:32px; --fs-40:40px; --fs-56:56px; --fs-72:72px; --fs-96:96px;
  --lh-tight:1.04; --lh-title:1.12; --lh-ui:1.35; --lh-text:1.55;
  --track-display:-.045em; --track-title:-.025em; --track-ui:-.006em; --track-caps:.06em;
  --w-regular:400; --w-medium:500; --w-semibold:600; --w-bold:700;

  /* ---------- espacements (base 4 px) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-14:56px; --s-20:80px; --s-30:120px;

  /* ---------- dimensions des composants */
  --control-sm:28px; --control:36px; --control-lg:44px; --touch:48px;
  --radius-xs:4px; --radius-sm:6px; --radius:8px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px; --radius-pill:999px;
  --border:1px solid var(--line);

  /* ---------- élévations */
  --shadow-1:0 1px 2px rgba(17,19,24,.06),0 0 0 1px rgba(17,19,24,.04);
  --shadow-2:0 2px 4px rgba(17,19,24,.04),0 8px 24px -6px rgba(17,19,24,.14);
  --shadow-3:0 4px 12px rgba(17,19,24,.06),0 24px 64px -12px rgba(17,19,24,.28);
  --shadow-page:0 1px 2px rgba(17,19,24,.08),0 6px 18px -6px rgba(17,19,24,.16);

  /* ---------- mouvement */
  --ease-out:cubic-bezier(.22,1,.36,1);       /* entrées */
  --ease-in-out:cubic-bezier(.65,0,.35,1);    /* déplacements */
  --ease-precise:cubic-bezier(.3,0,0,1);      /* le trait signature */
  --dur-instant:90ms; --dur-fast:140ms; --dur:220ms; --dur-slow:360ms; --dur-hero:900ms;
}

/* ---------- thème sombre (appli : préférence système ou réglage ; site : sections [data-theme=dark]) */
:root[data-theme="dark"],[data-theme="dark"]{
  --bg:#111318;
  --surface:#16181D;
  --surface-2:#1C1F25;
  --raised:#1C1F25;
  --line:#2A2E36;
  --line-strong:#3A3F49;
  --text:#ECEDF0;
  --text-2:#9AA0AB;
  --text-3:#808692;
  --accent:#F05A4E;
  --accent-text:#F05A4E;
  --primary:#ECEDF0;
  --on-primary:#111318;
  --focus:#ECEDF0;
  --selection:rgba(240,90,78,.24);
  --canvas:#0B0C0F;
  --shadow-1:0 0 0 1px rgba(255,255,255,.06);
  --shadow-2:0 0 0 1px rgba(255,255,255,.06),0 12px 32px -8px rgba(0,0,0,.6);
  --shadow-3:0 0 0 1px rgba(255,255,255,.08),0 28px 72px -12px rgba(0,0,0,.7);
  --shadow-page:0 0 0 1px rgba(255,255,255,.04),0 10px 30px -8px rgba(0,0,0,.6);
  color-scheme:dark;
}

@media (prefers-reduced-motion:reduce){
  :root{--dur-instant:0ms;--dur-fast:0ms;--dur:0ms;--dur-slow:0ms;--dur-hero:0ms}
}