/* ================================================================
   MAPAYER — Design tokens v2
   Source unique de vérité pour les couleurs, la typographie,
   l'espacement, les rayons, les ombres et le mouvement.

   Charte : Vert Forêt #1B6B35 · Or #C9A227 · Fond sombre #060E08
   Police  : Poppins

   Charger ce fichier AVANT base.css et AVANT les CSS de composants.
   Aucune règle de style ici : uniquement des variables.

   Principe : les neutres portent les surfaces, le vert porte l'action
   et l'identité, l'or reste un accent rare.
   ================================================================ */

/* ----------------------------------------------------------------
   1. INVARIANTS (identiques dans les deux thèmes)
   ---------------------------------------------------------------- */
:root {
  /* Rampes de marque — générées depuis la charte, teinte et
     saturation conservées, seule la luminosité varie. */
  --brand-50:  #EAF4EE;
  --brand-100: #CFE6D9;
  --brand-200: #A5CFB7;
  --brand-300: #6FB392;
  --brand-400: #3E9668;
  --brand-500: #1B6B35;   /* vert de la charte */
  --brand-600: #16582B;
  --brand-700: #114523;
  --brand-800: #0C321A;
  --brand-900: #082112;

  --gold-50:  #FBF6E4;
  --gold-100: #F5E9BE;
  --gold-200: #EBD68C;
  --gold-300: #E0C25B;
  --gold-400: #D1A53A;
  --gold-500: #C9A227;   /* or de la charte */
  --gold-600: #A8841D;
  --gold-700: #856616;
  --gold-800: #614A10;
  --gold-900: #3D2E0A;

  /* Neutres — la famille qui manquait. Gris légèrement froids
     (teinte 210°) pour ne pas concurrencer le vert. */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #FCFCFD;
  --neutral-50:  #F8F9FA;
  --neutral-100: #F1F3F5;
  --neutral-200: #E9ECEF;
  --neutral-300: #DEE2E6;
  --neutral-400: #CED4DA;
  --neutral-500: #ADB5BD;
  --neutral-600: #868E96;
  --neutral-700: #495057;
  --neutral-800: #343A40;
  --neutral-900: #212529;
  --neutral-950: #0D0F11;

  /* Espacement — base 4px */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* Rayons */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-pill: 999px;

  /* Mouvement */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;
  --dur-slower: 380ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* Structure */
  --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --measure: 68ch;
  --header-h: 64px;
}

