/* =====================================================================
   DESIGN TOKENS (F-55, ADR-0029)
   ---------------------------------------------------------------------
   The only sheet allowed to hold colours, sizes, radii and shadows.
   Everywhere else: var(--...). A sweep test refuses a colour anywhere
   else, templates included.

   Two layers:
   1. Primitives (--p-...): the raw palette. Never used outside this file.
   2. Semantic tokens (--...): the role of a colour. The only ones to use.

   Themes: every semantic token is written light-dark(LIGHT, DARK), and
   the active theme is picked by `color-scheme` on <html>. The server
   writes data-theme from the account preference, so nothing flashes:
     data-theme="dark"   -> dark         (reference theme, the default)
     data-theme="light"  -> light
     data-theme="system" -> light dark   (follows prefers-color-scheme)
   ===================================================================== */

:root {
  color-scheme: dark;

  /* ---------- 1. Primitives ---------- */
  --p-mauve-700: #3a1638;
  --p-mauve-500: #781e73;     /* brand */
  --p-mauve-300: #c265bc;     /* lightened brand, on a dark ground */
  --p-mauve-100: #f5e9f4;
  --p-azur-700: #135f84;
  --p-azur-500: #229bd2;     /* brand */
  --p-azur-300: #4db8e8;     /* lightened brand, on a dark ground */
  --p-azur-100: #e4f3fb;

  --p-nuit-950: #070d19;
  --p-nuit-900: #0a1120;     /* reference ground */
  --p-nuit-850: #0d1628;     /* reference surface */
  --p-nuit-800: #111d33;
  --p-nuit-750: #16243d;
  --p-nuit-700: #1d2b45;     /* reference line */
  --p-nuit-600: #2c3f60;
  --p-nuit-400: #8b9ab3;
  --p-nuit-200: #c9d3e3;
  --p-nuit-100: #e6ecf5;

  --p-gris-900: #16202f;
  --p-gris-600: #556175;
  --p-gris-400: #a9b4c4;
  --p-gris-300: #c2ccd9;
  --p-gris-200: #dde3ec;
  --p-gris-100: #eef2f7;
  --p-gris-50:  #f6f8fb;
  --p-blanc:    #ffffff;
  --p-noir:     #000000;

  --p-vert-700: #1f7a45;  --p-vert-300: #5fd394;
  --p-orange-700: #8a5300; --p-orange-300: #f0a945;
  --p-rouge-700: #b42323; --p-rouge-300: #ff8585;

  /* ---------- 2. Semantic: surfaces and text ---------- */
  --fond:          light-dark(var(--p-gris-100), var(--p-nuit-900));
  --surface:       light-dark(var(--p-blanc),    var(--p-nuit-850));
  --surface-2:     light-dark(var(--p-gris-50),  var(--p-nuit-800));   /* hover, fields */
  --surface-3:     light-dark(var(--p-gris-100), var(--p-nuit-750));   /* selection, relief */
  --trait:         light-dark(var(--p-gris-200), var(--p-nuit-700));
  --trait-fort:    light-dark(var(--p-gris-300), var(--p-nuit-600));
  --texte:         light-dark(var(--p-gris-900), var(--p-nuit-100));
  --texte-doux:    light-dark(var(--p-gris-600), var(--p-nuit-400));
  --texte-inverse: light-dark(var(--p-blanc),    var(--p-nuit-900));

  /* Brand */
  --logo-violet:   light-dark(var(--p-mauve-500), var(--p-mauve-300)); /* logo: the brand violet vanishes on night blue */
  --logo-bleu:     var(--p-azur-500);
  --accent:         light-dark(var(--p-mauve-500), var(--p-mauve-300)); /* mauve text and lines */
  --accent-fond:    light-dark(var(--p-mauve-500), var(--p-mauve-700)); /* main button */
  --accent-contour: light-dark(var(--p-mauve-500), var(--p-mauve-300));
  --accent-sur:     var(--p-blanc);                                      /* text on accent-fond */
  --accent-pale:    light-dark(var(--p-mauve-100), rgb(194 101 188 / .07));
  --accent-halo:    light-dark(rgb(120 30 115 / .22), rgb(194 101 188 / .30));
  --structure:      light-dark(var(--p-azur-700), var(--p-azur-300));   /* links, landmarks */
  --structure-pale: light-dark(var(--p-azur-100), rgb(77 184 232 / .12));

  /* Active menu entry: glowing cyan outline */
  --actif-contour:  light-dark(var(--p-azur-500), #3e9fd0);
  --actif-fond:     light-dark(var(--p-azur-100), rgb(62 159 208 / .08));
  --actif-halo:     light-dark(rgb(34 155 210 / .18), rgb(56 182 230 / .22));

  --focus:          light-dark(var(--p-azur-700), #7fd3f5);

  /* States (badges, alerts): text, line, ground */
  --ok:              light-dark(var(--p-vert-700), var(--p-vert-300));
  --ok-trait:        light-dark(#9fd6b5, #1f5a3c);
  --ok-fond:         light-dark(#e8f6ee, rgb(95 211 148 / .08));
  --attention:       light-dark(var(--p-orange-700), var(--p-orange-300));
  --attention-trait: light-dark(#e6bf74, #6a4f22);
  --attention-fond:  light-dark(#fdf4e3, rgb(240 169 69 / .08));
  --probleme:        light-dark(var(--p-rouge-700), var(--p-rouge-300));
  --probleme-trait:  light-dark(#eeb0b0, #6a2c3b);
  --probleme-fond:   light-dark(#fcecec, rgb(255 133 133 / .08));
  --neutre-trait:    var(--trait-fort);
  --danger-fond:     light-dark(var(--p-rouge-700), #8f1d1d);   /* confirmed deletion button */

  /* Emergency banner: impossible to miss, in both themes */
  --urgence-fond:    light-dark(var(--p-rouge-700), #4a1019);
  --urgence-trait:   light-dark(var(--p-rouge-700), var(--p-rouge-300));
  --urgence-texte:   light-dark(var(--p-blanc), #ffe3e3);

  /* Overlays */
  --voile:           light-dark(rgb(22 32 47 / .45), rgb(3 7 15 / .70));
  --ombre-couleur:   light-dark(rgb(22 32 47 / .16), rgb(0 0 0 / .45));

  /* Categorical series (calendar timelines: one colour per layout).
     Fixed order, checked for colour blindness and contrast in both themes; green,
     orange and red are left out because they mean states. Always shown with a label. */
  --serie-1: light-dark(#2a78d6, #3987e5);   /* blue */
  --serie-2: light-dark(#1baf7a, #199e70);   /* aqua */
  --serie-3: light-dark(#eda100, #c98500);   /* yellow */
  --serie-4: light-dark(#e87ba4, #d55181);   /* magenta */
  --serie-5: light-dark(#4a3aa7, #9085e9);   /* violet */
  --serie-neutre: var(--trait-fort);
  /* Hatching for "pending approval" (a pattern, not a colour shade) */
  --hachure: light-dark(rgb(120 30 115 / .14), rgb(194 101 188 / .20));          /* "default" when nothing is scheduled */

  /* Mini map (street sketch, themed: it is not a screen) */
  --carte-fond:   light-dark(#eef2f6, #0f1a2e);
  --carte-ilot:   light-dark(#e2e8ef, #142139);
  --carte-rue:    light-dark(#ffffff, #22324f);
  --carte-eau:    light-dark(#cfe6f5, #12304a);
  --carte-repere: var(--accent);

  /* ---------- Surfaces that NEVER follow the theme ----------
     Screen preview and editor canvas: black, as the panel paints (F-41). */
  --ecran-fond:        var(--p-noir);
  --ecran-cadre:       #1b1f27;
  --ecran-heure-fond:  rgb(0 0 0 / .66);
  --ecran-heure-texte: var(--p-blanc);
  --ecran-vide-texte:  #9aa6b8;
  /* Zone type marks, drawn on the black canvas */
  --zone-media:   #4db8e8;
  --zone-widget:  #d58bd0;
  --zone-bandeau: #f0c45a;
  --zone-alerte:  #ff8585;
  --zone-guide:   #ff5fd2;   /* alignment guides while dragging */
  --zone-grille:  rgb(255 255 255 / .10);
  --zone-poignee: #ffffff;
  --zone-etiquette-fond: rgb(0 0 0 / .72);
  --zone-vide-texte: #9aa6b8;
  --zone-cible-fond: rgb(77 184 232 / .18);   /* zone hovered during a drag and drop */
  --zone-texte:   #ffffff;

  /* ---------- Typography ---------- */
  --police: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, "Noto Sans", Arial, "Liberation Sans", sans-serif;
  --police-chiffres: var(--police);
  --police-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --taille-xs:  12px;
  --taille-s:   13px;
  --taille-m:   14px;   /* body */
  --taille-l:   16px;
  --taille-xl:  20px;
  --taille-2xl: 28px;   /* page title */
  --taille-3xl: 34px;   /* key figures */
  --interligne: 1.5;
  --interligne-serre: 1.2;
  --graisse-normale: 400;
  --graisse-moyenne: 600;
  --graisse-forte:   700;
  --espacement-capitales: .12em;

  /* ---------- Spacing ---------- */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;
  --esp-7: 48px;

  /* ---------- Radii ---------- */
  --rayon-s: 6px;
  --rayon-m: 10px;
  --rayon-l: 14px;      /* cards */
  --rayon-pastille: 999px;

  /* ---------- Lines and shadows ---------- */
  --trait-fin: 1px;
  --focus-anneau: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus);
  --halo-actif: 0 0 0 1px var(--actif-halo), 0 0 14px var(--actif-halo);
  --halo-principal: 0 0 14px var(--accent-halo);
  --ombre-flottante: 0 16px 40px var(--ombre-couleur);

  /* ---------- Structural sizes ---------- */
  --larg-menu: 248px;
  --haut-barre: 60px;
  --haut-controle: 36px;
  --haut-controle-petit: 30px;
  --larg-contenu-max: 1440px;
  --larg-panneau: 440px;

  /* ---------- Motion ---------- */
  --duree: 120ms;
  --duree-lente: 220ms;
}

:root[data-theme="light"]  { color-scheme: light; }
:root[data-theme="system"] { color-scheme: light dark; }

@media (prefers-reduced-motion: reduce) {
  :root { --duree: 0ms; --duree-lente: 0ms; }
}