/* ==========================================================
   Design tokens — Agent Energetique CRM
   Palette : light editorial, accent vert energie. Aucun violet.
   ========================================================== */
:root {
    /* Surfaces */
    --color-bg:           #FBFBFA;
    --color-surface:      #FFFFFF;
    --color-surface-alt:  #F4F6F8;
    --color-border:       #E4E7EB;
    --color-border-soft:  #EFF1F4;

    /* Texte */
    --color-text:         #0F172A;
    --color-text-muted:   #64748B;
    --color-text-soft:    #94A3B8;
    --color-text-on-accent: #FFFFFF;

    /* Accent vert energie */
    --color-accent:       #10B981;
    --color-accent-dark:  #059669;
    --color-accent-darker:#047857;
    --color-accent-soft:  #ECFDF5;
    --color-accent-bord:  #A7F3D0;

    /* Etat */
    --color-info:         #0EA5E9;
    --color-info-soft:    #E0F2FE;
    --color-warning:      #F59E0B;
    --color-warning-soft: #FEF3C7;
    --color-danger:       #EF4444;
    --color-danger-soft:  #FEE2E2;
    --color-success:      #22C55E;
    --color-success-soft: #DCFCE7;

    /* Typographie */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    --fs-xs:   0.75rem;
    --fs-sm:   0.8125rem;
    --fs-base: 0.9375rem;
    --fs-md:   1rem;
    --fs-lg:   1.125rem;
    --fs-xl:   1.375rem;
    --fs-2xl:  1.75rem;
    --fs-3xl:  2.25rem;

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

    --lh-tight:   1.2;
    --lh-normal:  1.5;
    --lh-relaxed: 1.7;

    --tracking-tight: -0.015em;
    --tracking-normal: 0;
    --tracking-wide: 0.04em;

    /* Espacement (base 4px) */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-7:  28px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* Rayons */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-full: 9999px;

    /* Ombres */
    --shadow-xs: 0 1px 1px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04);

    --shadow-focus: 0 0 0 3px rgba(16, 185, 129, 0.25);

    /* Animation */
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast:   150ms;
    --duration-normal: 250ms;
    --duration-slow:   400ms;

    /* Layout */
    --sidebar-width: 248px;
    --topbar-height: 64px;
    --container-max: 1320px;

    /* Z-index */
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-fixed:    300;
    --z-modal:    400;
    --z-toast:    500;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}