/* tokens.css — design tokens FreelanceManager (cf. docs/05 §1).
   Sémantiques + dark mode. Aucune valeur brute hors de ce fichier dans les composants. */
:root {
  /* Couleurs de marque — bleu pro par défaut (personnalisable par l'utilisateur, cf. Paramètres → Apparence) */
  --brand-50:#eff6ff; --brand-100:#dbeafe; --brand-300:#93c5fd;
  --brand-500:#3b82f6; --brand-600:#2563eb; --brand-700:#1d4ed8;

  /* Neutres (slate) */
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1;
  --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155;
  --slate-800:#1e293b; --slate-900:#0f172a; --slate-950:#020617;

  /* Sémantiques */
  --success:#10b981; --success-bg:#ecfdf5;
  --warning:#f59e0b; --warning-bg:#fffbeb;
  --danger:#ef4444;  --danger-bg:#fef2f2;
  --info:#3b82f6;    --info-bg:#eff6ff;

  /* Rôles (thème clair) */
  --bg:            var(--slate-100);
  --surface:       #ffffff;
  --surface-2:     var(--slate-50);
  --border:        var(--slate-200);
  --text:          var(--slate-900);
  --text-muted:    var(--slate-500);
  --text-invert:   #ffffff;
  --primary:       var(--brand-600);
  --primary-hover: var(--brand-700);
  --ring:          var(--brand-500);
  --sidebar-bg:    var(--slate-900);
  --sidebar-text:  var(--slate-300);
  --sidebar-active:var(--brand-600);

  /* Typographie */
  --font-head:'Lexend',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'Cascadia Code',monospace;
  --fs-12:12px; --fs-14:14px; --fs-16:16px; --fs-20:20px; --fs-24:24px; --fs-32:32px;

  /* Espacement (échelle 4/8) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;

  /* Rayons & ombres — plus doux, plus premium */
  --r-sm:6px; --r-md:9px; --r-lg:13px; --r-xl:18px; --r-full:999px;
  --shadow-1:0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.04);
  --shadow-2:0 4px 14px rgba(15,23,42,.07);
  --shadow-3:0 18px 48px rgba(2,32,24,.18);

  --transition:150ms ease;
}

:root[data-theme="dark"] {
  --bg:            var(--slate-950);
  --surface:       var(--slate-900);
  --surface-2:     var(--slate-800);
  --border:        var(--slate-700);
  --text:          var(--slate-100);
  --text-muted:    var(--slate-400);
  --primary:       var(--brand-500);
  --primary-hover: var(--brand-300);
  --sidebar-bg:    var(--slate-950);
  --sidebar-text:  var(--slate-400);
}