/* ==========================================================================
   JANGE — Design tokens
   Palette « Forêt » (§71) : vert baobab (marque) + orange (accent) + vert-turquoise (info/succès),
   neutres à légère dominante verte. Dérivée du logo Baobab (assets/brand/).
   ========================================================================== */

:root{
  --ink:#14231A; --ink-soft:#4B5B50; --ink-faint:#73827A;
  --paper:#F6F8F3; --surface:#FFFFFF; --surface-2:#ECF0E6; --border:#DCE3D3;
  --brand:#166534; --brand-strong:#14532D; --brand-soft:#E2F0E6; --on-brand:#FFFFFF;
  --accent:#F97316; --accent-text:#AA4F09; --accent-soft:#FFEBD9;
  --info:#0F8A6E; --info-soft:#DDF3EC;
  --amber:#B4650B; --amber-soft:#FCEFDC;
  --red:#C22B2B; --red-soft:#FBE7E7;
  --green:#0F8A6E; --green-soft:#DDF3EC;
  /* Alias historiques (avant l'identité Baobab/Forêt, §71) : --indigo* = couleur de marque,
     --teal* = couleur d'information. Les ~150 usages existants continuent de fonctionner ;
     les nouveaux écrans utilisent --brand* / --info*. */
  --indigo:var(--brand); --indigo-strong:var(--brand-strong); --indigo-soft:var(--brand-soft);
  --teal:var(--info); --teal-soft:var(--info-soft);
  --heat-0:var(--surface-2);
  --heat-1:#D3E7DA; --heat-2:#A6D1B5; --heat-3:#4F9E6E; --heat-4:#166534;
  --shadow-sm: 0 1px 2px rgba(20,35,26,.04), 0 1px 1px rgba(20,35,26,.03);
  --shadow-md: 0 8px 24px -12px rgba(20,35,26,.22);
  --shadow-lg: 0 20px 48px -20px rgba(20,35,26,.28);
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:22px;
}

/* System dark mode (viewer has not made an explicit choice) */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
  --ink:#ECF4EF; --ink-soft:#B9CBC0; --ink-faint:#87A191;
  --paper:#0C130E; --surface:#131E17; --surface-2:#1B2A21; --border:#293D31;
  --brand:#68DE95; --brand-strong:#9AE9B8; --brand-soft:#213F2C; --on-brand:#06150B;
  --accent:#FA8838; --accent-text:#FB9F60; --accent-soft:#3A301D;
  --info:#59EDCB; --info-soft:#1F4136;
  --amber:#F4A852; --amber-soft:#393521;
  --red:#DE6969; --red-soft:#362B25;
  --green:#59EDCB; --green-soft:#1F4136;
  --heat-0:var(--surface-2);
  --heat-1:#1F4A31; --heat-2:#2E7448; --heat-3:#45A56B; --heat-4:#68DE95;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 12px 28px -12px rgba(0,0,0,.55);
  --shadow-lg: 0 24px 56px -20px rgba(0,0,0,.6);
  }
}

/* Explicit dark toggle (wins over system) */
:root[data-theme="dark"]{
  --ink:#ECF4EF; --ink-soft:#B9CBC0; --ink-faint:#87A191;
  --paper:#0C130E; --surface:#131E17; --surface-2:#1B2A21; --border:#293D31;
  --brand:#68DE95; --brand-strong:#9AE9B8; --brand-soft:#213F2C; --on-brand:#06150B;
  --accent:#FA8838; --accent-text:#FB9F60; --accent-soft:#3A301D;
  --info:#59EDCB; --info-soft:#1F4136;
  --amber:#F4A852; --amber-soft:#393521;
  --red:#DE6969; --red-soft:#362B25;
  --green:#59EDCB; --green-soft:#1F4136;
  --heat-0:var(--surface-2);
  --heat-1:#1F4A31; --heat-2:#2E7448; --heat-3:#45A56B; --heat-4:#68DE95;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 12px 28px -12px rgba(0,0,0,.55);
  --shadow-lg: 0 24px 56px -20px rgba(0,0,0,.6);
}

/* Logo jangë : deux variantes (fond clair / fond sombre), la bonne s'affiche selon le thème. */
.logo-on-dark{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo-on-light{ display:none; }
  :root:not([data-theme="light"]) .logo-on-dark{ display:block; }
}
:root[data-theme="dark"] .logo-on-light{ display:none; }
:root[data-theme="dark"] .logo-on-dark{ display:block; }