/* FOX — extension de Blanc Cassé.
 * À charger APRÈS les 3 fichiers tokens de Blanc Cassé (colors, typography, layout).
 * Valeurs reprises de design_system_fox/tokens/fox.css : les 118 jetons sont
 * ceux du handoff, à l'identique.
 *
 * SEUL écart de structure avec le fichier du handoff, et il corrige un défaut
 * de celui-ci : les surcharges de couleur Blanc Cassé sont isolées en mode
 * clair. En `html:root` nu, leur spécificité (0,1,1) battrait les
 * redéfinitions sombres de tokens.css ([data-theme="dark"] = (0,1,0)) et le
 * vert Menthe, le muted noir et le Lin resteraient appliqués en thème sombre.
 * Structure reprise de la branche Automatisations, qui avait relevé le
 * problème (arbitrage du lead, 19/10). Sans effet tant que le mode sombre est
 * retiré (règle 7), correcte s'il revient un jour. */

html:root:not([data-theme="dark"]) {
  /* ---------- Couleurs validées (surcharge Blanc Cassé) ---------- */
  /* Vert « Menthe douce » */
  --bc-pos-bg:  #c4e3d3;  --bc-pos-dot: #4fa67a;  --bc-pos-fg: #285f43;
  /* Texte secondaire en noir : --bc-muted = encre. Seuls les placeholders restent gris. */
  --bc-muted: #1c1a17;
  /* « Terminé » / archivé : Lin */
  --bc-dead-bg: #f0ebe3;  --bc-dead-dot: #c9bba8;  --bc-dead-fg: #7c6d5c;
  /* Ambre (warn-fg) : #855c14 sur warn-bg #f1dcaa ne passait pas l'AA texte
     normal (ratio ≈4.397 < 4.5, audit accessibilité 17/10 §5). Foncé au
     plus proche qui repasse (≈4.87), sans toucher tokens.css (généré). */
  --bc-warn-fg: #7c5613;
}

