/* ============================================================
   TLC × PRODECTA — tokens
   Palette : identité The Level Code / Trackary conservée.
   Grammaire spatiale et rythme : transposés de prodecta.fr.

   THÈME CLAIR / SOMBRE
   --------------------
   Un seul jeu de rôles (--bg, --text, --border…) redéfini à trois
   endroits, dans cet ordre de spécificité croissante :

     :root                       → valeurs du thème CLAIR
     [data-theme="dark"]         → thème SOMBRE, choix explicite de
                                   l'utilisateur (persisté en localStorage)
     :root:not([data-theme]) + @media (prefers-color-scheme: dark)
                                 → thème SOMBRE suivi du système, tant que
                                   l'utilisateur n'a rien choisi
     .on-dark                    → BANDE sombre à l'intérieur d'une page,
                                   quel que soit le thème (démos, hero)

   Les composants ne connaissent QUE les rôles : aucune règle applicative
   ne doit tester le thème. Ajouter une couleur = ajouter un rôle ici.
   ============================================================ */

:root {
  /* --- Identité conservée (charte TLC / Trackary) — INVARIANTE --- */
  --forest:        #102d20;   /* --tlc-ink   : encre de marque */
  --forest-deep:   #071710;   /* --tlc-paper dark : bandes de démo */
  --forest-mid:    #0d2419;   /* --tlc-white dark : surfaces sombres */
  --forest-soft:   #13251b;   /* --tlc-mineral dark */
  --lime:          #c8ff00;   /* --tlc-lime  : accent unique */
  --on-lime:       #102d20;
  --ink-soft:      #486056;
  --cream:         #fff9ee;
  --mineral:       #ebe9e1;

  /* --- Rôles de surface : THÈME CLAIR --- */
  --bg:            #f8faf7;   /* --tlc-paper light (≙ prodecta #F4F1EA) */
  --bg-card:       #ffffff;
  --bg-glass:      rgb(255 255 255 / 0.74);
  --bg-sunken:     #f1f5ef;
  --border:        rgb(16 45 32 / 0.13);
  --border-strong: rgb(16 45 32 / 0.24);
  --text:          #102d20;
  --text-mid:      rgb(16 45 32 / 0.72);
  --text-dim:      rgb(16 45 32 / 0.46);

  /* Accent d'action : le vert forêt porte le CTA, le lime le signal */
  --accent:        var(--forest);
  --accent-ink:    #ffffff;
  --accent-dim:    rgb(16 45 32 / 0.08);
  --signal:        var(--lime);
  --signal-glow:   rgb(200 255 0 / 0.34);
  --signal-dim:    rgb(200 255 0 / 0.14);

  /* Sémantique de données (dashboard) */
  --ok:            #3fb87a;
  --warn:          #e8b53a;
  --alert:         #e0714f;
  --info:          #6ba7d6;

  /* Chrome applicatif de la démonstration (thème clair) */
  --app-bg:        #f6f8f5;
  --app-panel:     #ffffff;
  --app-side:      #fbfcfa;
  --app-line:      #e4e9e2;
  --app-line-soft: #eef2ec;
  --app-ink:       #16241c;
  --app-ink-2:     #4a5a51;
  --app-ink-3:     #7d8a83;
  --app-accent:    #17603a;
  --app-accent-sf: #eaf5ee;
  --app-hover:     #f1f5ef;
  --app-ok:        #15803d;
  --app-warning:   #b45309;
  --app-expired:   #b91c1c;
  --app-info:      #1d4ed8;
  --app-muted:     #6b7280;
  --app-shadow:    0 1px 2px rgb(16 45 32 / 0.05);
  --app-shadow-md: 0 10px 30px rgb(16 45 32 / 0.10);

  /* --- Rythme (Prodecta) --- */
  --radius-xs:  10px;
  --radius-sm:  14px;
  --radius:     18px;
  --radius-md:  24px;
  --radius-lg:  32px;
  --radius-xl:  40px;
  --pill:      100px;

  --gap-tight:  40px;
  --gap-section: 68px;
  --gap-loose:  92px;
  --pad-band:   clamp(56px, 7.5vw, 116px);
  --gutter:     clamp(20px, 4.25vw, 68px);
  --container:  1240px;
  --container-wide: 1400px;

  /* --- Mouvement (easings relevés sur prodecta.fr) --- */
  --ease:        cubic-bezier(0.23, 1, 0.32, 1);      /* expo-out, dominant */
  --ease-enter:  cubic-bezier(0.22, 1, 0.36, 1);      /* entrées */
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-std:    cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:  0.16s;
  --t-std:   0.26s;
  --t-enter: 0.42s;
  --t-slow:  0.65s;

  --shadow-xs:   0 1px 2px rgb(16 45 32 / 0.06);
  --shadow-sm:   0 8px 24px rgb(16 45 32 / 0.07);
  --shadow:      0 18px 52px rgb(16 45 32 / 0.11);
  --shadow-lg:   0 32px 88px rgb(16 45 32 / 0.16);
  --shadow-dark: 0 36px 96px rgb(0 0 0 / 0.44);

  --font: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: "Manrope", "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --nav-h: 66px;
  color-scheme: light;
}

