/* =========================================================================
   ESDI MANAGER — 01-tokens.css
   Design tokens (CSS custom properties) — SOURCE DE VÉRITÉ
   Spec : _bmad-output/planning-artifacts/ux-design-specification.md
          section "Visual Design Foundation" (lignes 575-753)

   Convention :
     --primary-* = Bleu ESDI (#1b5aa8) — brand primary, buttons, nav active, links
     --accent-*  = Cyan ESDI (#3fbecc) — accent, IA, prédictif, focus rings

   Source : esdi.pro global.css + CLAUDE.md Stack technique
   AUCUN HEX HARD-CODED ailleurs que dans ce fichier (sauf --gradient-brand
   qui est volontairement immuable per UX spec ligne 616 "signature inviolable").
   ========================================================================= */

:root {
    /* ====================================================================
       BRAND COLORS — Bleu ESDI (primary) + Cyan ESDI (accent) + scales 50→900
       ==================================================================== */

    /* PRIMARY = Bleu ESDI (boutons, nav active, liens, focus border) */
    --primary-50: #e9eef7;
    --primary-100: #c4d2eb;
    --primary-200: #9ab4dd;
    --primary-300: #6e94cf;
    --primary-400: #4778bf;
    --primary-500: #1b5aa8; /* Bleu ESDI principal */
    --primary-600: #174d8e;
    --primary-700: #133f74;
    --primary-800: #0e305a;
    --primary-900: #082140;
    --primary: var(--primary-500);

    /* ACCENT = Cyan ESDI (IA, prédictif, focus rings, hover ghost) */
    --accent-50: #ecf9fb;
    --accent-100: #d2f1f5;
    --accent-200: #a6e3eb;
    --accent-300: #79d5e1;
    --accent-400: #4dc7d7;
    --accent-500: #3fbecc; /* Cyan ESDI principal */
    --accent-600: #339aa5;
    --accent-700: #26737c;
    --accent-800: #1a4d53;
    --accent-900: #0d262a;
    --accent: var(--accent-500);

    /* GRADIENT SIGNATURE — hard-codé volontairement (UX spec ligne 616 "signature inviolable").
       Garantit l'immutabilité du gradient en dark mode + futurs tenant themes. */
    --gradient-brand: linear-gradient(135deg, #3fbecc 0%, #1b5aa8 100%);

    /* ====================================================================
       BACKGROUNDS — Pastels GMAIA (structurent les sections)
       Source : UX spec ligne 587-593
       ==================================================================== */
    --bg: #FBF8F3;              /* Crème Dorée — app background */
    --bg-card: #FFFFFF;
    --bg-section-warm: #F2EDE4; /* Sable Pâle */
    --bg-section-cool: #EEF1F7; /* Lavande Brume — IA/data */
    --bg-section-fresh: #EEF5EE;/* Sauge Clair — succès */
    --bg-section-soft: #F7EDE5; /* Pêche Poudrée — en cours */

    /* Topbar — bg + alpha pour effet frosted glass + backdrop-filter
       Override dark mode dans 06-dark.css */
    --bg-topbar: rgba(251, 248, 243, 0.85);

    /* ====================================================================
       INK (texte) — 3 niveaux GMAIA
       Source : UX spec ligne 595-598 (contrastes validés AAA / AAA / AA Large)
       ==================================================================== */
    --ink: #1F2133;       /* Encre Plume — principal, 15.8:1 AAA */
    --ink-soft: #555870;  /* Plume Soft — secondaire, 7.2:1 AAA */
    --ink-faded: #8F92A6; /* Plume Faded — tertiaire/labels, 3.5:1 AA Large */

    /* ====================================================================
       SIGNALÉTIQUE — une couleur = un sens
       Source : UX spec ligne 600-605
       Chaque sig dispose de 3 variants : pure / bg (tint) / text (dark contrast AAA)
       ==================================================================== */

    --sig-ok: #22A06B;
    --sig-ok-bg: #E6F4EE;
    --sig-ok-text: #166A47;

    --sig-warn: #D97706;
    --sig-warn-bg: #FBEFE0;
    --sig-warn-text: #8C4D05;

    --sig-alert: #DC2626;
    --sig-alert-bg: #FBE5E5;
    --sig-alert-text: #8F1818;

    --sig-ai: var(--accent-500); /* AI utilise Cyan ESDI = cohérence */
    --sig-ai-bg: #E3F4F7;
    --sig-ai-text: #1F6772;

    /* ====================================================================
       LINES — bordure universelle 1px
       ==================================================================== */
    --line: #EAE4DA; /* Brume Sable */

    /* ====================================================================
       ALIAS de compatibilité (2026-07-14) — des composants historiques référencent des
       tokens qui n'existaient pas (--border, --text, --muted, --bg-subtle…) avec un
       FALLBACK CLAIR codé en dur → cassait le dark mode (bloc blanc / texte invisible).
       On les mappe sur les vrais tokens : var() est résolu dynamiquement → correct en
       CLAIR **et** en SOMBRE (06-dark.css redéfinit --line/--ink/--bg-section-*).
       ==================================================================== */
    --border: var(--line);
    --border-soft: var(--line);
    --border-faded: var(--line);
    --line-subtle: var(--line);
    --text: var(--ink);
    --ink-strong: var(--ink);
    --ink-stronger: var(--ink);
    --muted: var(--ink-faded);
    --text-muted: var(--ink-faded);
    --bg-subtle: var(--bg-section-cool);
    --bg-muted: var(--bg-section-cool);
    --bg-faded: var(--bg-section-cool);
    --surface: var(--bg-card);
    --card: var(--bg-card);
    --danger: var(--sig-alert);

    /* ====================================================================
       SHADOWS — low-opacity cool-toned + focus rings
       ==================================================================== */
    --shadow-sm: 0 1px 2px rgba(31, 33, 51, 0.05);
    --shadow-md: 0 4px 8px rgba(31, 33, 51, 0.06), 0 1px 2px rgba(31, 33, 51, 0.04);
    --shadow-lg: 0 10px 24px rgba(31, 33, 51, 0.08), 0 2px 6px rgba(31, 33, 51, 0.05);

    /* Focus rings — cyan pour accent positif, rouge pour erreurs */
    --shadow-focus: 0 0 0 3px rgba(63, 190, 204, 0.2);        /* Cyan ESDI 20% */
    --shadow-focus-alert: 0 0 0 3px rgba(220, 38, 38, 0.2);   /* Sig alert 20% */

    /* ====================================================================
       SPACING — échelle 4px stricte
       Source : UX spec ligne 657-672 (règle absolue : aucune valeur arbitraire)
       ==================================================================== */
    --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;

    /* ====================================================================
       RADII — échelle radii
       Source : UX spec ligne 684-685
       ==================================================================== */
    --radius-xs: 6px;
    --radius-sm: 8px;    /* inputs */
    --radius-md: 12px;   /* cards */
    --radius-lg: 16px;
    --radius-pill: 100px;/* buttons + badges */

    /* ====================================================================
       ANIMATIONS — durations + easing
       Source : UX spec ligne 694-698
       ==================================================================== */
    --duration-micro: 150ms;  /* hover, focus */
    --duration-short: 200ms;  /* slide, fade */
    --duration-medium: 300ms; /* drawer, modal */
    --duration-pulse: 2000ms; /* employé actif respire */
    --ease-default: cubic-bezier(0.2, 0, 0, 1); /* calme, jamais bouncy */

    /* ====================================================================
       LAYOUT — shell dimensions
       Source : UX spec ligne 687-691
       ==================================================================== */
    --topbar-height: 64px;
    --sidebar-width: 248px;
    --sidebar-width-collapsed: 64px;
    --content-max-width: 1280px;
    --landing-max-width: 1440px;

    /* ====================================================================
       TYPOGRAPHY — font families (centralisé ici, jamais en double dans 02)
       ==================================================================== */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
