/* ===========================================
   Design Tokens
   =========================================== */
:root {
    /* Indique au browser que le document supporte light + dark.
     * Permet aux widgets natifs (select, scrollbar, date picker, etc.)
     * et à -internal-light-dark-color() de basculer correctement selon
     * la préférence OS. */
    color-scheme: light dark;

    /* Typography */
    --ex-font: 'Plus Jakarta Sans', system-ui, sans-serif;
    --ex-mono: 'JetBrains Mono', monospace;

    /* Amber (brand — jaune/or, associations) */
    --ex-amber-900: #78350f;
    --ex-amber-800: #92400e;
    --ex-amber-700: #b45309;
    --ex-amber-600: #d97706;
    --ex-amber-500: #f59e0b;
    --ex-amber-400: #ffbb09;
    --ex-amber-300: #fcd34d;
    --ex-amber-200: #fde68a;
    --ex-amber-100: #fef3c7;
    --ex-amber-50: #fffbeb;

    /* Stone (neutral) */
    --ex-stone-900: #1c1917;
    --ex-stone-800: #292524;
    --ex-stone-700: #3d3836;
    --ex-stone-600: #4a4543;
    --ex-stone-500: #6b6560;
    --ex-stone-400: #a8a29e;
    --ex-stone-300: #d6d3d1;
    --ex-stone-200: #e7e5e4;
    --ex-stone-100: #f5f5f4;
    --ex-stone-50: #fafaf9;

    /* Green (actions positives, état actif) */
    --ex-green-900: #14532d;
    --ex-green-700: #15803d;
    --ex-green-500: #22c55e;
    --ex-green-400: #4ade80;
    --ex-green-300: #86efac;
    --ex-green-200: #bbf7d0;
    --ex-green-100: #dcfce7;
    --ex-green-50: #f0fdf4;

    /* Indigo (bleu — entreprises) */
    --ex-indigo-100: #e0e7ff;
    --ex-indigo-200: #c7d2fe;
    --ex-indigo-300: #a5b4fc;
    --ex-indigo-700: #3730a3;
    --ex-indigo-800: #312e81;

    /* Rose (pink — collectivités) */
    --ex-rose-100: #ffe4e6;
    --ex-rose-200: #fecdd3;
    --ex-rose-300: #fda4af;
    --ex-rose-700: #be185d;
    --ex-rose-800: #9f1239;

    /* Red (danger / erreur) */
    --ex-red-50: #fef2f2;
    --ex-red-100: #fee2e2;
    --ex-red-200: #fecaca;
    --ex-red-300: #fca5a5;
    --ex-red-400: #f87171;
    --ex-red: #fe5c5c;
    --ex-red-900: #991b1b;

    /* Semantic */
    --ex-accent: #ff9100;
    --ex-link: #335e89;
    --ex-link-hover: #1e3a5f;
    --ex-link-action: #b45309;
    --ex-link-action-hover: #92400e;
    --ex-surface: #ffffff;
    --ex-bg: #fdf6ec;
    --ex-text-on-accent: #1c1917;
    --ex-text-on-green: #ffffff;

    /* Effects */
    --ex-shadow-sm: 0 1px 2px rgba(28,25,23,0.05);
    --ex-shadow-md: 0 4px 12px rgba(28,25,23,0.08);
    --ex-ease: cubic-bezier(0.25,0.46,0.45,0.94);
    --ex-focus-ring: 0 0 0 3px rgba(255,187,9,0.12);
    --ex-focus-ring-red: 0 0 0 3px rgba(254,92,92,0.15);
    --ex-hover-shadow: 0 2px 6px rgba(255,187,9,0.2);
    --ex-shadow-golden: 0 4px 12px rgba(255,187,9,0.2);
    --ex-focus-ring-green: 0 0 0 3px rgba(34,197,94,0.2);
    --ex-shadow-green: 0 4px 12px rgba(34,197,94,0.2);
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Surface */
        --ex-surface: #1a1a1a;
        --ex-bg: #111;

        /* Stone inverted */
        --ex-stone-50: #1e1e1e;
        --ex-stone-100: #252525;
        --ex-stone-200: #3a3a3a;
        --ex-stone-300: #555;
        --ex-stone-400: #777;
        --ex-stone-500: #999;
        --ex-stone-600: #bbb;
        --ex-stone-700: #ddd;
        --ex-stone-800: #ececec;
        --ex-stone-900: #f8f8f8;

        /* Light backgrounds: transparent on dark surfaces */
        --ex-amber-50: rgba(255,187,9,0.06);
        --ex-amber-100: rgba(255,187,9,0.12);
        --ex-amber-200: rgba(255,187,9,0.18);
        --ex-green-100: rgba(34,197,94,0.12);
        --ex-green-200: rgba(34,197,94,0.18);
        --ex-indigo-100: rgba(99,102,241,0.1);
        --ex-indigo-200: rgba(99,102,241,0.18);
        --ex-rose-100: rgba(251,113,133,0.1);
        --ex-rose-200: rgba(251,113,133,0.18);
        --ex-red-50: rgba(254,92,92,0.08);
        --ex-red-100: rgba(254,92,92,0.15);
        --ex-red-200: rgba(254,92,92,0.25);

        /* Text on dark backgrounds — variantes -700/-800/-900 inversées
           pour rester lisibles sur surface sombre. Hiérarchie de contraste :
           plus le numéro est grand, plus la couleur est claire/contrastée. */
        --ex-red-900: #fca5a5;
        --ex-amber-700: #fcd34d;
        --ex-amber-800: #fde68a;
        --ex-amber-900: #fef3c7;
        --ex-green-700: #86efac;
        --ex-green-900: #dcfce7;
        --ex-indigo-700: #a5b4fc;
        --ex-indigo-800: #c7d2fe;
        --ex-rose-700: #fda4af;
        --ex-rose-800: #fecdd3;

        /* Links */
        --ex-link: #9fc7ef;
        --ex-link-hover: #c4ddf5;
        --ex-link-action: var(--ex-amber-300);
        --ex-link-action-hover: var(--ex-amber-200);

        /* Effects */
        --ex-shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
        --ex-shadow-md: 0 4px 12px rgba(0,0,0,0.4);
        --ex-focus-ring: 0 0 0 3px rgba(255,187,9,0.2);
        --ex-focus-ring-red: 0 0 0 3px rgba(254,92,92,0.25);
        --ex-hover-shadow: 0 2px 6px rgba(255,187,9,0.3);
        --ex-shadow-golden: 0 4px 12px rgba(255,187,9,0.3);
        --ex-focus-ring-green: 0 0 0 3px rgba(34,197,94,0.3);
        --ex-shadow-green: 0 4px 12px rgba(34,197,94,0.3);
    }
}