/* ============================================================
   Design Tokens — Dark Mode Dashboard
   PRM France Travail v0.2
   ============================================================ */

:root {
    /* --- Backgrounds --- */
    --bg-body: #0f1117;
    --bg-card: #1a1d2e;
    --bg-elevated: #232738;
    --bg-sidebar: #111427;
    --bg-sidebar-end: #0c0e1a;
    --bg-input: #232738;
    --bg-hover: rgba(255,255,255,0.04);
    --bg-active: rgba(79,109,255,0.12);

    /* --- Primary Accent --- */
    --primary: #4f6dff;
    --primary-hover: #6c8aff;
    --primary-active: #3a56e0;
    --primary-muted: rgba(79,109,255,0.15);

    /* --- Semantic Colors --- */
    --success: #34d399;
    --success-muted: rgba(52,211,153,0.15);
    --warning: #fbbf24;
    --warning-muted: rgba(251,191,36,0.15);
    --error: #f87171;
    --error-muted: rgba(248,113,113,0.15);
    --info: #22d3ee;
    --info-muted: rgba(34,211,238,0.15);

    /* --- Text --- */
    --text-primary: #f0f2f5;
    --text-secondary: #b0b4c3;
    --text-muted: #8b8fa3;
    --text-dimmed: #5a5f75;
    --text-inverse: #0f1117;

    /* --- Borders --- */
    --border: rgba(255,255,255,0.08);
    --border-hover: rgba(255,255,255,0.14);
    --border-focus: var(--primary);
    --border-strong: rgba(255,255,255,0.18);

    /* --- Famille Colors (A-I) --- */
    --famille-a: #3b7dd8;
    --famille-b: #34d399;
    --famille-c: #f59e0b;
    --famille-d: #a78bfa;
    --famille-e: #38bdf8;
    --famille-f: #fb923c;
    --famille-g: #2dd4bf;
    --famille-h: #f87171;
    --famille-i: #fbbf24;

    /* --- Typography --- */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    --text-xs: 0.6875rem;   /* 11px */
    --text-sm: 0.8125rem;   /* 13px */
    --text-base: 0.875rem;  /* 14px */
    --text-md: 0.9375rem;   /* 15px */
    --text-lg: 1.0625rem;   /* 17px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.5rem;     /* 24px */
    --text-3xl: 2rem;       /* 32px */

    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-loose: 1.75;

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* --- Spacing (4px base) --- */
    --space-0: 0;
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-7: 2rem;      /* 32px */
    --space-8: 2.5rem;    /* 40px */
    --space-9: 3rem;      /* 48px */
    --space-10: 4rem;     /* 64px */

    /* --- Radius --- */
    --radius-sm: 4px;
    --radius: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* --- Shadows --- */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow: 0 4px 12px rgba(0,0,0,0.35);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.4);
    --shadow-glow: 0 0 20px rgba(79,109,255,0.2);

    /* --- Transitions --- */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 400ms;

    /* --- Layout --- */
    --sidebar-width: 260px;
    --header-height: 60px;
    --content-max-width: 1400px;

    /* --- Z-index --- */
    --z-sidebar: 100;
    --z-header: 90;
    --z-modal-backdrop: 200;
    --z-modal: 210;
    --z-toast: 300;
    --z-dropdown: 150;
}

/* ============================================================
   Light Mode Override
   ============================================================ */
[data-theme="light"] {
    --bg-body: #f4f5f7;
    --bg-card: #ffffff;
    --bg-elevated: #f0f1f3;
    --bg-sidebar: #ffffff;
    --bg-sidebar-end: #f7f8fa;
    --bg-input: #ffffff;
    --bg-hover: rgba(0,0,0,0.04);
    --bg-active: rgba(79,109,255,0.08);

    --primary: #3b56cc;
    --primary-hover: #2e46b0;
    --primary-active: #263a96;
    --primary-muted: rgba(59,86,204,0.1);

    --success: #16a34a;
    --success-muted: rgba(22,163,74,0.1);
    --warning: #d97706;
    --warning-muted: rgba(217,119,6,0.1);
    --error: #dc2626;
    --error-muted: rgba(220,38,38,0.1);
    --info: #0891b2;
    --info-muted: rgba(8,145,178,0.1);

    --text-primary: #1a1d2e;
    --text-secondary: #4b5063;
    --text-muted: #6b7085;
    --text-dimmed: #9ca0b0;
    --text-inverse: #ffffff;

    --border: rgba(0,0,0,0.1);
    --border-hover: rgba(0,0,0,0.18);
    --border-focus: var(--primary);
    --border-strong: rgba(0,0,0,0.2);

    --famille-a: #2563eb;
    --famille-b: #16a34a;
    --famille-c: #d97706;
    --famille-d: #7c3aed;
    --famille-e: #0284c7;
    --famille-f: #ea580c;
    --famille-g: #0d9488;
    --famille-h: #dc2626;
    --famille-i: #ca8a04;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --shadow-glow: 0 0 20px rgba(59,86,204,0.15);
}