/* ----------------------------------------------------------------
   2. THÈME CLAIR — surfaces neutres, marque en accent
   ---------------------------------------------------------------- */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --surface-page:   var(--neutral-0);
  --surface-subtle: var(--neutral-50);
  --surface-card:   var(--neutral-0);
  --surface-inset:  var(--neutral-100);
  --surface-hover:  var(--neutral-50);
  --surface-active: var(--neutral-100);
  --surface-overlay: rgba(255, 255, 255, 0.96);

  /* Bordures */
  --border-subtle: #E9ECEF;
  --border-base:   #E5E7EB;
  --border-strong: #D0D5DD;
  --border-field:  #8A94A6;   /* 3,06:1 — WCAG 1.4.11 sur les composants */

  /* Textes */
  --text-strong: #111827;     /* 17,74:1 */
  --text-base:   #111827;
  --text-muted:  #4B5563;     /* 7,56:1 */
  --text-faint:  #6B7280;     /* 4,83:1 */
  --text-invert: #FFFFFF;

  /* Vert — action et identité.
     Remplissage : le vert de la charte, texte blanc dessus (6,56:1).
     Texte : le même vert, lisible sur blanc (6,56:1). */
  --brand-fill:        #1B6B35;
  --brand-fill-hover:  #145228;
  --brand-fill-active: #0F3D1E;
  --brand-text:        #1B6B35;
  --brand-text-strong: #145228;
  --brand-tint:        #EAF4EE;
  --brand-tint-border: #CFE6D9;
  --brand-on-fill:     #FFFFFF;

  /* Or — accent rare. Jamais en texte sur fond clair (2,42:1) :
     on emploie la déclinaison 700 (4,91:1). */
  --gold-fill:        #C9A227;
  --gold-fill-hover:  #D1A53A;
  --gold-text:        #8A6D14;
  --gold-ink:         #1A1305;
  --gold-tint:        #FBF6E4;
  --gold-tint-border: #F0E2B4;
  --gold-gradient: linear-gradient(135deg, #8A6D14 0%, #A8841D 50%, #8A6D14 100%);

  /* États — chaque état a une variante TEXTE (sur surface) et une
     variante REMPLISSAGE (avec texte blanc), pour ne jamais écrire
     du blanc sur une teinte trop claire. */
  --ok-text:     #0F7B3F;  --ok-tint:     #EAF7EF;  --ok-border:     #C4E7D2;  --ok-fill:     #0F7B3F;
  --danger-text: #B42318;  --danger-tint: #FEF3F2;  --danger-border: #FBD5D2;  --danger-fill: #B42318;
  --warn-text:   #B54708;  --warn-tint:   #FFFAEB;  --warn-border:   #FDE7B0;
  --info-text:   #1D6FB8;  --info-tint:   #EFF6FD;  --info-border:   #C7DEF5;

  /* Élévation — ombres neutres et froides, jamais colorées */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.07), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.07), 0 2px 4px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.09), 0 4px 8px rgba(16, 24, 40, 0.04);
  --shadow-xl: 0 24px 56px rgba(16, 24, 40, 0.12);
  --focus-ring: 0 0 0 3px rgba(27, 107, 53, 0.18);
  --focus-ring-color: rgba(27, 107, 53, 0.18);

  --skeleton: linear-gradient(90deg, var(--neutral-100) 25%, var(--neutral-200) 50%, var(--neutral-100) 75%);

  /* Couche de compatibilité : les CSS existants consomment --mp-*.
     Chaque variable est réassignée à un token sémantique. */
  --mp-bg:           var(--surface-page);
  --mp-bg-2:         var(--surface-subtle);
  --mp-bg-3:         var(--surface-inset);
  --mp-bg-card:      var(--surface-card);
  --mp-bg-rgb:       255, 255, 255;
  --mp-surface:      var(--surface-card);
  --mp-surface-2:    var(--surface-subtle);
  --mp-glass:        rgba(16, 24, 40, 0.035);
  --mp-overlay:      var(--surface-overlay);
  --mp-input-bg:     var(--surface-card);
  --mp-input-border: var(--border-field);
  --mp-border:       var(--border-base);
  --mp-border-green: var(--border-strong);
  --mp-text:         var(--text-base);
  --mp-text-muted:   var(--text-muted);
  --mp-heading:      var(--text-strong);
  --mp-white:        #FFFFFF;
  --mp-shadow:       var(--shadow-lg);
  --mp-shadow-sm:    var(--shadow-sm);
  --mp-green:        var(--brand-fill);
  --mp-green-dark:   var(--brand-fill-hover);
  --mp-green-mid:    var(--brand-600);
  --mp-green-light:  var(--brand-400);
  --mp-green-text:   var(--brand-text);
  --mp-green-text-strong: var(--brand-text-strong);
  --mp-green-rgb:    27, 107, 53;
  --mp-gold:         var(--gold-fill);
  --mp-gold-light:   var(--gold-400);
  --mp-gold-dark:    var(--gold-700);
  --mp-gold-text:    var(--gold-text);
  --mp-danger:       var(--danger-text);
  --mp-danger-bg:    var(--danger-tint);
  --mp-danger-border: var(--danger-border);
  --mp-warning:      var(--warn-text);
  --mp-warning-bg:   var(--warn-tint);
  --mp-info:         var(--info-text);
  --mp-info-bg:      var(--info-tint);
  --mp-blue:         #1D6FB8;
  --mp-purple:       #6B4EA8;
  /* Les halos sont neutralisés : un « glow » devient une ombre neutre. */
  --mp-green-glow:   rgba(16, 24, 40, 0.08);
  --mp-gold-glow:    rgba(16, 24, 40, 0.08);

  /* Les dégradés du hero ne colorent plus le fond. */
  --mp-hero-start:   transparent;
  --mp-hero-end:     transparent;
  --mp-hero-base:    var(--surface-page);

  /* Tiroir mobile (drawer) */
  --mp-drawer-bg:            linear-gradient(180deg, #FFFFFF 0%, #F8F9FA 100%);
  --mp-drawer-header-bg:     linear-gradient(180deg, #FFFFFF 0%, #F8F9FA 100%);
  --mp-drawer-item-border:   var(--border-base);
  --mp-drawer-dropdown-bg:   var(--surface-inset);
  --mp-drawer-dropdown-item-border: var(--border-subtle);
  --mp-drawer-shadow:        0 0 40px rgba(16, 24, 40, 0.10);
  --mp-drawer-header-shadow: var(--shadow-xs);
  --mp-drawer-overlay-bg:    rgba(16, 24, 40, 0.42);
  --mp-drawer-hover-bg:      var(--surface-inset);
  --mp-drawer-active-bg:     var(--brand-tint);
  --mp-drawer-scrollbar-track: var(--neutral-100);

  /* Structure (compat) */
  --mp-font:  var(--font-sans);
  --mp-radius-sm: var(--radius-sm);
  --mp-radius-md: var(--radius-md);
  --mp-radius:    var(--radius-lg);
  --mp-radius-lg: var(--radius-xl);
  --mp-transition: all var(--dur-base) var(--ease-inout);
  --mp-header-offset: 80px;

  /* Police */
  --font-display: var(--font-sans);
  --font-body:    var(--font-sans);
}

/* ----------------------------------------------------------------
   3. THÈME SOMBRE — base de la charte, sans voile ni halo
   ---------------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces — quatre paliers nets, la profondeur vient de là,
     pas d'une ombre (une ombre noire sur noir ne se voit pas). */
  --surface-page:   #060E08;   /* fond sombre de la charte */
  --surface-subtle: #0A140D;
  --surface-card:   #0E1A12;
  --surface-inset:  #0B1510;
  --surface-hover:  #14251A;
  --surface-active: #1A2E20;
  --surface-overlay: rgba(6, 14, 8, 0.96);

  /* Bordures — neutres, plus jamais dorées */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-base:   rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-field:  rgba(255, 255, 255, 0.22);

  /* Textes */
  --text-strong: #FFFFFF;
  --text-base:   #F0F4F2;     /* 17,62:1 */
  --text-muted:  #A9B4AE;     /* 9,15:1 */
  --text-faint:  #7E8A84;     /* 5,45:1 */
  --text-invert: #08210F;

  /* Vert — le remplissage reste celui de la charte (texte blanc
     dessus : 6,56:1), mais le vert de TEXTE s'éclaircit : le vert
     charte sur fond noir ne donne que 2,98:1. */
  /* Le remplissage est très légèrement éclairci par rapport au vert de la
     charte (#1B6B35) : ce dernier, sur le fond sombre, ne donne que 2,98:1
     en contour, juste sous le seuil de 3:1 des éléments d'interface. La
     teinte reste visuellement identique ; le vert charte pur reste
     disponible via --brand-500. */
  --brand-fill:        #1E7A3C;   /* blanc dessus : 5,38:1 · contour : 3,64:1 */
  --brand-fill-hover:  #22833F;
  --brand-fill-active: #1B6B35;
  /* #35A85F donne 6,44:1 sur le fond de page mais seulement 4,27:1
     lorsqu'il est posé sur une teinte de marque (badge, puce d'étape).
     La teinte retenue passe les deux cas. */
  --brand-text:        #4CBE76;   /* 8,63:1 sur la page, ~7:1 sur teinte */
  --brand-text-strong: #63CE8C;
  --brand-tint:        rgba(53, 168, 95, 0.13);
  --brand-tint-border: rgba(53, 168, 95, 0.30);
  --brand-on-fill:     #FFFFFF;

  /* Or — haute lisibilité sur fond noir */
  /* Le remplissage garde l'or de la charte, comme le vert : la marque
     reste reconnaissable. Seul l'or de TEXTE s'éclaircit, l'or charte
     ne donnant que 2,98:1 sur le fond sombre. */
  --gold-fill:        #C9A227;
  --gold-fill-hover:  #D9B23C;
  --gold-text:        #E0BE4E;   /* 10,84:1 */
  --gold-ink:         #1A1305;
  --gold-tint:        rgba(224, 190, 78, 0.13);
  --gold-tint-border: rgba(224, 190, 78, 0.28);
  --gold-gradient: linear-gradient(135deg, #E0BE4E 0%, #EDCB63 50%, #E0BE4E 100%);

  /* États — les remplissages sont assombris : blanc sur #F87171 ne
     donne que 3,0:1, insuffisant pour un bouton. */
  --ok-text:     #4ADE80;  --ok-tint:     rgba(74, 222, 128, 0.12);  --ok-border:     rgba(74, 222, 128, 0.26);  --ok-fill:     #1F7A44;
  --danger-text: #F87171;  --danger-tint: rgba(248, 113, 113, 0.12); --danger-border: rgba(248, 113, 113, 0.26); --danger-fill: #C0392B;
  --warn-text:   #FBBF24;  --warn-tint:   rgba(251, 191, 36, 0.12);  --warn-border:   rgba(251, 191, 36, 0.26);
  --info-text:   #60A5FA;  --info-tint:   rgba(96, 165, 250, 0.12);  --info-border:   rgba(96, 165, 250, 0.26);

  /* Élévation */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.50);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.50);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 28px 64px rgba(0, 0, 0, 0.60);
  --focus-ring: 0 0 0 3px rgba(53, 168, 95, 0.28);
  --focus-ring-color: rgba(53, 168, 95, 0.28);

  --skeleton: linear-gradient(90deg, #16241B 25%, #223528 50%, #16241B 75%);

  /* Couche de compatibilité --mp-* */
  --mp-bg:           var(--surface-page);
  --mp-bg-2:         var(--surface-subtle);
  --mp-bg-3:         var(--surface-inset);
  --mp-bg-card:      var(--surface-card);
  --mp-bg-rgb:       6, 14, 8;
  --mp-surface:      var(--surface-card);
  --mp-surface-2:    var(--surface-subtle);
  --mp-glass:        rgba(255, 255, 255, 0.04);
  --mp-overlay:      var(--surface-overlay);
  --mp-input-bg:     var(--surface-inset);
  --mp-input-border: var(--border-field);
  --mp-border:       var(--border-base);
  --mp-border-green: var(--border-strong);
  --mp-text:         var(--text-base);
  --mp-text-muted:   var(--text-muted);
  --mp-heading:      var(--text-strong);
  --mp-white:        #FFFFFF;
  --mp-shadow:       var(--shadow-lg);
  --mp-shadow-sm:    var(--shadow-sm);
  --mp-green:        var(--brand-fill);
  --mp-green-dark:   var(--brand-fill-hover);
  --mp-green-mid:    var(--brand-500);
  --mp-green-light:  var(--brand-text);
  --mp-green-text:   var(--brand-text);
  --mp-green-text-strong: var(--brand-text-strong);
  --mp-green-rgb:    53, 168, 95;
  --mp-gold:         var(--gold-fill);
  --mp-gold-light:   #EDCB63;
  --mp-gold-dark:    #C9A227;
  --mp-gold-text:    var(--gold-text);
  --mp-danger:       var(--danger-text);
  --mp-danger-bg:    var(--danger-tint);
  --mp-danger-border: var(--danger-border);
  --mp-warning:      var(--warn-text);
  --mp-warning-bg:   var(--warn-tint);
  --mp-info:         var(--info-text);
  --mp-info-bg:      var(--info-tint);
  --mp-blue:         #60A5FA;
  --mp-purple:       #A78BFA;
  --mp-green-glow:   rgba(0, 0, 0, 0.35);
  --mp-gold-glow:    rgba(0, 0, 0, 0.35);

  --mp-hero-start:   transparent;
  --mp-hero-end:     transparent;
  --mp-hero-base:    var(--surface-page);

  /* Tiroir mobile */
  --mp-drawer-bg:            linear-gradient(180deg, #0A140D 0%, #060E08 100%);
  --mp-drawer-header-bg:     linear-gradient(180deg, #0A140D 0%, #070F0A 100%);
  --mp-drawer-item-border:   var(--border-subtle);
  --mp-drawer-dropdown-bg:   rgba(0, 0, 0, 0.25);
  --mp-drawer-dropdown-item-border: rgba(255, 255, 255, 0.04);
  --mp-drawer-shadow:        0 0 40px rgba(0, 0, 0, 0.55);
  --mp-drawer-header-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  --mp-drawer-overlay-bg:    rgba(0, 0, 0, 0.60);
  --mp-drawer-hover-bg:      rgba(255, 255, 255, 0.05);
  --mp-drawer-active-bg:     var(--brand-tint);
  --mp-drawer-scrollbar-track: rgba(255, 255, 255, 0.03);
}

/* ----------------------------------------------------------------
   4. PRÉFÉRENCE SYSTÈME
   Le thème est posé sur <html> par le script du layout. Si aucun
   thème n'est encore posé (premier chargement, JS désactivé), on
   suit la préférence du système plutôt que d'imposer le sombre.
   ---------------------------------------------------------------- */
@media (prefers-color-scheme: light) {
  html:not([data-theme]) body {
    --surface-page:   var(--neutral-0);
    --surface-subtle: var(--neutral-50);
    --surface-card:   var(--neutral-0);
    --surface-inset:  var(--neutral-100);
    --surface-hover:  var(--neutral-50);
    --text-base:      #111827;
    --text-strong:    #111827;
    --text-muted:     #4B5563;
    --text-faint:     #6B7280;
    --border-base:    #E5E7EB;
    --border-strong:  #D0D5DD;
    --border-field:   #8A94A6;
    --border-subtle:  #E9ECEF;
    --brand-text:        #1B6B35;
    --brand-text-strong: #145228;
    --brand-tint:        #EAF4EE;
    --brand-tint-border: #CFE6D9;
    --gold-text:      #8A6D14;
    --gold-fill:      #C9A227;
    --gold-fill-hover: #D1A53A;
    --gold-tint:      #FBF6E4;
    --gold-tint-border: #F0E2B4;
    --gold-ink:       #1A1305;
    --gold-gradient: linear-gradient(135deg, #8A6D14 0%, #A8841D 50%, #8A6D14 100%);
    --skeleton: linear-gradient(90deg, var(--neutral-100) 25%, var(--neutral-200) 50%, var(--neutral-100) 75%);
    --mp-bg-rgb: 255, 255, 255;
    --mp-green-glow: rgba(16, 24, 40, 0.08);
    --mp-gold-glow:  rgba(16, 24, 40, 0.08);
    --mp-green-rgb: 27, 107, 53;
    --mp-glass: rgba(16, 24, 40, 0.035);
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.07), 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.07), 0 2px 4px rgba(16, 24, 40, 0.04);
    --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.09), 0 4px 8px rgba(16, 24, 40, 0.04);
    --shadow-xl: 0 24px 56px rgba(16, 24, 40, 0.12);
    --danger-text: #B42318; --danger-tint: #FEF3F2; --danger-border: #FBD5D2;
    --ok-text: #0F7B3F; --ok-tint: #EAF7EF; --ok-border: #C4E7D2;
    --warn-text: #B54708; --warn-tint: #FFFAEB; --warn-border: #FDE7B0;
    --info-text: #1D6FB8; --info-tint: #EFF6FD; --info-border: #C7DEF5;
    --focus-ring-color: rgba(27, 107, 53, 0.18);
    color: #111827;
    background-color: #FFFFFF;
    color-scheme: light;
  }
}