/* =========================================================
   AGAPE SHOP — DARK MODE SYSTEM
   ========================================================= */

/* Mode Sombre activé manuellement via attribut ou classe */
[data-theme="dark"],
body.dark-mode {
    --color-primary: #f8fafc;
    --color-primary-hover: #e2e8f0;
    --color-accent: #fb7185;
    --color-accent-hover: #f43f5e;

    --color-bg: #090d16;
    --color-surface: #111827;
    --color-surface-subtle: #1f2937;
    --color-text-main: #f3f4f6;
    --color-text-muted: #9ca3af;
    --color-border: #374151;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
}

/* Prise en charge automatique des préférences système si aucune classe explicite */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-primary: #f8fafc;
        --color-primary-hover: #e2e8f0;
        --color-accent: #fb7185;
        --color-accent-hover: #f43f5e;

        --color-bg: #090d16;
        --color-surface: #111827;
        --color-surface-subtle: #1f2937;
        --color-text-main: #f3f4f6;
        --color-text-muted: #9ca3af;
        --color-border: #374151;
    }
}