:root {

    /* Semantic application theme */
    --app-bg-page: #F7F9FC;
    --app-bg-surface: #FFFFFF;
    --app-bg-elevated: #FFFFFF;
    --app-text-primary: #2B282A;
    --app-text-secondary: #6F6B70;
    --app-text-muted: #8B858D;
    --app-border: #E6E2E4;
    --app-divider: #EEE9EC;
    --app-control-bg: #FFFFFF;
    --app-hover-bg: #FAF8F9;
    --app-overlay: rgba(33, 23, 30, 0.55);
    --app-accent: #A72A68;
    --app-accent-strong: #C2185B;
    --app-accent-soft: #F6E4EF;
    --app-accent-border: #EFBFD1;
    --app-shadow-sm: 0 2px 8px rgba(30, 24, 28, 0.05);
    --app-shadow-md: 0 8px 22px rgba(30, 24, 28, 0.08);
    --app-kpi-icon-size: 34px;
    --app-kpi-icon-radius: 10px;
    --app-kpi-icon-font-size: 13px;
    --app-kpi-icon-gap: 14px;
    --app-kpi-icon-bg: var(--app-accent-soft);
    --app-kpi-icon-color: var(--app-accent);
    --app-kpi-icon-shadow: 0 7px 14px rgba(130, 47, 88, 0.08);
    --app-kpi-icon-hover-shadow: 0 10px 18px rgba(130, 47, 88, 0.13);
    --app-chart-label: #777178;
    --app-chart-grid: #EAE6E8;
    --app-chart-tooltip-bg: #2B282A;
    --app-chart-tooltip-text: #FFFFFF;

    /* Semantic state surfaces. Values preserve the existing light palette. */
    --app-status-success-bg: #ECFDF3;
    --app-status-success-border: #D1FADF;
    --app-status-success-text: #027A48;
    --app-status-warning-bg: #FFFAEB;
    --app-status-warning-border: #FDE68A;
    --app-status-warning-text: #B54708;
    --app-status-info-bg: #EFF8FF;
    --app-status-info-border: #D1E9FF;
    --app-status-info-text: #175CD3;
    --app-status-danger-bg: #FEF3F2;
    --app-status-danger-border: #FECDCA;
    --app-status-danger-text: #B42318;
    --app-status-purple-bg: #F5F3FF;
    --app-status-purple-border: #E9D7FE;
    --app-status-purple-text: #6941C6;
    --app-status-neutral-bg: #F4F3F5;
    --app-status-neutral-border: #E4E7EC;
    --app-status-neutral-text: #475467;

    /* Colors */
    --primary-color: #1E4D3A;
    --primary-dark: #173D2E;
    --primary-light: #EDF5F1;

    --background-color: var(--app-bg-page);
    --surface-color: var(--app-bg-surface);

    --text-primary: var(--app-text-primary);
    --text-secondary: var(--app-text-secondary);
    --text-muted: var(--app-text-muted);

    --success-color: #1F7A4F;
    --warning-color: #D97706;
    --danger-color: #C0392B;
    --border-color: var(--app-border);

    /* Layout */
    --sidebar-width: 250px;
    --topbar-height: 70px;

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    /* Shadow */
    --shadow-sm: var(--app-shadow-sm);
    --shadow-md: var(--app-shadow-md);

    /* Font */
    --font-family: "DM Sans", sans-serif;

    /* Transition */
    --transition: .3s ease;
}

/* ==========================================
   SETTINGS / GLOBAL THEME TOKENS
   ========================================== */

:root {
    --settings-bg-page: var(--app-bg-page);
    --settings-bg-surface: var(--app-bg-surface);
    --settings-bg-sidebar: #211A20;
    --settings-text-primary: var(--app-text-primary);
    --settings-text-secondary: var(--app-text-secondary);
    --settings-border-color: var(--app-border);
    --settings-accent: var(--app-accent-strong);
    --settings-accent-soft: var(--app-accent-soft);
    --settings-hover-neutral: var(--app-hover-bg);
}

