/* = Tokens — la seule source des couleurs, espacements, tailles de texte,
   rayons, ombres et niveaux d'empilement. Rien d'autre ici : pas de
   sélecteur, pas de valeur en dur ailleurs.
   Issu du découpage de main.css (15/09/2026), chargé sur toutes les pages
   dans l'ordre fixé par templates/partials/feuilles_de_style.html.  */

/* Paires texte/fond réellement utilisées, mesurées par le contrôle de contraste
   du harness (design_checks.contrast, seuil AA 4,5:1). Le contrôle ne voit que
   ce qui est déclaré : une paire qui naît par héritage (texte secondaire dans une
   ligne teintée d'un ton, par exemple) se déclare aussi. Une paire s'ajoute ici
   quand un nouvel usage apparaît ; --color-text-muted n'en fait partie d'aucune :
   il ne porte pas de texte à lire (docs/design-system.md § Tokens, tons, utilitaires), seulement un état
   désactivé ou une icône décorative à côté de son libellé.

   @contraste texte : --color-text, --color-text-secondary sur --color-bg, --color-bg-subtle, --color-bg-hover, --color-surface
   @contraste texte : --color-field-label sur --color-surface
   @contraste texte : --color-tint-text sur --color-tint-bg
   @contraste texte : --sidebar-text, --sidebar-section-text sur --sidebar-bg
   @contraste texte : --color-text sur --color-bg-active
   @contraste texte : --color-text-secondary sur --color-bg-active, --color-border-light, --color-danger-bg, --color-warning-bg, --color-info-bg, --color-success-bg, --color-primary-bg, --color-cat-orange-bg
   @contraste texte : --color-text-inverse sur --color-primary, --color-primary-hover, --color-primary-dark, --color-success, --color-success-hover, --color-danger, --color-info, --color-warning-dark, --color-brand-linkedin, --color-brand-linkedin-hover, --color-text-secondary, --color-text
   @contraste texte : --color-primary sur --color-bg, --color-surface, --color-bg-hover, --color-primary-bg, --color-info-bg
   @contraste texte : --color-primary-dark sur --color-primary-light
   @contraste texte : --color-success sur --color-success-bg
   @contraste texte : --color-danger sur --color-danger-bg
   @contraste texte : --color-info sur --color-info-bg, --color-primary-bg
   @contraste texte : --color-warning-dark sur --color-warning-bg
   @contraste texte : --color-danger sur --color-cat-orange-bg
   @contraste texte : --color-cat-violet sur --color-surface
   @contraste texte : --color-code-text sur --color-code-bg
   @contraste texte : --badge-neutral-text sur --badge-neutral-bg
   @contraste texte : --badge-archive-text sur --badge-archive-bg
   @contraste texte : --badge-info-text sur --badge-info-bg
   @contraste texte : --badge-success-text sur --badge-success-bg
   @contraste texte : --badge-acte-text sur --badge-acte-bg
   @contraste texte : --badge-termine-text sur --badge-termine-bg
   @contraste texte : --badge-warning-text sur --badge-warning-bg
   @contraste texte : --badge-danger-text sur --badge-danger-bg
*/

