/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   Jetons de la direction artistique Northsystems — SOURCE UNIQUE (A-025, 2026-10-06).
   Décision : docs/reference/DA_NORTHSYSTEMS_FR.md (§3 jetons, §5 sémantique, §6 points de rupture).
   Importé par la web app (client-web-app/src/styles/theme.css) ; la console (admin-app) l'importera à son tour.
   ⚠️ Aucune valeur littérale d'espacement, de taille de texte, de rayon ou d'ombre ne doit exister ailleurs dans le
   code d'interface refondu : tests/solidite/ui/da-controles.test.mjs le vérifie (contrôles de §8.3).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

:root {
  /* §3.1 Palette — Tailwind sky, inchangée et non négociable. `--sky-400/500/600` sont surchargées par la marque
     blanche (client-web-app/src/services/branding.ts:applyAccent) : ce sont des teintes de DÉCOR, jamais un fond
     de texte. Le fond des boutons pleins et le texte d'accent passent par `--ac-fill` / `--ac-txt` ci-dessous. */
  --sky-50: #f0f9ff;
  --sky-100: #e0f2fe;
  --sky-200: #bae6fd;
  --sky-300: #7dd3fc;
  --sky-400: #38bdf8;
  --sky-500: #0ea5e9;
  --sky-600: #0284c7;
  --sky-700: #0369a1;
  --sky-800: #075985;

  /* §3.2 Rôles de texte et de surface (contrastes mesurés : da-controles.test.mjs). */
  --tx: #0f172a;    /* texte principal */
  --tx2: #475569;   /* texte secondaire — le MINIMUM pour un texte posé sur le fond ciel */
  --tx3: #5a6b7f;   /* libellés, métadonnées — sur une SURFACE seulement (4,30 au pire point du fond ciel) */
  --ac-txt: #0369a1;  /* texte d'accent */
  --ac-fill: #0369a1; /* fond de bouton plein, texte blanc dessus */
  --ac-fill-hover: #075985;
  --on-fill: #ffffff; /* texte posé sur un fond plein (accent, blocage, encre) */
  --pn: #ffffff;    /* surface principale */
  --pn2: #f8fbfd;   /* surface secondaire */
  --snk: #eef4f9;   /* zone creuse, squelettes de chargement */
  --ln: #dde8f0;    /* filet de séparation */
  --ln2: #c6d8e6;   /* bordure de commande */
  --scrim: rgba(15, 23, 42, 0.45); /* voile derrière une modale (le seul verre autorisé avec le fond) */
  /* Les bulles du chat (fondateur, 2026-10-10 : « une couleur pour les messages des autres et une autre pour les nôtres ») :
     deux surfaces OPAQUES qui portent du texte — les autres sur un gris neutre, les miens sur le ciel. Contrastes mesurés. */
  --bulle-autre: #eef2f6;
  --bulle-moi: #daf0fd; /* le ciel le plus franc qui garde TOUT texte à 4,5 (le vert « favorable » à 4,52) */

  /* §5 Sémantique — séparé de l'accent. */
  --neutre-tx: #475569;    --neutre-bg: #eef2f6;
  --accent-tx: #0369a1;    --accent-bg: #f0f9ff;
  --favorable-tx: #0f7a5a; --favorable-bg: #e8f6f1;
  --vigilance-tx: #8a5a08; --vigilance-bg: #fdf3e3;
  --blocage-tx: #a41f1f;   --blocage-bg: #fceceb;
  --blocage-fill: #a41f1f; /* fond d'un bouton « danger » plein, texte --on-fill dessus (le texte de blocage s'éclaircit en sombre) */
  --encre: #0f172a;        /* surface pleine d'encre (bandeau hors ligne), texte --on-fill dessus */
  --deco-pale: #bae6fd;    /* barres de graphique secondaires, points discrets — DÉCOR, jamais sous du texte (= sky-200) */
  /* Verre (DA §2) : réservé à une zone qui FLOTTE sur le fond fixe et ne porte que des libellés — la zone des onglets du
     menu (fondateur, 2026-10-06 : « au lieu d'un trait gris, un blur / glass »). Il éclaircit le fond : le contraste des
     libellés ne peut que monter par rapport au pire point du fond, déjà mesuré. */
  --verre: rgba(255, 255, 255, 0.45);
  --verre-filet: rgba(255, 255, 255, 0.8);
  --verre-flou: blur(16px) saturate(1.3);

  /* §3.3 Espacement — 8 valeurs, pas une de plus. */
  --s0: 2px;  --s1: 4px;  --s2: 8px;  --s3: 12px;
  --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;

  /* §3.4 Typographie — 8 tailles, plancher 12 px. */
  --t0: 12px; --t1: 13px; --t2: 15px; --t3: 17px;
  --t4: 20px; --t5: 24px; --t6: 32px; --t7: 44px;
  --font-texte: "Schibsted Grotesk Variable", "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-chiffres: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* §3.5 Rayons — le rayon encode la hiérarchie. */
  --r1: 8px;  /* commandes */
  --r2: 14px; /* blocs */
  --r3: 22px; /* conteneurs */

  /* §3.6 Élévations, toutes teintées sky-600 ; --ctl = le relief des COMMANDES, jamais d'une carte. */
  --e1: 0 1px 2px rgba(2, 132, 199, 0.06);
  --e2: 0 1px 2px rgba(2, 132, 199, 0.05), 0 6px 16px rgba(2, 132, 199, 0.08);
  --e3: 0 2px 4px rgba(2, 132, 199, 0.06), 0 16px 40px rgba(2, 132, 199, 0.13);
  --ctl: inset 0 -2px 3px rgba(2, 132, 199, 0.10), inset 0 1px 1px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(2, 132, 199, 0.10);

  /* §2 Le fond — celui de northsystems.web.app, conservé tel quel. */
  --fond:
    radial-gradient(1100px 600px at 12% -5%, rgba(125, 211, 252, 0.35), transparent 55%),
    radial-gradient(900px 600px at 95% 0%, rgba(186, 230, 253, 0.45), transparent 50%),
    radial-gradient(800px 700px at 60% 110%, rgba(56, 189, 248, 0.14), transparent 55%),
    linear-gradient(180deg, #f7fbff, #eaf4fd);

  /* §6 Points de rupture — un seul jeu. Une propriété CSS ne s'utilise pas dans @media : les valeurs sont donc
     recopiées dans les requêtes, et le contrôle refuse toute autre largeur : 640px (téléphone), 900px (étroit),
     1100px (fiche en deux colonnes). */
  --bp-telephone: 640px;
  --bp-etroit: 900px;
  --bp-large: 1100px;
  color-scheme: light;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   §3.7 MODE SOMBRE — décision du fondateur, 2026-10-06 (« il nous faut absolument un mode sombre »), qui rouvre la
   ligne « pas de mode sombre au lancement » de la DA. Activé par `data-theme="dark"` sur <html>
   (client-web-app/src/lib/theme.ts). Seuls les RÔLES changent : la palette sky (--sky-*), les espacements, tailles,
   rayons et points de rupture restent ceux du dessus. Encre bleu nuit, jamais de noir pur ; contrastes mesurés par
   tests/solidite/ui/mode-sombre.test.mjs (tout texte ≥ 4,5 sur --pn, --pn2, --snk et le fond).
   `color-scheme: dark` : commandes natives (listes, barres de défilement, calendrier) et `light-dark()` suivent.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  color-scheme: dark;
  --tx: #e6edf5;
  --tx2: #aab8ca;
  --tx3: #8a9bb1;
  --ac-txt: #7dd3fc;
  --ac-fill: #0369a1;
  --ac-fill-hover: #075985;
  --on-fill: #ffffff;
  --pn: #121c2e;
  --pn2: #0f1828;
  --snk: #1a2639;
  --ln: #24334b;
  --ln2: #31435f;
  --scrim: rgba(2, 6, 15, 0.66);
  --bulle-autre: #1c283b;
  --bulle-moi: #0e3350;

  --neutre-tx: #aab8ca;    --neutre-bg: #1c283b;
  --accent-tx: #7dd3fc;    --accent-bg: #0e2a40;
  --favorable-tx: #4fd1a5; --favorable-bg: #0c2c26;
  --vigilance-tx: #f0b45a; --vigilance-bg: #33250f;
  --blocage-tx: #f78b8b;   --blocage-bg: #3a161a;
  --blocage-fill: #b42323;
  --encre: #26364f;
  --deco-pale: #1f5c80;
  --verre: rgba(18, 28, 46, 0.5);
  --verre-filet: rgba(255, 255, 255, 0.08);
  --verre-flou: blur(16px) saturate(1.3);

  --e1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --e2: 0 1px 2px rgba(0, 0, 0, 0.30), 0 6px 16px rgba(0, 0, 0, 0.35);
  --e3: 0 2px 4px rgba(0, 0, 0, 0.30), 0 16px 40px rgba(0, 0, 0, 0.45);
  --ctl: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.40);

  --fond:
    radial-gradient(1100px 600px at 12% -5%, rgba(56, 189, 248, 0.13), transparent 55%),
    radial-gradient(900px 600px at 95% 0%, rgba(14, 165, 233, 0.09), transparent 50%),
    radial-gradient(800px 700px at 60% 110%, rgba(56, 189, 248, 0.06), transparent 55%),
    linear-gradient(180deg, #0b1322, #0a111e);
}