/* ==========================================================================
   tokens.css — Design tokens TheGreenFlux
   Variables de couleur (clair + sombre), typographie, espacements, rayons,
   ombres. Aucune règle de composant ici. Valeurs issues de docs/maquette.html.
   ========================================================================== */

:root {
  /* ---- Couleurs — mode clair ---- */
  --bg: #F1F5F1;            /* fond de page (vert-gris très clair) */
  --surface: #FFFFFF;       /* cartes / surfaces */
  --surface-2: #F6FAF6;     /* surfaces secondaires (barres de carte) */
  --ink: #0E1A15;           /* texte principal */
  --muted: #566B62;         /* texte secondaire */
  --forest: #0B4F41;        /* vert foncé — accent principal (Optimiser) */
  --forest-soft: #0e6553;   /* variante */
  --flux: #1D9E75;          /* vert vif — flux / temps réel (Piloter) */
  --flux-ink: #0d6b4d;      /* vert lisible sur clair (liens, eyebrows) */
  --signal: #E23B2E;        /* rouge — alertes (Boucler) */
  --amber: #C77A12;         /* ambre — tags "warn" (fond) */
  --amber-ink: #8a5300;     /* ambre assombri — texte lisible (AA) sur fond ambre clair */
  --line: rgba(11, 79, 65, .14);
  --line-strong: rgba(11, 79, 65, .28);
  --shadow: 0 1px 2px rgba(11, 79, 65, .06), 0 18px 40px -22px rgba(11, 79, 65, .35);
  --grid: rgba(11, 79, 65, .08);
  --backdrop: rgba(11, 79, 65, .38);   /* voile modale */
  --hero-ground:
    radial-gradient(120% 90% at 82% 8%, rgba(29, 158, 117, .13), transparent 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(11, 79, 65, .08), transparent 60%);

  /* ---- Typographie ---- */
  --font-display: 'Poppins', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* ---- Layout / espacements ---- */
  --wrap: 1120px;
  --pad-inline: 24px;
  --pad-inline-sm: 18px;

  /* ---- Rayons ---- */
  --r-card: 16px;
  --r-card-lg: 18px;
  --r-band: 22px;
  --r-btn: 10px;
  --r-pill: 999px;

  color-scheme: light;
}

/* ==========================================================================
   Mode sombre — automatique (préférence système) sauf override [data-theme]
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #06120E;
    --surface: #0C1F18;
    --surface-2: #0f2a20;
    --ink: #E9F2EC;
    --muted: #95AC9F;
    --forest: #39c79b;
    --forest-soft: #2fae86;
    --flux: #35C795;
    --flux-ink: #7fe6c2;
    --signal: #FF6A5C;
    --amber: #E4A64B;
    --amber-ink: #E4A64B;   /* sur fond sombre, l'ambre clair est déjà lisible */
    --line: rgba(120, 200, 170, .16);
    --line-strong: rgba(120, 200, 170, .30);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 22px 46px -24px rgba(0, 0, 0, .7);
    --grid: rgba(120, 200, 170, .10);
    --backdrop: rgba(0, 0, 0, .55);
    --hero-ground:
      radial-gradient(120% 90% at 82% 8%, rgba(53, 199, 149, .16), transparent 55%),
      radial-gradient(90% 70% at 0% 100%, rgba(11, 79, 65, .30), transparent 60%);
    color-scheme: dark;
  }
}

/* Override explicite (futur bouton de thème : data-theme="dark") */
:root[data-theme="dark"] {
  --bg: #06120E;
  --surface: #0C1F18;
  --surface-2: #0f2a20;
  --ink: #E9F2EC;
  --muted: #95AC9F;
  --forest: #39c79b;
  --forest-soft: #2fae86;
  --flux: #35C795;
  --flux-ink: #7fe6c2;
  --signal: #FF6A5C;
  --amber: #E4A64B;
  --amber-ink: #E4A64B;
  --line: rgba(120, 200, 170, .16);
  --line-strong: rgba(120, 200, 170, .30);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 22px 46px -24px rgba(0, 0, 0, .7);
  --grid: rgba(120, 200, 170, .10);
  --backdrop: rgba(0, 0, 0, .55);
  --hero-ground:
    radial-gradient(120% 90% at 82% 8%, rgba(53, 199, 149, .16), transparent 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(11, 79, 65, .30), transparent 60%);
  color-scheme: dark;
}