[data-theme="dark"] {
    --app-bg-page: #171519;
    --app-bg-surface: #221F23;
    --app-bg-elevated: #2A262B;
    --app-text-primary: #F5F1F3;
    --app-text-secondary: #C8C0C5;
    --app-text-muted: #9F969D;
    --app-border: #403940;
    --app-divider: #353036;
    --app-control-bg: #29252A;
    --app-hover-bg: #312C32;
    --app-overlay: rgba(8, 7, 9, 0.72);
    --app-accent: #E08AB0;
    --app-accent-strong: #E58AB0;
    --app-accent-soft: #38252F;
    --app-accent-border: #684456;
    --app-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.22);
    --app-shadow-md: 0 10px 28px rgba(0, 0, 0, 0.32);
    --app-kpi-icon-shadow: 0 7px 14px rgba(0, 0, 0, 0.2);
    --app-kpi-icon-hover-shadow: 0 10px 18px rgba(0, 0, 0, 0.28);
    --app-chart-label: #B8AFB5;
    --app-chart-grid: #403940;
    --app-chart-tooltip-bg: #F5F1F3;
    --app-chart-tooltip-text: #221F23;

    --app-status-success-bg: #1D352B;
    --app-status-success-border: #31634E;
    --app-status-success-text: #75D5A7;
    --app-status-warning-bg: #3A2D1D;
    --app-status-warning-border: #705229;
    --app-status-warning-text: #F4BD62;
    --app-status-info-bg: #1E3043;
    --app-status-info-border: #355D80;
    --app-status-info-text: #7DB8F2;
    --app-status-danger-bg: #3B2425;
    --app-status-danger-border: #743C3C;
    --app-status-danger-text: #F29B93;
    --app-status-purple-bg: #302746;
    --app-status-purple-border: #5C4F86;
    --app-status-purple-text: #B9A7FF;
    --app-status-neutral-bg: #2A262B;
    --app-status-neutral-border: #403940;
    --app-status-neutral-text: #C8C0C5;

    --primary-color: #6BB798;
    --primary-dark: #8BC9AF;
    --primary-light: #263A32;
}

/* ==========================================
   DARK-MODE GENERATED CHART SURFACES
   ========================================== */

html[data-theme="dark"] .apexcharts-tooltip,
html[data-theme="dark"] .apexcharts-tooltip-title,
html[data-theme="dark"] .apexcharts-xaxistooltip,
html[data-theme="dark"] .apexcharts-yaxistooltip,
html[data-theme="dark"] .apexcharts-menu {
    border-color: var(--app-border) !important;
    background: var(--app-bg-elevated) !important;
    color: var(--app-text-primary) !important;
    box-shadow: var(--app-shadow-md) !important;
}

html[data-theme="dark"] .apexcharts-tooltip-title {
    border-bottom-color: var(--app-divider) !important;
}

html[data-theme="dark"] .apexcharts-xaxistooltip::before,
html[data-theme="dark"] .apexcharts-xaxistooltip::after {
    border-bottom-color: var(--app-bg-elevated) !important;
}

html[data-theme="dark"] .apexcharts-yaxistooltip::before,
html[data-theme="dark"] .apexcharts-yaxistooltip::after {
    border-left-color: var(--app-bg-elevated) !important;
    border-right-color: var(--app-bg-elevated) !important;
}

/* Generated amount masks must not inherit legacy black foregrounds. */
html[data-theme="dark"] body.hide-amounts [data-amount]::after,
html[data-theme="dark"] body.hide-amounts [data-ai-amount]::after,
html[data-theme="dark"] body.hide-amounts .kpi-amount::after {
    color: var(--app-text-secondary) !important;
}

html[data-theme="dark"] .toast.success .toast-icon,
html[data-theme="dark"] .revenue-toast-success .revenue-toast-icon,
html[data-theme="dark"] .fund-toast-success .fund-toast-icon,
html[data-theme="dark"] .ai-reporting-toast-success .ai-reporting-toast-icon {
    background: var(--app-status-success-bg);
    color: var(--app-status-success-text) !important;
}

html[data-theme="dark"] .toast.warning .toast-icon,
html[data-theme="dark"] .revenue-toast-warning .revenue-toast-icon,
html[data-theme="dark"] .ai-reporting-toast-warning .ai-reporting-toast-icon {
    background: var(--app-status-warning-bg);
    color: var(--app-status-warning-text) !important;
}

html[data-theme="dark"] .toast.error .toast-icon,
html[data-theme="dark"] .revenue-toast-error .revenue-toast-icon,
html[data-theme="dark"] .ai-reporting-toast-error .ai-reporting-toast-icon {
    background: var(--app-status-danger-bg);
    color: var(--app-status-danger-text) !important;
}

html[data-theme="dark"] .table-responsive::-webkit-scrollbar-track,
html[data-theme="dark"] .table-wrapper::-webkit-scrollbar-track,
html[data-theme="dark"] .expense-table-wrapper::-webkit-scrollbar-track,
html[data-theme="dark"] .budget-table-wrapper::-webkit-scrollbar-track,
html[data-theme="dark"] .procurement-table-wrapper::-webkit-scrollbar-track,
html[data-theme="dark"] .reports-table-wrapper::-webkit-scrollbar-track {
    background: var(--app-bg-page);
}