:root {
  /* ─── Surfaces (palette neutre Notion-inspired) ─── */
  --color-bg: #fff; /* fond page */
  --color-bg-subtle: #eaeef2; /* fond panel discret, hover liste */
  --color-bg-hover: #f1f1ef; /* hover items sidebar / boutons */
  --color-bg-active: #e9e9e7; /* item sidebar actif */
  --color-surface: #fff; /* cards, modales */

  /* ─── Bordures ─── */
  --color-border: #e9e9e7;
  --color-border-light: #efefed;
  --color-border-strong: #d9d9d7;

  /* ─── Hiérarchie des écrans (#767) : fond de page, cartes, champs, en-têtes, barre latérale.
     Un rôle, un token : on ajuste le rendu ici, jamais dans une feuille de composant. ─── */
  --color-page-bg: #f4f6f8;
  --color-card-border: #9fb0bd;
  --color-field-border: var(--color-card-border);
  --color-field-label: var(--color-primary-dark);
  --color-card-header-bg: var(--color-primary);
  --color-card-header-text: var(--color-text-inverse);
  --color-tint-bg: #dbe8f2; /* surface claire mise en avant : onglet actif, tête de table sous un en-tête de carte */
  --color-tint-text: var(--color-primary-dark);
  --table-head-bg: var(--color-primary);
  --table-head-text: var(--color-text-inverse);
  --table-head-border: var(--table-head-bg);
  --table-row-alt-bg: var(--color-page-bg);
  --sidebar-bg: var(--color-primary-dark);
  --sidebar-text: #cfdde8;
  --sidebar-text-strong: var(--color-text-inverse);
  --sidebar-section-text: #9fb8cc;
  --sidebar-hover-bg: rgb(255 255 255 / 8%);
  --sidebar-active-bg: var(--color-primary);
  --sidebar-border: rgb(255 255 255 / 12%);
  --sidebar-user-height: 78px; /* hauteur du bloc profil déployé (nom sur plusieurs lignes), réservée aussi replié */
  --sidebar-user-control: 24px; /* l'avatar et le bouton de déconnexion de ce bloc */

  /* ─── Texte ─── */
  --color-text: #37352f; /* Notion-like, pas pur noir */
  --color-text-secondary: #6a6965;
  --color-text-muted: #9b9a97;
  --color-placeholder: #6a6965; /* fixe : un champ posé dans un en-tête de carte garde son placeholder gris */
  --color-text-inverse: #fff;

  /* ─── Accent (bleu architecte Archiga — gardé) ─── */
  --color-primary: #1b4965;
  --color-primary-hover: #153d56;
  --color-primary-light: #5fa8d3;
  --color-primary-bg: #eef5fa;
  --color-primary-dark: #0d2b3e; /* panneau de marque (onboarding) : dégradé primary → dark → deep */
  --color-primary-deep: #062233;

  /* ─── Status (sourds, type Notion) ─── */
  --color-success: #0e7668;
  --color-success-hover: #0b5c51;
  --color-success-bg: #ddedea;
  --color-warning: #b98d5f;
  --color-warning-dark: #82683b;
  --color-warning-bg: #faedd6;
  --color-danger: #b33b36;
  --color-danger-hover: #8c2e2a;
  --color-danger-bg: #fbebec;
  --color-info: #3d6b98;
  --color-info-bg: #e0eaf3;

  /* ─── Bordures d'état (bandeaux, encarts) : un ton entre le fond *-bg et
     la couleur pleine. Créés le 17/09/2026 (lot couleurs, components.css) :
     les bandeaux portaient les *-300 de Tailwind, aucun token n'avait ce rôle. ─── */
  --color-success-border: #9fcfc6;
  --color-warning-border: #e2c9a6;
  --color-danger-border: #edb4b1;
  --color-info-border: #a8c1da;

  /* ─── Palette catégorielle : quand la teinte EST le rôle (type de
     notification, statut de phase, légende de Gantt, pastille d'organisme
     choisie par l'utilisateur). Même principe que --badge-info/--badge-success,
     tons harmonisés à la palette. Créée le 17/09/2026 (lot couleurs ⑧) :
     ces écrans portaient l'indigo, le rose, le cyan, l'orange et le jaune de
     Tailwind et de Material. ─── */
  --color-cat-violet: #6b5fb5;
  --color-cat-violet-bg: #ebe8f7;
  --color-cat-pink: #b5487a;
  --color-cat-pink-bg: #f9e7ef;
  --color-cat-teal: #2a8a8c;
  --color-cat-teal-bg: #dff0f0;
  --color-cat-orange: #c2672e;
  --color-cat-orange-bg: #f9e7db;
  --color-cat-yellow: #a08a1e;
  --color-cat-yellow-bg: #f7f1d6;

  /* ─── Phases du Gantt multi-projets : une teinte par type de phase (venu
     d'un \3c style> de projets/partials/projet_table.html, lot ③ bis, puis
     aligné sur la palette au lot couleurs ⑧). ─── */
  --gantt-phase-esq: var(--color-primary-light);
  --gantt-phase-aps: var(--color-success);
  --gantt-phase-apd: var(--color-cat-violet);
  --gantt-phase-pro: var(--color-warning);
  --gantt-phase-act: var(--color-cat-orange);
  --gantt-phase-exe: var(--color-danger);
  --gantt-phase-chantier: var(--color-cat-teal);
  --gantt-phase-default: var(--color-text-muted);

  /* ─── Marques tierces : la couleur appartient à la marque, pas à la palette ─── */
  --color-brand-linkedin: #0a66c2;
  --color-brand-linkedin-hover: #004182;

  /* ─── Bloc de code (éditeur de templates) : thème sombre, un seul endroit ─── */
  --color-code-bg: #1e1e2e;
  --color-code-text: #cdd6f4;

  /* ─── Voile des modales / confirmations ─── */
  --color-overlay: rgb(15 15 15 / 40%);

  /* ─── Badges : paires fond pastel / texte foncé, nommées par le rôle ───
     La famille badge (static/css/components/badge.css) n'utilise que ces
     paires : les tokens de rôle nus ne passent pas le seuil AA sur du texte
     de 11 px (--color-success sur --color-success-bg : 4,3:1, --color-info
     sur --color-info-bg : 3,9:1). Chaque paire est mesurée par
     apps/core/tests/test_contraste_badges.py. Palette --tag-* du 02/09/2026,
     renommée par le rôle au lot B-2 du design system (18/09/2026). */
  --badge-neutral-bg: #ebebea;
  --badge-neutral-text: #4a4a47;

  /* Gris soutenu, reserve au statut « Archive ». Il doit rester lisible
     sur une ligne atténuée a 0.6, ou tout perd 40 % de son contraste, et
     se distinguer du gris de « Brouillon » qu'il cotoie. */
  --badge-archive-bg: #d8d8d4;
  --badge-archive-text: #3d3d3a;
  --badge-info-bg: #dbeaf2;
  --badge-info-text: #1b4965;

  /* Texte assombri le 02/09/2026 : #0F7B6C donnait 4.3:1, sous le seuil.
     Desormais 5.1:1. */
  --badge-success-bg: #ddedea;
  --badge-success-text: #0d6e61;

  /* Deux nuances de vert pour separer « Acte » de « Termine », qui
     partageaient la meme teinte que « Brouillon » et « Archive ».
     Le vert clair sert l'etape en cours de vie du projet, le vert fonce
     l'aboutissement. Contrastes sur texte de 11 px (seuil AA 4.5:1) :
     clair 5.3:1, fonce 5.9:1 — le vert d'origine etait a 4.3:1, sous le
     seuil. Le gain vient du TEXTE assombri, pas du fond eclairci : une
     premiere version avait eclairci #EAF5F2 jusqu'a rendre la pastille
     fantomatique (1.1:1 contre le blanc, la plus faible des sept) alors
     que six badges sur sept se lisent comme des aplats. */
  --badge-acte-bg: #e4f1ed;
  --badge-acte-text: #0d6e61;
  --badge-termine-bg: #c3e3dc;
  --badge-termine-text: #0a5a4e;

  /* Texte assombri le 02/09/2026 : #8B6F3F donnait 4.1:1 sur ce fond,
     sous le seuil AA de 4.5:1 pour du texte de 11 px. Desormais 5.1:1. */
  --badge-warning-bg: #faedd6;
  --badge-warning-text: #7a6034;

  /* Texte assombri le 02/09/2026 : #A4602B donnait 4.2:1, sous le seuil.
     Trouve par apps/core/tests/test_contraste_badges.py, pas a l'oeil. */
  --badge-danger-bg: #fbebec;
  --badge-danger-text: #8c2e2a;

  /* ─── Typographie ─── */
  --font-base:
    "Inter", -apple-system, blinkmacsystemfont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, menlo, monospace;

  /* Échelle typographique numérique, --text-N = N px (lot ⑪, 17/09/2026), comme
     --space-N : les alias xs/sm/base/md contredisaient d'un cran les utilitaires
     .text-xs (11) / .text-sm (12), posés 300 fois dans les gabarits. Aucune
     taille ne change dans ce lot ; 15 et 17 px ont disparu au lot ⑪b (titres
     → 16/18, texte courant → 14). */
  --text-8: 8px; /* aperçu A4 de l'éditeur, lettres des jours du Gantt */
  --text-9: 9px;
  --text-10: 10px;
  --text-11: 11px;
  --text-12: 12px;
  --text-13: 13px;
  --text-14: 14px;
  --text-16: 16px;
  --text-18: 18px;
  --text-20: 20px;
  --text-22: 22px;
  --text-24: 24px;
  --text-28: 28px;
  --text-30: 30px;
  --text-32: 32px;
  --text-36: 36px;
  --text-40: 40px;
  --text-48: 48px;
  --text-56: 56px; /* chiffres et pictos d'état vide */

  /* Graisses et interlignages (lot ⑫, 17/09/2026). Les interlignages hors
     échelle (1.3, 1.45, 1.5, 1.7, 1.08…) et les hauteurs de contrôle en px
     (32 px) restent en dur pour le lot ⑫b, qui les arrondit au cas par cas. */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-normal: 1.4;
  --leading-snug: 1.5; /* ajouté au lot ⑫b : la valeur la plus courante du code (26 usages), entre normal et relaxed */
  --leading-relaxed: 1.6;

  /* ─── Layout ─── */
  --sidebar-width: 244px;
  --sidebar-collapsed-width: 56px;

  /* ─── Seuils responsive : quatre paliers, 480 / 768 / 1024 / 1280 (lot D-8
     du design system, 21/09/2026 — quatorze seuils avant, de 360 à 1400).
     C'est un commentaire et pas un token parce qu'une custom property ne
     s'évalue pas dans une media query (`@media (width <= var(--bp-md))` est
     invalide : la requête est résolue avant que le document existe). La
     liste fermée vit dans stylelint.config.js (media-feature-name-value-
     allowed-list) et dans apps/core/tests/test_seuils_media.py. S'écrivent
     `(width <= 480px)`, `(width <= 768px)`, `(width <= 1024px)`,
     `(width < 1280px)` (le seul en `<` : « sous 1280 », l'ancien 1279) — et
     `(width > 768px)` pour la sidebar de bureau.
     - 480 : le téléphone — tables en pile, boutons pleine largeur, réservation.
     - 768 : sous la tablette portrait — la sidebar devient un drawer, l'en-tête
       mobile apparaît, tout passe en une colonne.
     - 1024 : la tablette paysage — les mises en page à volet latéral
       (explorateur, messagerie, modèles, droits, fiches du backoffice)
       s'empilent ; la landing replie sa navigation.
     - 1280 : le bureau étroit — `grid-3`/`grid-4` passent à deux colonnes, les
       kanbans défilent (la sidebar, elle, est rétractée dès 768, `(width > 768px)`).
     Une exception documentée : datepicker.css (flatpickr, feuille tierce)
     garde `(width <= 360px)`, la largeur réelle d'un petit téléphone sous
     laquelle sa grille de jours ne tient pas. ─── */

  /* ─── Ombres (très subtiles — modales seulement pour la grande) ─── */
  --color-shadow: #0f0f0f; /* teinte des ombres : color-mix(in srgb, var(--color-shadow) N%, transparent) pour une ombre directionnelle */
  --shadow-xs: 0 1px 2px rgb(15 15 15 / 4%);
  --shadow-sm: 0 2px 4px rgb(15 15 15 / 6%);
  --shadow-md: 0 4px 8px rgb(15 15 15 / 8%);
  --shadow-lg: 0 8px 24px rgb(15 15 15 / 12%);
  --shadow-ring: 0 0 0 1px rgb(15 15 15 / 4%); /* liseré des surfaces flottantes (toast) */
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent); /* anneau de focus des champs */

  /* ─── Rayons ─── */
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 999px;
  --radius-circle: 50%; /* pastilles, avatars */

  /* ─── Espacements : échelle N × 4 px (ADR 0005). Les utilitaires (.mt-3)
     et les feuilles lisent ces tokens ; les alias xs…3xl ont disparu le
     17/09/2026 (lot ④b), ils étaient une seconde nomenclature des mêmes
     valeurs. Un palier absent de l'échelle (6, 10, 14 px) n'est pas un
     token : c'est #120 (arrondi au palier le plus proche). ─── */
  --space-0: 0;
  --space-0-5: 2px; /* densité des chips, badges, boutons-icônes (lot ⑩b) */
  --space-1: 4px;
  --space-1-5: 6px; /* demi-pas compacts (contrôles, cellules) : 6, 10, 14 px — 815 usages, lot ⑩ */
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-15: 60px;
  --space-16: 64px;

  /* ─── Transitions ─── */
  --transition-fast: 80ms ease;
  --transition-base: 150ms ease;
  --transition-slow: 250ms ease;

  /* ─── Z-index (échelle ordonnée, du plus bas au plus haut) ───
     Le nom dit le rôle, pas la valeur : un block prend le token de ce qu'il
     est, jamais celui dont le nombre lui convient (#162 : la sidebar écrite
     `--z-modal` parce qu'elle valait 1000, l'éditeur de gabarits à égalité
     avec elle, le bandeau mobile par-dessus les modales). Un dialogue n'a pas de
     token : `showModal()` le pose dans la couche supérieure, au-dessus de tout. */
  --z-dropdown: 200; /* menus, autocomplétions, popups sans fond */
  --z-mobile-overlay: 999; /* voile derrière le drawer mobile, sous la sidebar */
  --z-sidebar: 1000; /* UX-K4 : au-dessus de Leaflet (panes à 400, popup à 700) */
  --z-mobile-header: 1001; /* bandeau mobile, au-dessus du drawer */
  --z-indicator: 9999; /* barre htmx, visionneuse, bannière d'impersonation */
  --z-toast: 10000;
  --z-confirm: 10001; /* confirmation modale, au-dessus du toast */
}