/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   IAOS / MAPFARM — Charte de design tokens
   Préfixe --mf-*  (maison MAPFARM / factory)
   Référence : CDS-corpus-design-system §2.1-2.6

   ① Couleurs de badges (--mf-color-badge-live-* / -demo-*) : ad hoc,
      à dériver via color-mix() des couleurs sémantiques (--mf-color-info,
      --mf-color-warn) quand le support navigateur sera suffisant.
   ② --mf-radius-pill : 9 px — hors grille de 4 px ; suggéré → 8 px.
   ③ Tailles fractionnelles dans styles.css (12.5, 13.5, 14.5 px) :
      consolider sur l'échelle déclarée (13, 13, 14 px).
   ④ Espacements hors grille de 4 px (3, 6, 10, 11, 14, 18, 22, 26, 30,
      alignement progressif recommandé.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {

  /* ── Couleurs ─────────────────────────────────────────────── */

  /* Fonds — dark-first */
  --mf-color-bg:          #0d0f14;
  --mf-color-surface:     #161b22;
  --mf-color-surface-2:   #1e2530;

  /* Séparateurs */
  --mf-color-border:      #2d3748;

  /* Texte */
  --mf-color-text:        #e2e8f0;
  --mf-color-text-muted:  #8b9ab0;

  /* Accent principal — vert #16a34a
     Contraste vérifié : 5.82 : 1 sur --mf-color-bg → WCAG AA ✓ */
  --mf-color-accent:        #16a34a;
  --mf-color-accent-dim:    #0f2d1b;
  --mf-color-accent-hover:  #22c55e;
  --mf-color-on-accent:     #ffffff;  /* texte sur fond accent */

  /* Lueurs accent — rgba pré-calculées pour les dégradés du hero */
  --mf-color-accent-glow-05: rgba(22, 163, 74, 0.05);
  --mf-color-accent-glow-07: rgba(22, 163, 74, 0.07);
  --mf-color-accent-glow-12: rgba(22, 163, 74, 0.12);

  /* États sémantiques */
  --mf-color-warn:    #facc15;
  --mf-color-info:    #60a5fa;
  --mf-color-danger:  #f87171;


  --mf-color-badge-live-bg:     #0a1628;
  --mf-color-badge-live-border: #1d3a5f;
  --mf-color-badge-demo-bg:     #1a1600;
  --mf-color-badge-demo-border: #4a3f00;

  /* ── Typographie ─────────────────────────────────────────── */

  --mf-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mf-font-mono: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Courier New', monospace;


  --mf-text-2xs:       11px;   /* étiquettes de badge              */
  --mf-text-xs:        13px;   /* chips, CTA, boutons, pied        */
  --mf-text-sm:        14px;   /* texte secondaire, gouvernance    */
  --mf-text-base:      16px;   /* corps de page                    */
  --mf-text-lg:        17px;   /* h3                               */

  /* Titres fluides (mobile → desktop) */
  --mf-text-h2:        clamp(1.375rem, 3.2vw, 1.875rem);  /* 22–30 px */
  --mf-text-h1:        clamp(2rem,     5.4vw, 3.375rem);  /* 32–54 px */
  --mf-text-hero-desc: clamp(1rem,     2.1vw, 1.1875rem); /* 16–19 px */

  /* Métriques typographiques */
  --mf-leading-tight:   1.08;
  --mf-leading-normal:  1.65;
  --mf-tracking-tight: -0.02em;
  --mf-tracking-wide:   0.04em;

  /* ── Espacement (grille 4 px) ─────────────────────────────── */

  --mf-space-1:    4px;
  --mf-space-2:    8px;
  --mf-space-3:   12px;
  --mf-space-4:   16px;
  --mf-space-5:   20px;
  --mf-space-6:   24px;
  --mf-space-7:   28px;
  --mf-space-8:   32px;
  --mf-space-9:   36px;
  --mf-space-10:  40px;
  --mf-space-11:  44px;
  --mf-space-12:  48px;
  --mf-space-16:  64px;
  --mf-space-18:  72px;
  --mf-space-20:  80px;

  /* ── Rayons ──────────────────────────────────────────────── */

  --mf-radius-sm:   4px;
  --mf-radius-pill: 9px;
  --mf-radius-card: 12px;

  /* ── Anneau de focus (WCAG AA) ───────────────────────────── */

  --mf-focus-color:   var(--mf-color-accent);
  --mf-focus-width:   2px;
  --mf-focus-offset:  2px;

  /* ── Mise en page ────────────────────────────────────────── */

  --mf-layout-max-w:   1080px;
  --mf-layout-gutter:  var(--mf-space-6);   /* 24 px */
  --mf-section-pad:    var(--mf-space-16);  /* 64 px */
  --mf-section-pad-sm: var(--mf-space-11);  /* 44 px — mobile */

  /* Transition standard */
  --mf-transition: 0.15s ease;
}