/**
 * Design System — Tokens (CSS variables)
 *
 * Toutes les valeurs réutilisables vivent ici. Pour rebrander, changer une
 * teinte, ajuster un rayon → modifier ces variables, le reste suit.
 *
 * Palette alignée sur la landing (slate + blue) pour cohérence de marque.
 */

:root {
    /* Couleurs primaires (accent / liens / CTA) */
    --color-primary: #2563eb;            /* blue-600 */
    --color-primary-hover: #1d4ed8;      /* blue-700 */
    --color-primary-soft: #eff6ff;       /* blue-50 — fond pill actif */
    --color-primary-soft-text: #1d4ed8;  /* blue-700 — texte sur soft */

    /* Surfaces et fonds */
    --color-bg: #f8fafc;                 /* slate-50 — fond app */
    --color-surface: #ffffff;            /* cards / sidebar */
    --color-surface-hover: #f1f5f9;      /* slate-100 — hover items */
    --color-surface-muted: #f8fafc;      /* idem bg, neutre */

    /* Bordures */
    --color-border: #e2e8f0;             /* slate-200 — bordure standard */
    --color-border-strong: #cbd5e1;      /* slate-300 — input/focus */

    /* Texte */
    --color-text: #334155;               /* slate-700 — texte courant */
    --color-text-strong: #0f172a;        /* slate-900 — titres */
    --color-text-muted: #64748b;         /* slate-500 — secondaire */
    --color-text-soft: #94a3b8;          /* slate-400 — tertiaire */
    --color-text-on-primary: #ffffff;
    --color-text-on-dark: #ffffff;

    /* États */
    --color-danger: #dc2626;             /* red-600 */
    --color-danger-soft: #fef2f2;        /* red-50 */
    --color-danger-soft-text: #b91c1c;   /* red-700 */
    --color-success: #16a34a;            /* green-600 */
    --color-success-soft: #f0fdf4;       /* green-50 */

    /* Marque */
    --color-brand-dark: #0f172a;         /* slate-900 — logo, badges sombres */

    /* Typographie */
    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Espacement (échelle de 4px) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* Rayons */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* Ombres */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -4px rgba(15, 23, 42, 0.05);

    /* Transitions */
    --transition-fast: 100ms ease;
    --transition: 150ms ease;

    /* Layout admin */
    --sidebar-width: 240px;
    --header-height: 64px;
}