/* ════════════════════════════════
   CSS VARIABLES — Design tokens
   Loaded first, inherited by all CSS files.
════════════════════════════════ */

:root {
    /* ── Brand — Primary ── */
    --color-primary: #5B4BDB;
    --color-primary-light: #7B6FE8;
    --color-primary-dark: #3D2FB8;
    --color-primary-glow: rgba(91, 75, 219, 0.15);

    /* ── Legacy aliases (used by client-space) ── */
    --accent: #5B4BDB;
    --accent2: #7B6FE8;

    /* ── Semantic ── */
    --green: #5ecfae;
    --red: #FF6B8A;
    --orange: #FFB86C;
    --pink: #FF7EB3;

    /* ── Text ── */
    --color-text-primary: #0F0E1A;
    --color-text-secondary: #6B6880;
    --text: #0F0E1A;
    --muted: #6B6880;

    /* ── Background ── */
    --color-bg: #FFFFFF;
    --color-bg-subtle: #F8F7FF;
    --bg: #F8F7FF;

    /* ── Borders ── */
    --color-border: rgba(91, 75, 219, 0.15);

    /* ── Glassmorphism ──
       PERF : le frosted-glass est rendu SANS backdrop-filter sur les éléments
       toujours visibles/nombreux (cards, sidebars, panneaux). `backdrop-filter`
       re-floute en continu le fond (dont les blobs animés) à chaque frame →
       repaint permanent très coûteux sur Mac. On neutralise donc `--blur`
       (utilisé par tous ces éléments via `var(--blur)`) et on compense par un
       fond plus opaque : visuellement quasi identique (frosted blanc), mais le
       simple composite translucide est ~gratuit. Les modales/overlays gardent
       leur blur (valeur littérale `blur(Npx)`, à la demande → aucun coût continu). */
    --glass-bg: rgba(255, 255, 255, 0.9);
    --glass-border: rgba(255, 255, 255, 0.85);
    --glass-shadow: 0 8px 48px rgba(91, 75, 219, 0.08);
    --blur: none;

    /* ── Inputs ── */
    --input-bg: rgba(255, 255, 255, 0.7);
    --input-border: rgba(91, 75, 219, 0.18);
    --input-radius: 10px;

    /* ── Layout ── */
    --radius: 16px;
    --radius-sm: 12px;
    --radius-xs: 8px;

    /* ── Typography ── */
    --font-display: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* ── Gradients ── */
    --gradient-accent: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    --gradient-green: linear-gradient(135deg, var(--green), var(--color-primary));
    --gradient-red: linear-gradient(135deg, var(--red), var(--pink));

    /* ── Form ── */
    --required: #e06b8a;

    /* ── Admin sidebar ── */
    --sw: 240px;
}