/* ============================================================================
   EconDoctor — Design tokens (Phase 1)
   Chargé AVANT styles.css. Purement additif : ne remappe rien, n'écrase rien.
   Les valeurs reprennent 1-pour-1 ce qui est DÉJÀ utilisé dans le code
   (rampe de gris "Tailwind", verts/rouges/ambres sémantiques, bleu de marque),
   de sorte que la migration = remplacer des hex en dur par var(--token).
   Réf. docs/DESIGN_SYSTEM.md
   ========================================================================== */
:root {
  /* --- Marque (source unique). Hue/sat repris de --clr-primary historique --- */
  --brand-h: 209;
  --brand-s: 62%;
  --brand-50:  hsl(var(--brand-h) var(--brand-s) 96%);
  --brand-100: hsl(var(--brand-h) var(--brand-s) 92%);
  --brand-200: hsl(var(--brand-h) var(--brand-s) 82%);
  --brand-300: hsl(var(--brand-h) 45% 75%);
  --brand-400: hsl(var(--brand-h) 50% 55%);
  --brand-500: hsl(var(--brand-h) var(--brand-s) 45%);
  --brand-600: hsl(var(--brand-h) var(--brand-s) 35%);   /* = --clr-primary canonique */
  --brand-700: hsl(var(--brand-h) var(--brand-s) 28%);
  --brand-800: hsl(var(--brand-h) var(--brand-s) 22%);   /* remplace les #123454 de login */
  --brand-900: hsl(var(--brand-h) var(--brand-s) 16%);
  --brand: var(--brand-600);
  --brand-contrast: #ffffff;

  /* --- Accent (or) + orange --- */
  --accent:    #FEC100;
  --accent-d:  #D89E00;
  --accent-fg: #1F2937;   /* texte sur fond or */
  --orange:    #D55E16;

  /* --- Rampe de gris (déjà utilisée partout : on la NOMME) --- */
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;   /* = --clr-text */
  --gray-900: #111827;
  --white: #ffffff;

  /* --- Couleurs sémantiques : action / texte / fond doux / bordure --- */
  --success:        #16a34a;  --success-fg: #065f46;  --success-bg: #def7ec;  --success-border: #34d399;
  --danger:         #dc2626;  --danger-fg:  #7f1d1d;  --danger-bg:  #fef2f2;  --danger-border:  #fecaca;
  --warning:        #d97706;  --warning-fg: #92400e;  --warning-bg: #fef3c7;  --warning-border: #fbbf24;
  --info:           #2563eb;  --info-fg:    #075985;  --info-bg:    #e0f2fe;  --info-border:    #38bdf8;

  /* --- Texte & surfaces (alias sémantiques) --- */
  --text:           var(--gray-800);
  --text-muted:     var(--gray-500);
  --text-strong:    var(--gray-900);
  --surface:        #F5F8FB;   /* fond de page (= --clr-surface) */
  --surface-card:   var(--white);
  --border:         hsl(214 26% 91%);   /* plus douce/premium que gray-200 */
  --border-strong:  hsl(214 20% 84%);

  /* --- Rayons --- */
  --r-sm: 8px;     /* = --radius historique */
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 24px;
  --r-pill: 999px;

  /* --- Espacement --- */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem;  --space-7: 3rem;   --space-8: 4rem;

  /* --- Ombres premium (en couches, douces) --- */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.05);
  --shadow-md: 0 1px 2px rgba(15,23,42,.04), 0 5px 14px rgba(15,23,42,.06);
  --shadow-lg: 0 2px 6px rgba(15,23,42,.04), 0 14px 32px rgba(15,23,42,.08);
  --shadow-xl: 0 8px 16px rgba(15,23,42,.06), 0 28px 60px rgba(15,23,42,.11);

  /* --- Premium : dégradés, transition, focus, tracking --- */
  --brand-gradient: linear-gradient(135deg, hsl(var(--brand-h) var(--brand-s) 31%), hsl(var(--brand-h) var(--brand-s) 41%));
  --accent-gradient: linear-gradient(180deg, #FFD23F, var(--accent));
  --transition: .2s cubic-bezier(.4, 0, .2, 1);
  --ring: 0 0 0 3px hsl(var(--brand-h) var(--brand-s) 45% / .28);
  --tracking-tight: -.02em;
  --tracking-tighter: -.035em;

  /* --- Typographie --- */
  --text-xs:  .8rem;
  --text-sm:  .9rem;
  --text-base: 1rem;
  --text-lg:  1.125rem;
  --text-xl:  1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: clamp(2.15rem, 5vw, 3.2rem);
  --leading-tight: 1.15;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* --- z-index nommés --- */
  --z-header: 1000;
  --z-dropdown: 1100;
  --z-cookie: 1200;
  --z-tooltip: 10000;
}