html:root { /* spécificité renforcée : passe devant les jetons Blanc Cassé quel que soit l'ordre de chargement */
  --fox-placeholder: #a3937f; /* Lin — plus aucun gris froid */

  /* ---------- Typo : 6 tailles, une seule police (Helvetica Neue) ---------- */
  --fox-text-xl:   26px;   /* titre de page, grand chiffre · 600 · -0.02em */
  --fox-text-lg:   20px;   /* nom de fiche, date Agenda · 600 · -0.01em */
  --fox-text-md:   16px;   /* titre de modale, saisie de recherche, valeur de tuile */
  --fox-text-base: 13.5px; /* sous-titre, titre de ligne, menu, nav, onglet, champ */
  --fox-text-sm:   12.5px; /* sous-titre de ligne, bouton, chip, badge, libellé de tuile */
  --fox-text-xs:   11px;   /* heure, détail, compteur, micro-libellé */

  /* ---------- Hauteurs de contrôles ---------- */
  --fox-h-2xs: 18px;   /* case à cocher de ligne */
  --fox-h-xs:  24px;   /* pastille de groupe, mini bouton + */
  --fox-h-sm:  30px;   /* bouton compact, bouton rond de filtre */
  --fox-h-md:  34px;   /* bouton standard, champ compact, avatar de ligne */
  --fox-h-lg:  40px;   /* bouton de modale / fiche */
  --fox-h-xl:  42px;   /* bouton du rail, champ de formulaire */
  --fox-h-2xl: 44px;   /* bouton rond d'action d'en-tête de fiche */

  /* ---------- Structure ---------- */
  --fox-rail-w:       64px;
  --fox-rail-w-open:  232px;
  --fox-tabbar-h:     46px;
  --fox-tab-h:        37px;
  --fox-page-pad-y:   34px;
  --fox-page-pad-x:   44px;
  --fox-fiche-pad-x:  34px;
  --fox-search-w:     680px;  /* carte de recherche centrée */
  --fox-search-h:     54px;   /* ligne de saisie */
  --fox-panel-w:      448px;  /* panneau de fiche (En bref, Timeline, RDV…) */
  --fox-fiche-nav-w:  196px;  /* nav verticale de fiche */
  --fox-modal-w:      360px;  /* confirmation */
  --fox-sheet-w:      380px;  /* formulaire en feuille (Agenda) */

  /* ---------- Surfaces dérivées (color-mix) ---------- */
  /* Teintes « sable » validées */
  --fox-sand:     #a07a4f;
  --fox-active:   color-mix(in oklab, var(--fox-sand) 15%, var(--bc-card)); /* item de rail / sidebar actif */
  --fox-pinned:   color-mix(in oklab, var(--fox-sand) 23%, var(--bc-card)); /* ligne de nav épinglée */
  --fox-selected: var(--fox-active);  /* alias : une seule teinte de sélection */
  --bc-accent-soft: var(--fox-active); /* alias Blanc Cassé */
  --fox-scrim:    color-mix(in oklab, #4a3524 30%, transparent);           /* fond de modale */
  --fox-line-soft: color-mix(in oklab, var(--bc-line) 70%, transparent);     /* bord d'onglet inactif */

  /* Tuile en alerte : fond {x}-bg, texte {x}-fg, bord ci-dessous */
  --fox-alert-warn-bd: color-mix(in oklab, var(--bc-warn-dot) 45%, var(--bc-card));
  --fox-alert-neg-bd:  color-mix(in oklab, var(--bc-neg-dot) 45%, var(--bc-card));
  --fox-alert-info-bd: color-mix(in oklab, var(--bc-info-dot) 45%, var(--bc-card));

  /* ---------- Agenda : remplissages des blocs RDV ---------- */
  --fox-agenda-pos:  color-mix(in oklab, var(--bc-pos-dot) 26%, var(--bc-pos-bg));
  --fox-agenda-warn: color-mix(in oklab, var(--bc-warn-bg) 82%, var(--bc-card));
  --fox-agenda-info: color-mix(in oklab, var(--bc-info-dot) 28%, var(--bc-info-bg));
  --fox-agenda-neg:  color-mix(in oklab, var(--bc-neg-bg) 55%, var(--bc-card));
  --fox-agenda-live: var(--bc-info-bg);
  --bc-perso-bg:  var(--bc-dead-bg);
  --bc-perso-dot: var(--bc-dead-dot);
  --bc-perso-fg:  var(--bc-fg);
  --bc-live-dot:  var(--bc-pos-dot);

  /* ---------- Divers ---------- */
  --fox-wa: #25a35a;  /* indicateur WhatsApp — seule couleur de marque tierce admise */
  --fox-pulse: rgba(28,26,23,.35);

  /* ---------- Nomenclature : codes courts (voir Nomenclature.dc.html) ---------- */
  --N1: var(--bc-bg); --N2: var(--bc-card); --N3: var(--bc-fg); --N4: var(--bc-faint); --N5: var(--bc-line); --N6: var(--fox-placeholder);
  --S1: var(--fox-active); --S2: var(--fox-pinned);
  --Menthe1: var(--bc-pos-bg);  --Menthe2: var(--bc-pos-dot);  --Menthe3: var(--bc-pos-fg);
  --Ambre1: var(--bc-warn-bg);  --Ambre2: var(--bc-warn-dot);  --Ambre3: var(--bc-warn-fg);
  --Terracotta1: var(--bc-neg-bg); --Terracotta2: var(--bc-neg-dot); --Terracotta3: var(--bc-neg-fg);
  --Ardoise1: var(--bc-info-bg); --Ardoise2: var(--bc-info-dot); --Ardoise3: var(--bc-info-fg);
  --Grege1: var(--bc-neu-bg);   --Grege2: var(--bc-neu-dot);   --Grege3: var(--bc-neu-fg);
  --Lin1: var(--bc-dead-bg);    --Lin2: var(--bc-dead-dot);    --Lin3: var(--bc-dead-fg);
  --T1: 26px; --T2: 20px; --T3: 16px; --T4: 13.5px; --T5: 12.5px; --T6: 11px;
  --P1: 400; --P2: 500; --P3: 600; --P4: 700;
  --A1: 16px; --A2: 12px; --A3: 6px; --A4: 999px;
  --H1: 18px; --H2: 24px; --H3: 30px; --H4: 34px; --H5: 40px; --H6: 42px; --H7: 44px;
  --I1: 12px; --I2: 14px; --I3: 15px; --I4: 16px; --I5: 17px; --I6: 18px; --I7: 19px;
  --E1: 4px; --E2: 6px; --E3: 8px; --E4: 12px; --E5: 18px; --E6: 24px; --E7: 34px; --E8: 44px;
  --O1: var(--bc-shadow-pop);
}

[data-theme="dark"] {
  --fox-wa: #3fce7a;
  --fox-pulse: rgba(244,241,236,.35);
}

@keyframes foxpulse {
  0%,100% { box-shadow: 0 0 0 0 var(--fox-pulse); opacity: 1; }
  50%     { box-shadow: 0 0 0 5px transparent; opacity: .55; }
}