/* ============================================================
   NEXAGRI — DESIGN TOKENS
   Source de vérité COULEURS = charte fiche-logo-nexagri.pdf
   (décision client : charte uniquement, snap-to-nearest pour
   toute couleur hors charte). Typo = kit Typekit mkf3lqj.
   Ne jamais hardcoder.
   ============================================================ */

:root {

  /* --- COULEURS — CHARTE UNIQUEMENT ------------------------ */
  /* Décision client : on applique la charte, pas les valeurs
     mesurées sur la maquette. La maquette utilise des verts
     légèrement différents (#313A27 / #99B26D) : on les
     remplace par la couleur de charte la plus proche.         */

  --c-principale:   #273F1D;   /* vert foncé — charte "principale" */
  --c-secondaire:   #639E30;   /* vert clair — charte "secondaire" */
  --c-tertiaire:    #F2F1EF;   /* blanc cassé — charte "tertiaire" */
  --c-blanc:        #FFFFFF;

  /* Correspondance maquette -> charte (snap-to-nearest) :
       maquette #313A27 (foncé)   -> --c-principale  #273F1D
       maquette #99B26D (clair)   -> --c-secondaire  #639E30
       maquette blanc/blanc cassé -> --c-blanc / --c-tertiaire
       maquette gris texte #868A80 : AUCUN équivalent charte.
         -> utiliser --c-principale en opacité réduite
            (--color-text-muted), PAS de gris hors charte.     */

  /* Alias sémantiques (à utiliser dans le code) */
  --color-bg:            var(--c-blanc);
  --color-bg-alt:        var(--c-tertiaire);
  --color-bg-dark:       var(--c-principale);
  --color-text:          var(--c-principale);
  --color-text-on-dark:  var(--c-blanc);
  --color-text-muted:    color-mix(in srgb, var(--c-principale) 60%, transparent);
  --color-accent:        var(--c-secondaire);
  --color-card-light:    var(--c-secondaire);
  --color-card-dark:     var(--c-principale);

  /* --- FILTRE PHOTO ---------------------------------------- */
  /* Charte/brief : filtre #E2F1C8 à 30 % sur les photos de
     contenu. #E2F1C8 n'est pas une couleur de charte mais est
     explicitement demandé comme traitement photo -> conservé
     UNIQUEMENT pour l'overlay image, jamais comme couleur d'UI.
     ⚠️ Le hero utilise un overlay SOMBRE (à confirmer, voir
     HOME_SPEC §2).                                            */
  --photo-overlay-light:  rgba(226, 241, 200, 0.30);
  --photo-overlay-dark:   color-mix(in srgb, var(--c-principale) 70%, transparent);

  /* --- RAYONS ---------------------------------------------- */
  --radius-img:   20px;
  --radius-card:  20px;
  --radius-pill:  999px;

  /* --- TRAITS --------------------------------------------- */
  --stroke-width: 4px;   /* "3pt" ≈ 4px — caler sur la maquette */

  /* --- TYPOGRAPHIE (kit mkf3lqj) -------------------------- */
  /* <link rel="stylesheet" href="https://use.typekit.net/mkf3lqj.css">
     azo-sans-web  : 400, 700 (+ ital) — PAS de light
     azo-sans-uber : 1 poids très lourd (display)
     josefin-sans / zain : présents mais NON utilisés          */
  /* azo-sans-uber est all-caps only dans le kit mkf3lqj → H1/H2
     en casse mixte (cf. maquette) impossible avec uber. On
     utilise azo-sans-web 700 partout en display.
     Voir .context/DECISIONS.md (2026-05-18). */
  --font-display: "azo-sans-web", system-ui, sans-serif;
  --font-base:    "azo-sans-web", system-ui, sans-serif;
  --fw-regular:   400;
  --fw-bold:      700;

  /* Échelle typo client (itérations 2026-05-18) :
     - base 50 % (réduction initiale)
     - H1   : +20 % puis encore +20 %  → ×1.44 base
     - body : +35 % puis encore +20 %  → ×1.62 base
     - small: +35 % puis encore +20 %  → ×1.62 base
     Voir DECISIONS.md. */
  --fs-h1:    clamp(29px, 3.6vw, 64px);
  --fs-h2:    clamp(16px, 2vw, 32px);
  --fs-body:  clamp(13px, 1.06vw, 17px);
  --fs-small: 11.4px;
  --lh-display: 1.05;
  --lh-body:    1.5;

  /* --- ESPACEMENTS (départ, caler maquette) --------------- */
  --space-1: 8px;   --space-2: 16px;  --space-3: 24px;
  --space-4: 40px;  --space-5: 64px;  --space-6: 96px;
  --space-7: 128px; --space-8: 192px;

  /* --- CONTENEUR ------------------------------------------ */
  --container-max: 1320px;   /* mesurer sur la maquette */
}