/* ============================================================================
   WIZILO — Design tokens (charte « app handoff », Direction A)
   Source de vérité des couleurs, typographies, espacements, rayons, ombres.
   Réutilisable tel quel sur le site public ; aligné sur le nouveau design
   d'application (design_handoff_wizilo_app).

   Direction : look chaleureux « papier/crème » — canvas beige (#e8e3d8 →
   #f3efe7), surfaces blanches, vert de marque OLIVE #69A305 (vert foncé
   #4f7d04 pour hover/accents, vert très clair #eef4e2 pour les états actifs),
   neutres « encre » chauds ancrés sur le brun-noir de marque #343530.
   Typo : titres & chiffres en Ubuntu (700), corps & UI en Hanken Grotesk.
   Les noms de tokens sont conservés pour rester portables (site ↔ webapp).
   ============================================================================ */

:root {
  /* --- Couleur de marque : vert olive (échelle 50→900, ancrée #69A305) --- */
  --green-50:  #F5F9EC;
  --green-100: #EEF4E2;   /* fond d'état/actif (du design) */
  --green-200: #D9E8B8;
  --green-300: #BCD884;
  --green-400: #9DC44D;
  --green-500: #84B520;
  --green-600: #69A305;   /* ★ VERT DE MARQUE (olive, Direction A) */
  --green-700: #4F7D04;   /* hover/pressed + accents texte (du design) */
  --green-800: #3F6403;
  --green-900: #2E4A02;

  /* --- Neutres "encre" (gris-bruns chauds, ancrés sur le #343530 du logo) --- */
  --ink-50:  #FAF7F1;   /* fond en-tête de tableau */
  --ink-100: #F3EFE7;   /* canvas app */
  --ink-200: #E9E4DA;   /* bordure standard */
  --ink-300: #E3DDD2;   /* bordure forte */
  --ink-400: #B3ADA1;   /* texte tertiaire */
  --ink-500: #A39D92;   /* texte secondaire clair / placeholder */
  --ink-600: #6A655C;   /* texte secondaire */
  --ink-700: #4A463F;   /* texte secondaire foncé */
  --ink-800: #343530;   /* ★ NEUTRE FONCÉ de marque (encre / texte principal) */
  --ink-900: #25221B;
  --white:   #FFFFFF;

  /* --- Couleurs sémantiques / données (alignées sur le design) --- */
  --success-50:  #E3EFE8;  --success-500: #2F7D5B;  --success-700: #226045;
  --info-50:     #E8EEF5;  --info-500:    #3F6F9C;  --info-700:    #2F5578;
  --warning-50:  #F6EDD6;  --warning-500: #BD8A2C;  --warning-700: #9A7320;
  --danger-50:   #F7E3DD;  --danger-500:  #C0402A;  --danger-700:  #97311F;

  /* --- Rôles sémantiques (ce que l'on utilise dans le CSS produit) --- */
  --color-primary:        var(--green-600);
  --color-primary-hover:  var(--green-700);
  --color-primary-soft:   var(--green-100);
  --color-accent:         var(--green-500);
  --on-primary:           var(--white);

  --bg:           #E8E3D8;          /* fond de page (canvas beige) */
  --surface:      var(--white);     /* cartes, panneaux */
  --surface-2:    var(--ink-100);   /* fond secondaire (sections alternées) */
  --surface-head: var(--ink-50);    /* en-têtes de tableau / panneaux doux */
  --border:       var(--ink-200);
  --border-strong:var(--ink-300);

  --text:         var(--ink-800);
  --text-muted:   var(--ink-600);
  --text-subtle:  var(--ink-500);
  --text-invert:  var(--white);

  /* --- Typographie --- */
  --font-display: 'Ubuntu', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.875rem;   /* 14 */
  --text-base: 1rem;       /* 16 */
  --text-lg:   1.125rem;   /* 18 */
  --text-xl:   1.25rem;    /* 20 */
  --text-2xl:  1.5rem;     /* 24 */
  --text-3xl:  1.875rem;   /* 30 */
  --text-4xl:  2.5rem;     /* 40 */
  --text-5xl:  3.25rem;    /* 52 */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-extra:   700;   /* Ubuntu plafonne à 700 (pas de 800) */

  --leading-tight: 1.05;
  --leading-snug:  1.3;
  --leading-normal:1.6;
  --tracking-tight:-0.015em;
  --tracking-wide:  0.05em;

  /* --- Espacement (base 4px) --- */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;   --space-6: 2rem;    --space-8: 3rem;    --space-10: 4rem;
  --space-12: 6rem;

  /* --- Rayons (du design : app 20, cartes 15–16, badges/inputs 8–11) --- */
  --radius-sm:  8px;
  --radius-md:  11px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-pill:999px;

  /* --- Ombres (chaudes, teintées #282218) --- */
  --shadow-sm: 0 1px 2px rgba(40,34,24,.05), 0 2px 6px rgba(40,34,24,.05);
  --shadow-md: 0 10px 24px -14px rgba(40,34,24,.30), 0 4px 10px -6px rgba(40,34,24,.12);
  --shadow-lg: 0 30px 60px -34px rgba(40,34,24,.45);
  --shadow-focus: 0 0 0 3px rgba(105,163,5,.30);  /* halo vert de focus */

  /* --- Transitions --- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
}

/* --- Thème sombre : on remappe uniquement les rôles, pas les échelles --- */
[data-theme="dark"] {
  --bg:            var(--ink-900);
  --surface:       #2B2820;
  --surface-2:     var(--ink-800);
  --surface-head:  #2B2820;
  --border:        #3A372E;
  --border-strong: var(--ink-700);

  --text:          var(--ink-100);
  --text-muted:    var(--ink-400);
  --text-subtle:   var(--ink-500);

  --color-primary:       var(--green-500);
  --color-primary-hover: var(--green-400);
  --color-primary-soft:  #2E4A02;
  --on-primary:          var(--ink-900);
}