/* css/base/theme.css */

/* =========================================
   1. VARIABLES & THÈMES
   ========================================= */
:root {
    --font-primary: 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Espacements globaux */
    --nav-height: 70px;
    --page-top-space: 2rem;

    /* --- THÈME CLAIR --- */
    --color-bg: #e8edf2;
    --color-card-bg: #f4f6f8;

    /* Échelle de texte sémantique */
    --color-text-dark: #334155;
    --color-text-muted: #5f6f82;
    --color-text-soft: #758395;
    --color-text-faint: #8f9aa7;

    /* Niveaux de surface */
    --color-surface-1: #f4f6f8;
    --color-surface-2: #edf1f4;
    --color-surface-3: #e3e9ee;

    --color-border: #d1d9e2;
    --color-border-subtle: #dce2e8;
    --color-input-bg: var(--color-surface-2);
    --color-hover-bg: var(--color-surface-3);

    /* Variables Bootstrap synchronisées */
    --bs-body-bg: var(--color-bg);
    --bs-body-color: var(--color-text-dark);

    /* VARIABLES GRAPHIQUES (CLAIR) */
    --color-chart-text: #3b4858;
    --color-chart-grid: rgba(51, 65, 85, 0.07);

    /* Navbar Light */
    --nav-bg: #f1f4f7;
    --nav-bg-gradient: var(--nav-bg);
    --nav-border-bottom: 1px solid var(--color-border-subtle);
    --nav-active-bg: color-mix(in srgb, var(--color-primary) 10%, var(--color-card-bg));
    --nav-active-text: #245d69;
    --nav-active-border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-border-subtle));

    /* Gradients KPI */
    --grad-revenu: linear-gradient(135deg, #1f9d73 0%, #14785a 100%);
    --grad-depense: linear-gradient(135deg, #d45b55 0%, #b33b37 100%);
    --grad-epargne: linear-gradient(135deg, #3f67e8 0%, #2e4fb9 100%);

    /* Couleurs unies */
    --color-revenu: #1f9d73;
    --color-depense: #d45b55;
    --color-epargne: #3f67e8;
    --color-expense-amount: #000000;

    /* Ombres */
    --shadow-sm: 0 7px 18px rgba(51, 65, 85, 0.035);
    --shadow-md: 0 12px 26px rgba(51, 65, 85, 0.055);
    --shadow-hover: 0 16px 34px rgba(51, 65, 85, 0.075);

    --card-radius: 14px;
    --transition-speed: 0.18s;
    --color-primary: #3f8fa3;
    --color-primary-strong: #2f7384;
    --color-secondary: #3f67e8;
    --glass-bg: rgba(244, 246, 248, 0.9);
    --glass-border: rgba(209, 217, 226, 0.95);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.42);
    --invert-icon: 0;
}

html {
    color-scheme: light;
    background-color: var(--color-bg);
}

/* --- THÈME SOMBRE --- */
html[data-theme="dark"],
html[data-bs-theme="dark"],
[data-theme="dark"] {
    --color-bg: #10151c;
    --color-card-bg: #171e27;

    /* Échelle de texte sémantique */
    --color-text-dark: #edf2f7;
    --color-text-muted: #b7c2d0;
    --color-text-soft: #9ba8b8;
    --color-text-faint: #7f8b9c;

    /* Niveaux de surface */
    --color-surface-1: #171e27;
    --color-surface-2: #1d2631;
    --color-surface-3: #253140;

    --color-border: #2e3a49;
    --color-border-subtle: #273342;
    --color-input-bg: var(--color-surface-2);
    --color-hover-bg: var(--color-surface-3);

    /* Variables Bootstrap synchronisées */
    --bs-body-bg: var(--color-bg);
    --bs-body-color: var(--color-text-dark);

    /* Variables graphiques */
    --color-chart-text: #dce5ee;
    --color-chart-grid: rgba(220, 229, 238, 0.08);

    /* Navbar sombre */
    --nav-bg: #131a22;
    --nav-bg-gradient: var(--nav-bg);
    --nav-border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    --nav-active-bg: rgba(63, 143, 163, 0.16);
    --nav-active-text: #8dd1df;
    --nav-active-border: 1px solid rgba(141, 209, 223, 0.22);

    --shadow-sm: 0 10px 24px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.26);
    --shadow-hover: 0 18px 42px rgba(0, 0, 0, 0.32);

    --color-primary: #75c4d3;
    --color-primary-strong: #8dd1df;
    --color-secondary: #8ea9ff;
    --color-revenu: #4fc197;
    --color-depense: #f07a74;
    --color-epargne: #8ea9ff;
    --color-expense-amount: #ffffff;
    --glass-bg: rgba(23, 30, 39, 0.88);
    --glass-border: rgba(54, 68, 84, 0.9);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --invert-icon: 1;
}

html[data-theme="dark"],
html[data-bs-theme="dark"] {
    color-scheme: dark;
    background-color: var(--color-bg);
}

@media (max-width: 991.98px) {
    :root {
        --page-top-space: 1.5rem;
    }
}