/* ------------------------------------------------------------------
   Les rôles du thème SOMBRE, définis une seule fois puis appliqués
   par les deux sélecteurs ci-dessous (choix explicite / préférence
   système). Dupliquer ce bloc serait la garantie d'une divergence.
   ------------------------------------------------------------------ */
[data-theme="dark"] {
  --bg:            #071710;
  --bg-card:       #0d2419;
  --bg-glass:      rgb(13 36 25 / 0.74);
  --bg-sunken:     #050f0a;
  --border:        rgb(226 246 232 / 0.14);
  --border-strong: rgb(226 246 232 / 0.26);
  --text:          #edf7f0;
  --text-mid:      rgb(237 247 240 / 0.74);
  --text-dim:      rgb(237 247 240 / 0.48);

  --accent:        var(--lime);
  --accent-ink:    var(--on-lime);
  --accent-dim:    rgb(200 255 0 / 0.12);

  /* Sémantique de données : remontée en luminosité pour rester lisible
     sur fond sombre (les valeurs claires passent en dessous du contraste
     AA sur #071710). */
  --ok:            #4ecb8a;
  --warn:          #f0c355;
  --alert:         #ef8a68;
  --info:          #85bce6;

  /* Chrome applicatif de la démonstration (thème sombre) */
  --app-bg:        #050f0a;
  --app-panel:     #0d2419;
  --app-side:      #0a1c13;
  --app-line:      rgb(226 246 232 / 0.13);
  --app-line-soft: rgb(226 246 232 / 0.08);
  --app-ink:       #e8f3ec;
  --app-ink-2:     rgb(232 243 236 / 0.72);
  --app-ink-3:     rgb(232 243 236 / 0.48);
  --app-accent:    #6fe3a4;
  --app-accent-sf: rgb(111 227 164 / 0.13);
  --app-hover:     rgb(226 246 232 / 0.06);
  --app-ok:        #4ecb8a;
  --app-warning:   #f0b65e;
  --app-expired:   #f08a7a;
  --app-info:      #7fa8f5;
  --app-muted:     rgb(232 243 236 / 0.45);
  --app-shadow:    0 1px 2px rgb(0 0 0 / 0.4);
  --app-shadow-md: 0 12px 34px rgb(0 0 0 / 0.5);

  --shadow-xs:   0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-sm:   0 8px 24px rgb(0 0 0 / 0.38);
  --shadow:      var(--shadow-dark);
  --shadow-lg:   0 44px 120px rgb(0 0 0 / 0.55);

  color-scheme: dark;
}

