/* =====================================================================
   UEMF — Design Tokens
   Thème clair par défaut. Le mode sombre suit la préférence système
   (prefers-color-scheme) tant que l'utilisateur ne force pas un thème
   via [data-theme="light"|"dark"].
   ===================================================================== */

:root {
  /* --- Marque (constantes, identiques light/dark) --- */
  --brand-700: #0B5C38;
  --brand-600: #0E7C4A;
  --brand-500: #16A34A;
  --brand-400: #22C55E;
  --brand-300: #4ADE80;
  --gold-500:  #D97706;
  --gold-400:  #F59E0B;

  /* --- Surfaces (LIGHT) --- */
  --bg-app:       #EEF2F6;
  --bg-app-grad1: rgba(22, 163, 74, 0.10);
  --bg-app-grad2: rgba(217, 119, 6, 0.06);
  --surface:      #FFFFFF;
  --surface-2:    #F7F9FB;
  --surface-3:    #EEF2F6;
  --surface-hover:#F1F5F9;

  /* --- Bordures --- */
  --border:        #E2E8F0;
  --border-strong: #CBD5E1;
  --border-brand:  rgba(22, 163, 74, 0.45);

  /* --- Texte --- */
  --text:        #0F172A;
  --text-soft:   #475569;
  --text-muted:  #94A3B8;
  --text-on-brand:#FFFFFF;
  --text-brand:  #0E7C4A;

  /* --- États --- */
  --success:     #16A34A;
  --success-bg:  rgba(22, 163, 74, 0.10);
  --danger:      #DC2626;
  --danger-bg:   rgba(220, 38, 38, 0.08);
  --warning:     #D97706;
  --warning-bg:  rgba(217, 119, 6, 0.10);
  --info:        #2563EB;

  /* --- Accent / halo --- */
  --ring:        rgba(22, 163, 74, 0.28);
  --brand-soft:  rgba(22, 163, 74, 0.10);
  --gold-soft:   rgba(217, 119, 6, 0.12);

  /* --- Ombres --- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 6px 20px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 18px 50px rgba(15, 23, 42, 0.16);

  /* --- Rayons --- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-full: 9999px;

  /* --- Transitions --- */
  --t-fast: 130ms cubic-bezier(.4, 0, .2, 1);
  --t-mid:  240ms cubic-bezier(.4, 0, .2, 1);

  /* --- Layout --- */
  --header-h: 64px;
  --maxw: 920px;
  --font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* --- Valeurs DARK (partagées : système OU forcé) --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-app:       #0A0F1A;
    --bg-app-grad1: rgba(34, 197, 94, 0.12);
    --bg-app-grad2: rgba(245, 158, 11, 0.06);
    --surface:      #131B2A;
    --surface-2:    #0F1623;
    --surface-3:    #1B2638;
    --surface-hover:#1B2638;

    --border:        #243043;
    --border-strong: #33425C;
    --border-brand:  rgba(34, 197, 94, 0.45);

    --text:        #E8EEF6;
    --text-soft:   #A6B3C7;
    --text-muted:  #6B7A92;
    --text-brand:  #4ADE80;

    --success-bg:  rgba(34, 197, 94, 0.14);
    --danger:      #F87171;
    --danger-bg:   rgba(248, 113, 113, 0.12);
    --warning:     #FBBF24;
    --warning-bg:  rgba(251, 191, 36, 0.12);

    --ring:        rgba(34, 197, 94, 0.32);
    --brand-soft:  rgba(34, 197, 94, 0.12);
    --gold-soft:   rgba(245, 158, 11, 0.14);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 20px 56px rgba(0, 0, 0, 0.6);
  }
}

[data-theme="dark"] {
  --bg-app:       #0A0F1A;
  --bg-app-grad1: rgba(34, 197, 94, 0.12);
  --bg-app-grad2: rgba(245, 158, 11, 0.06);
  --surface:      #131B2A;
  --surface-2:    #0F1623;
  --surface-3:    #1B2638;
  --surface-hover:#1B2638;

  --border:        #243043;
  --border-strong: #33425C;
  --border-brand:  rgba(34, 197, 94, 0.45);

  --text:        #E8EEF6;
  --text-soft:   #A6B3C7;
  --text-muted:  #6B7A92;
  --text-brand:  #4ADE80;

  --success-bg:  rgba(34, 197, 94, 0.14);
  --danger:      #F87171;
  --danger-bg:   rgba(248, 113, 113, 0.12);
  --warning:     #FBBF24;
  --warning-bg:  rgba(251, 191, 36, 0.12);

  --ring:        rgba(34, 197, 94, 0.32);
  --brand-soft:  rgba(34, 197, 94, 0.12);
  --gold-soft:   rgba(245, 158, 11, 0.14);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 56px rgba(0, 0, 0, 0.6);
}