/* LA CHARTE KAORDIA — les jetons, repris de Kaordia (projet 1) en lecture seule, le 27/09/2026.
   Source : kaordia/frontend/src/styles/variables.css et src/theme/palette.ts (commit ff7444e).
   ⭐ Seuls les jetons servis ici sont repris ; les alias hérités (« sepia »…) ne le sont pas.
   ⭐ DEUX THÈMES (mission #7.3), en jetons : `html[data-mode="sombre"]` recouvre les couleurs du clair.
      `data-theme` porte le CHOIX (clair · sombre · systeme) ; `data-mode` le RÉSULTAT, posé avant le premier
      rendu par le script de tête des pages (« systeme » suit le réglage de l'ordinateur, en direct).
   ⭐ Les valeurs de la zone de saisie, du fond de page et du bouton d'envoi sont celles de la maquette validée
      par Guillaume le 27/09 à 13 h 28.
   ⭐ L'accent vaut le vert Kaordia (#39A935), ou la couleur choisie par la personne (posée sur <html>) ; ses
      nuances en DÉRIVENT (color-mix) — elles suivent donc la couleur et le thème.
   ⭐ (everbrain #1020.1) Inter est SERVIE PAR LE PROJET (le module d'administration, /public/polices/, OFL) :
      ⛔ plus aucune police chargée d'un CDN. Absente (un banc sans ce module), la page prend celle de l'appareil. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
             src: url("/public/polices/inter.woff2") format("woff2"); }
:root {
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ui: var(--font-body);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --text-xs: 0.75rem;  --text-sm: 0.875rem;  --text-base: 1rem;  --text-lg: 1.125rem;
  --text-xl: 1.25rem;  --text-2xl: 1.5rem;
  --font-normal: 400;  --font-medium: 500;  --font-semibold: 600;  --font-bold: 700;
  --leading-normal: 1.5;  --leading-relaxed: 1.6;

  /* Neutres du clair (échelle Zinc de Kaordia ; fond de page de la maquette) */
  --bg-primary: #FBFBF9;
  --bg-secondary: #FFFFFF;
  --bg-surface: #F1F1F4;
  --bg-hover: #F4F4F6;
  --bg-volet: #F3F3F1;
  --bg-hover-volet: color-mix(in srgb, #18181B 6%, transparent);
  --text-primary: #18181B;
  --text-secondary: #3F3F46;
  --text-muted: #71717A;
  --text-disabled: #A1A1AA;
  --border-default: #D4D4D8;
  --border-light: #ECECEF;
  --titre: #1e2c52;                 /* les titres : le marine du logo */
  --fond-marque: #1e2c52;           /* les ronds d'initiales, l'icône de l'orchestrateur */
  --voile: rgba(24, 24, 27, .35);

  /* Fonctionnelles */
  --color-success: #3F9C6A;  --color-warning: #C98A1E;  --color-error: #CF4A45;  --color-info: #3B6FE0;

  /* Marque — le logo : marine, vert, gris-bleu */
  --marque-marine: #1e2c52;  --marque-vert: #39a935;  --marque-gris: #5a768c;

  /* Accent — vert Kaordia (palette.ts), ou la couleur de la personne ; les nuances en dérivent */
  --accent: #39A935;
  --accent-hover: color-mix(in srgb, var(--accent) 85%, #000);
  --accent-active: color-mix(in srgb, var(--accent) 72%, #000);
  --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--bg-secondary));
  --accent-border: color-mix(in srgb, var(--accent) 45%, var(--bg-secondary));
  --accent-text: #FFFFFF;

  /* La zone de saisie (maquette du 27/09, 13 h 28) — ⛔ aucun vert sur sa bordure */
  --saisie-fond: #FFFFFF;
  --saisie-bordure: #E2E2DC;
  --saisie-bordure-focus: #CFCFC7;
  --envoi-repos: #F0F0EC;
  --envoi-icone: #B3B6BD;

  /* Formes */
  --radius-sm: 4px;  --radius-md: 6px;  --radius-lg: 10px;  --radius-xl: 14px;  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.05);
  --shadow-md: 0 1px 2px rgba(24, 24, 27, .04), 0 4px 12px rgba(24, 24, 27, .06);
  --shadow-lg: 0 2px 8px rgba(24, 24, 27, .05), 0 16px 40px rgba(24, 24, 27, .10);

  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;  --space-4: 1rem;
  --space-5: 1.25rem;  --space-6: 1.5rem;  --space-8: 2rem;  --space-10: 2.5rem;
  --duration-fast: 150ms;  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* La bulle de la personne (Kaordia : color-mix de l'encre à 8 %) */
  --bulle-personne: color-mix(in srgb, #18181B 7%, transparent);

  /* La mise en page du chatbot (mission #7.1) */
  --largeur-fil: 720px;
  color-scheme: light;
}

/* ── LE SOMBRE (mission #7.3) : les mêmes jetons, d'autres valeurs. Fond de page, surface et bordure de la
      maquette (#1d1d1c, #2a2a28, #3a3a37). ──────────────────────────────────────────────────────────── */
html[data-mode="sombre"] {
  --bg-primary: #1D1D1C;
  --bg-secondary: #2A2A28;
  --bg-surface: #262624;
  --bg-hover: #323230;
  --bg-volet: #181817;
  --bg-hover-volet: color-mix(in srgb, #FFFFFF 7%, transparent);
  --text-primary: #ECECEA;
  --text-secondary: #C9C9C4;
  --text-muted: #94948E;
  --text-disabled: #6A6A65;
  --border-default: #3A3A37;
  --border-light: #30302E;
  --titre: #E6E9F2;
  --fond-marque: #3B4C80;
  --voile: rgba(0, 0, 0, .55);
  --accent-active: color-mix(in srgb, var(--accent) 70%, #FFF);
  --accent-soft: color-mix(in srgb, var(--accent) 20%, var(--bg-secondary));
  --accent-border: color-mix(in srgb, var(--accent) 50%, var(--bg-secondary));
  --saisie-fond: #2A2A28;
  --saisie-bordure: #3A3A37;
  --saisie-bordure-focus: #4A4A46;
  --envoi-repos: #353532;
  --envoi-icone: #77776F;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .25);
  --shadow-lg: 0 2px 8px rgba(0, 0, 0, .35), 0 16px 40px rgba(0, 0, 0, .45);
  --bulle-personne: color-mix(in srgb, #FFFFFF 8%, transparent);
  color-scheme: dark;
}

/* ── La densité et la taille du texte (Kaordia : Confortable · Compact ; Petit · Moyen · Grand) ─────── */
html[data-taille="petit"] { font-size: 93.75%; }
html[data-taille="grand"] { font-size: 109.375%; }
html[data-densite="compacte"] {
  --space-2: 0.375rem;  --space-3: 0.5rem;  --space-4: 0.75rem;  --space-5: 1rem;
  --space-6: 1.125rem;  --space-8: 1.5rem;  --space-10: 2rem;
}