/* Suivi de la préférence système, tant qu'aucun choix n'est enregistré. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #071710;
    --bg-card:       #0d2419;
    --bg-glass:      rgb(13 36 25 / 0.74);
    --bg-sunken:     #050f0a;
    --border:        rgb(226 246 232 / 0.14);
    --border-strong: rgb(226 246 232 / 0.26);
    --text:          #edf7f0;
    --text-mid:      rgb(237 247 240 / 0.74);
    --text-dim:      rgb(237 247 240 / 0.48);
    --accent:        var(--lime);
    --accent-ink:    var(--on-lime);
    --accent-dim:    rgb(200 255 0 / 0.12);
    --ok:            #4ecb8a;
    --warn:          #f0c355;
    --alert:         #ef8a68;
    --info:          #85bce6;
    --app-bg:        #050f0a;
    --app-panel:     #0d2419;
    --app-side:      #0a1c13;
    --app-line:      rgb(226 246 232 / 0.13);
    --app-line-soft: rgb(226 246 232 / 0.08);
    --app-ink:       #e8f3ec;
    --app-ink-2:     rgb(232 243 236 / 0.72);
    --app-ink-3:     rgb(232 243 236 / 0.48);
    --app-accent:    #6fe3a4;
    --app-accent-sf: rgb(111 227 164 / 0.13);
    --app-hover:     rgb(226 246 232 / 0.06);
    --app-ok:        #4ecb8a;
    --app-warning:   #f0b65e;
    --app-expired:   #f08a7a;
    --app-info:      #7fa8f5;
    --app-muted:     rgb(232 243 236 / 0.45);
    --app-shadow:    0 1px 2px rgb(0 0 0 / 0.4);
    --app-shadow-md: 0 12px 34px rgb(0 0 0 / 0.5);
    --shadow-xs:   0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-sm:   0 8px 24px rgb(0 0 0 / 0.38);
    --shadow:      var(--shadow-dark);
    --shadow-lg:   0 44px 120px rgb(0 0 0 / 0.55);
    color-scheme: dark;
  }
}

/* ------------------------------------------------------------------
   BANDE sombre à l'intérieur d'une page : garde son fond sombre dans
   les DEUX thèmes (c'est un choix de composition, pas un thème).
   ------------------------------------------------------------------ */
.on-dark {
  --bg:            var(--forest-deep);
  --bg-card:       var(--forest-mid);
  --bg-glass:      rgb(13 36 25 / 0.72);
  --bg-sunken:     #050f0a;
  --border:        rgb(226 246 232 / 0.14);
  --border-strong: rgb(226 246 232 / 0.26);
  --text:          #edf7f0;
  --text-mid:      rgb(237 247 240 / 0.74);
  --text-dim:      rgb(237 247 240 / 0.48);
  --accent:        var(--lime);
  --accent-ink:    var(--on-lime);
  --accent-dim:    rgb(200 255 0 / 0.12);
  --ok:            #4ecb8a;
  --warn:          #f0c355;
  --alert:         #ef8a68;
  --info:          #85bce6;
  --shadow:        var(--shadow-dark);
  --shadow-lg:     0 44px 120px rgb(0 0 0 / 0.55);
  color-scheme: dark;
  /* Les titres héritent de `color` : sans cette ligne, un h2 dans une bande
     sombre garde l'encre verte de la page claire et devient illisible. */
  color: var(--text);
}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--text); }
.on-dark .lead, .on-dark .small { color: var(--text-mid); }
.on-dark .tiny { color: var(--text-dim); }

/* Transition de thème : uniquement sur les propriétés de couleur, et
   jamais pendant le premier rendu (classe posée par le script inline). */
.theme-anim, .theme-anim * {
  transition: background-color var(--t-std) var(--ease-std),
              border-color var(--t-std) var(--ease-std),
              color var(--t-std) var(--ease-std) !important;
}
@media (prefers-reduced-motion: reduce) {
  .theme-anim, .theme-anim * { transition: none !important; }
}