/* Variables sémantiques de thème. Les vues utilisent des classes Tailwind
   à valeur arbitraire (ex: bg-[var(--color-accent)]) qui référencent ces
   variables, permettant de changer de thème sans recompiler le CSS. */

:root {
    color-scheme: light;

    --color-bg: #f8fafc;
    --color-surface: #ffffff;
    --color-border: #e2e8f0;
    --color-text: #0f172a;
    --color-text-muted: #64748b;
    --color-text-subtle: #94a3b8;
    --color-track: #f1f5f9;

    --color-danger: #dc2626;
    --color-danger-hover: #991b1b;
    --color-danger-solid: #dc2626;
    --color-danger-solid-hover: #b91c1c;

    --color-success-bg: #ecfdf5;
    --color-success-text: #047857;
    --color-success-border: #a7f3d0;

    --color-error-bg: #fef2f2;
    --color-error-text: #b91c1c;
    --color-error-border: #fecaca;

    /* Palette "indigo" (défaut) */
    --color-accent: #4f46e5;
    --color-accent-hover: #4338ca;
    --color-accent-contrast: #ffffff;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --color-bg: #0f172a;
        --color-surface: #1e293b;
        --color-border: #334155;
        --color-text: #f1f5f9;
        --color-text-muted: #94a3b8;
        --color-text-subtle: #64748b;
        --color-track: #334155;

        --color-danger: #f87171;
        --color-danger-hover: #fca5a5;
        --color-danger-solid: #dc2626;
        --color-danger-solid-hover: #b91c1c;

        --color-success-bg: rgba(16, 185, 129, .12);
        --color-success-text: #34d399;
        --color-success-border: rgba(52, 211, 153, .35);

        --color-error-bg: rgba(239, 68, 68, .12);
        --color-error-text: #f87171;
        --color-error-border: rgba(248, 113, 113, .35);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --color-bg: #0f172a;
    --color-surface: #1e293b;
    --color-border: #334155;
    --color-text: #f1f5f9;
    --color-text-muted: #94a3b8;
    --color-text-subtle: #64748b;
    --color-track: #334155;

    --color-danger: #f87171;
    --color-danger-hover: #fca5a5;
    --color-danger-solid: #dc2626;
    --color-danger-solid-hover: #b91c1c;

    --color-success-bg: rgba(16, 185, 129, .12);
    --color-success-text: #34d399;
    --color-success-border: rgba(52, 211, 153, .35);

    --color-error-bg: rgba(239, 68, 68, .12);
    --color-error-text: #f87171;
    --color-error-border: rgba(248, 113, 113, .35);
}

/* Palettes de couleur (accent), indépendantes du mode clair/sombre */
:root[data-palette="emerald"] { --color-accent: #059669; --color-accent-hover: #047857; }
:root[data-palette="rose"]    { --color-accent: #e11d48; --color-accent-hover: #be123c; }
:root[data-palette="amber"]   { --color-accent: #d97706; --color-accent-hover: #b45309; }
:root[data-palette="sky"]     { --color-accent: #0284c7; --color-accent-hover: #0369a1; }

body {
    transition: background-color .15s ease, color .15s ease;
}

/* Switcher de thème */
[data-mode].theme-active {
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    border-color: var(--color-accent);
}

[data-palette].theme-active {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
}