/* =========================================================================
   EcoMaZ — Système de design (tokens)
   Fichier unique de thème : couleurs, typographie, espacements, rayons,
   ombres, mouvement. Thème clair par défaut ; thème sombre automatique
   (prefers-color-scheme) ou forcé par <html data-theme="dark|light">
   (bouton de bascule, voir theme.js).
   Les noms historiques (--bg, --surface, --primary, --green…) restent
   définis plus bas comme alias : le reste de l'appli n'a pas besoin de
   changer pour en bénéficier.
   ========================================================================= */

:root{
  color-scheme: light;

  /* ---- Rôles des couleurs : branchés sur les jetons de la spécification
         (ecomaz-tokens.css, préfixe --em-*), chargé AVANT ce fichier ---- */
  --surface-0:var(--em-bg);       /* fond de page   */
  --surface-1:var(--em-surface);  /* cartes         */
  --surface-2:#f1f4f2;            /* champs, survol */
  --border:var(--em-border);
  --border-strong:#c9d3cd;
  --text:var(--em-text);
  --text-dim:var(--em-text-muted);
  --text-faint:#7d8a83;

  --primary:var(--em-green-700);
  --primary-hover:var(--em-green-900);
  --primary-soft:var(--em-green-100);     /* fond doux (éléments actifs)  */
  --primary-ink:var(--em-green-900);      /* texte sur fond doux          */
  --on-primary:#ffffff;
  --accent:var(--em-terracotta-600);
  --accent-soft:var(--em-terracotta-100);
  --accent-ink:var(--em-terracotta-800);  /* texte sur fond terracotta doux (contraste AA) */
  --gold:var(--em-gold-400);
  --focus:var(--em-gold-400);

  /* ---- Sémantiques (contraste AA sur leur fond doux) ---- */
  --success:#17753f;  --success-soft:#e3f4ea;
  --warning:#8f5a00;  --warning-soft:#fdf1d8;
  --danger:#c4382f;   --danger-soft:#fceceb;
  --info:#235f9f;     --info-soft:#e6effa;

  /* ---- Typographie (échelle ratio 1,25) ---- */
  --font-title:var(--em-font);
  --font-body:var(--em-font);
  --fs-xs:12px; --fs-sm:14px; --fs-md:16px; --fs-lg:20px;
  --fs-xl:24px; --fs-2xl:32px; --fs-3xl:40px; --fs-4xl:56px;
  --lh-text:1.5; --lh-title:1.15;

  /* ---- Espacement (base 4 px) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  /* ---- Rayons ---- */
  --r-control:8px; --r-card:12px; --r-lg:16px; --r-pill:9999px;

  /* ---- Ombres (3 niveaux, teintées vert) ---- */
  --shadow-1:var(--em-shadow-sm);
  --shadow-2:var(--em-shadow-md);
  --shadow-3:var(--em-shadow-lg);

  /* ---- Mouvement ---- */
  --ease:var(--em-ease-out);
  --dur-fast:150ms; --dur:200ms; --dur-slow:250ms;

  /* ---- Mise en page ---- */
  --content-max:1280px;
  --gutter:clamp(16px,3vw,28px);
  --tap:44px;

  /* =====================================================================
     ALIAS HISTORIQUES — noms utilisés par style.css et app.js
     ===================================================================== */
  --bg:var(--surface-0);
  --surface:var(--surface-1);
  --primary-dim:var(--primary-soft);
  --primary-dark:var(--primary-ink);
  --green:var(--success);   --green-bg:var(--success-soft);
  --red:var(--danger);      --red-bg:var(--danger-soft);
  --amber:var(--warning);   --amber-bg:var(--warning-soft);
  --blue:var(--info);       --blue-bg:var(--info-soft);
  --purple:var(--accent);   --purple-bg:var(--accent-soft);
  --radius:var(--r-card);
  --shadow:var(--shadow-2);
  --scrim:rgba(14,34,25,.5);
  font-synthesis:none;
}

/* ---- Thème sombre : mêmes tokens, valeurs adaptées ---- */
@media screen and (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --surface-2:#1c2a24; --border-strong:#3a4f44; --text-faint:#7f9487;
    /* textes et liens primaires éclaircis pour rester lisibles sur fond sombre */
    --primary:#4c9b73; --primary-hover:#6cb88f; --primary-ink:#9fdcba;
    --on-primary:#07140d;
    --accent:#ee9f7e; --accent-ink:#f2b39a;
    --success:#6fd49a; --success-soft:#14301f;
    --warning:#e6b84f; --warning-soft:#33290f;
    --danger:#f28b83;  --danger-soft:#3b1d1b;
    --info:#86b6f0;    --info-soft:#17283d;
    --shadow-1:0 1px 2px rgba(0,0,0,.35);
    --shadow-3:0 22px 44px rgba(0,0,0,.5);
    --scrim:rgba(0,0,0,.65);
  }
}
@media screen{
  :root[data-theme="dark"]{
    color-scheme: dark;
    --surface-2:#1c2a24; --border-strong:#3a4f44; --text-faint:#7f9487;
    /* textes et liens primaires éclaircis pour rester lisibles sur fond sombre */
    --primary:#4c9b73; --primary-hover:#6cb88f; --primary-ink:#9fdcba;
    --on-primary:#07140d;
    --accent:#ee9f7e; --accent-ink:#f2b39a;
    --success:#6fd49a; --success-soft:#14301f;
    --warning:#e6b84f; --warning-soft:#33290f;
    --danger:#f28b83;  --danger-soft:#3b1d1b;
    --info:#86b6f0;    --info-soft:#17283d;
    --shadow-1:0 1px 2px rgba(0,0,0,.35);
    --shadow-3:0 22px 44px rgba(0,0,0,.5);
    --scrim:rgba(0,0,0,.65);
  }
}

@media (max-width:900px){
  :root{ --fs-sm:15px; }
}
@media (prefers-reduced-motion: reduce){
  :root{ --dur-fast:0ms; --dur:0ms; --dur-slow:0ms; }
}