/* Theme variable definitions */
/* Light theme */
:root[data-theme='light'] {
    --color-bg: #f7f7fb;
    --color-text: #1c2033;
    --color-text-muted: #5c6475;
    --color-text-subtle: #778094;
    --color-link: #5749c5;
    --color-link-hover: #4035a5;
    --color-primary-bg: #5b4dcc;
    --color-primary-border: #5144bd;
    --color-primary-soft: #eeecff;
    --color-accent: #df5269;
    --color-accent-soft: #fff0f2;
    --color-top-row-bg: rgba(247,247,251,0.88);
    --color-top-row-border: #e4e5ed;
    --color-sidebar-gradient-start: #191a33;
    --color-sidebar-gradient-end: #241532;
    --color-error-bg: #b32121;
    --color-error-text: #ffffff;
    --color-border: #d9dce7;
    --color-border-muted: #e1e3eb;
    --color-surface: #ffffff;
    --color-surface-alt: #f1f2f7;
    --color-surface-hover: #eaeaf4;
    --color-surface-raised: #ffffff;
    --shadow-sm: 0 1px 2px rgba(28,32,51,.05), 0 4px 14px rgba(28,32,51,.05);
    --shadow-md: 0 12px 32px rgba(28,32,51,.10);
    --shadow-lg: 0 24px 64px rgba(28,32,51,.16);
    /* Navigation */
    /* Navigation text on dark gradient sidebar needs light contrast */
    --color-nav-text: #f8f9fa;
    --color-nav-icon: #ffffff;
    --color-nav-active-bg: rgba(255,255,255,0.16);
    --color-nav-hover-bg: rgba(255,255,255,0.1);
    --color-nav-divider: rgba(255,255,255,0.2);
    --color-nav-toggle-border: rgba(27,31,35,0.35);
    --color-nav-toggle-bg: rgba(27,31,35,0.08);
    --nav-toggle-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231b1f23' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    /* Bootstrap variable overrides */
    --bs-body-bg: var(--color-bg);
    --bs-body-color: var(--color-text);
    --bs-border-color: var(--color-border-muted);
    --bs-link-color: var(--color-link);
    --bs-link-hover-color: var(--color-link-hover);
    --bs-form-control-bg: var(--color-surface);
    --bs-form-control-color: var(--color-text);
    --bs-secondary-bg: var(--color-surface-alt);
    --bs-secondary-color: var(--color-text-muted);
    --bs-card-bg: var(--color-surface);
    --bs-card-border-color: var(--color-border-muted);
    --bs-card-color: var(--color-text);
    --bs-nav-tabs-link-active-color: var(--color-text);
    --bs-nav-tabs-link-active-bg: var(--color-surface);
    --bs-nav-tabs-link-active-border-color: var(--color-border-muted) var(--color-border-muted) var(--color-surface);
    --bs-nav-tabs-link-hover-border-color: var(--color-border-muted) var(--color-border-muted) transparent;
    --bs-dropdown-bg: var(--color-dropdown-bg);
    --bs-dropdown-border-color: var(--color-dropdown-border);
    --bs-dropdown-link-color: var(--color-text);
    --bs-dropdown-link-hover-bg: var(--color-dropdown-hover-bg);
    --bs-dropdown-link-hover-color: var(--color-text);
    /* Status / semantic tokens */
    --color-success-bg: #e7f7f0;
    --color-success-border: #a9ddc6;
    --color-success-text: #126542;
    --color-warning-bg: #fff6df;
    --color-warning-border: #efd193;
    --color-warning-text: #7d4b00;
    --color-info-bg: #e8f5fb;
    --color-info-border: #add9e8;
    --color-info-text: #155d75;
    --color-danger-bg: #fff0f2;
    --color-danger-border: #edb9c1;
    --color-danger-text: #9f2940;
    --color-dropdown-bg: var(--color-surface);
    --color-dropdown-border: var(--color-border-muted);
    --color-dropdown-hover-bg: rgba(27, 31, 35, 0.06);
    --color-dropdown-danger-hover-bg: rgba(220, 53, 69, 0.16);
    --color-danger-solid: #dc3545;
    --color-danger-solid-hover: #bb2d3b;
    --color-danger-solid-active: #a52834;
    /* Bootstrap semantic overrides */
    --bs-success: #198754;
    --bs-warning: #ffc107;
    --bs-info: #0dcaf0;
    --bs-danger: #dc3545;
    --bs-success-bg-subtle: var(--color-success-bg);
    --bs-success-text-emphasis: var(--color-success-text);
    --bs-warning-bg-subtle: var(--color-warning-bg);
    --bs-warning-text-emphasis: var(--color-warning-text);
    --bs-info-bg-subtle: var(--color-info-bg);
    --bs-info-text-emphasis: var(--color-info-text);
    --bs-success-border-subtle: var(--color-success-border);
    --bs-warning-border-subtle: var(--color-warning-border);
    --bs-info-border-subtle: var(--color-info-border);
    --bs-danger-bg-subtle: var(--color-danger-bg);
    --bs-danger-border-subtle: var(--color-danger-border);
    --bs-danger-text-emphasis: var(--color-danger-text);
}

/* Dark theme */
:root[data-theme='dark'] {
    --color-bg: #0d0f1a;
    --color-text: #f1f2f8;
    --color-text-muted: #b8bdcc;
    --color-text-subtle: #9299ac;
    --color-link: #a79cff;
    --color-link-hover: #c3bcff;
    --color-primary-bg: #6d5ee7;
    --color-primary-border: #8073ef;
    --color-primary-soft: #272342;
    --color-accent: #ff7185;
    --color-accent-soft: #351e2a;
    --color-top-row-bg: rgba(13,15,26,0.86);
    --color-top-row-border: #292d40;
    --color-sidebar-gradient-start: #15172d;
    --color-sidebar-gradient-end: #24152f;
    --color-error-bg: #b32121;
    --color-error-text: #ffffff;
    --color-border: #34384d;
    --color-border-muted: #2b2f42;
    --color-surface: #151827;
    --color-surface-alt: #1d2133;
    --color-surface-hover: #272c42;
    --color-surface-raised: #1a1e30;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.24), 0 6px 18px rgba(0,0,0,.16);
    --shadow-md: 0 16px 36px rgba(0,0,0,.30);
    --shadow-lg: 0 28px 72px rgba(0,0,0,.44);
    /* Navigation */
    --color-nav-text: #d7d7d7;
    --color-nav-icon: #ffffff;
    --color-nav-active-bg: rgba(255,255,255,0.25);
    --color-nav-hover-bg: rgba(255,255,255,0.12);
    --color-nav-divider: rgba(255,255,255,0.2);
    --color-nav-toggle-border: rgba(255,255,255,0.2);
    --color-nav-toggle-bg: rgba(255,255,255,0.08);
    --nav-toggle-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    /* Bootstrap variable overrides */
    --bs-body-bg: var(--color-bg);
    --bs-body-color: var(--color-text);
    --bs-border-color: var(--color-border-muted);
    --bs-link-color: var(--color-link);
    --bs-link-hover-color: var(--color-link-hover);
    --bs-form-control-bg: var(--color-surface);
    --bs-form-control-color: var(--color-text);
    --bs-secondary-bg: var(--color-surface-alt);
    --bs-secondary-color: var(--color-text-muted);
    --bs-card-bg: var(--color-surface);
    --bs-card-border-color: var(--color-border-muted);
    --bs-card-color: var(--color-text);
    --bs-nav-tabs-link-active-color: var(--color-text);
    --bs-nav-tabs-link-active-bg: var(--color-surface);
    --bs-nav-tabs-link-active-border-color: var(--color-border-muted) var(--color-border-muted) var(--color-surface);
    --bs-nav-tabs-link-hover-border-color: var(--color-border-muted) var(--color-border-muted) transparent;
    --bs-dropdown-bg: var(--color-dropdown-bg);
    --bs-dropdown-border-color: var(--color-dropdown-border);
    --bs-dropdown-link-color: var(--color-text);
    --bs-dropdown-link-hover-bg: var(--color-dropdown-hover-bg);
    --bs-dropdown-link-hover-color: var(--color-text);
    /* Status / semantic tokens */
    --color-success-bg: #142c24;
    --color-success-border: #286f52;
    --color-success-text: #73d7aa;
    --color-warning-bg: #302817;
    --color-warning-border: #7e652b;
    --color-warning-text: #f1c76d;
    --color-info-bg: #152a35;
    --color-info-border: #376d82;
    --color-info-text: #7dcced;
    --color-danger-bg: #321b24;
    --color-danger-border: #864155;
    --color-danger-text: #ff9baa;
    --color-dropdown-bg: var(--color-surface);
    --color-dropdown-border: var(--color-border-muted);
    --color-dropdown-hover-bg: rgba(255, 255, 255, 0.08);
    --color-dropdown-danger-hover-bg: rgba(182, 35, 36, 0.32);
    --color-danger-solid: #da3633;
    --color-danger-solid-hover: #b62324;
    --color-danger-solid-active: #982119;
    /* Bootstrap semantic overrides */
    --bs-success: #2f9e72;
    --bs-warning: #d19b38;
    --bs-info: #3891b4;
    --bs-danger: #d95c70;
    --bs-success-bg-subtle: var(--color-success-bg);
    --bs-success-text-emphasis: var(--color-success-text);
    --bs-warning-bg-subtle: var(--color-warning-bg);
    --bs-warning-text-emphasis: var(--color-warning-text);
    --bs-info-bg-subtle: var(--color-info-bg);
    --bs-info-text-emphasis: var(--color-info-text);
    --bs-success-border-subtle: var(--color-success-border);
    --bs-warning-border-subtle: var(--color-warning-border);
    --bs-info-border-subtle: var(--color-info-border);
    --bs-danger-bg-subtle: var(--color-danger-bg);
    --bs-danger-border-subtle: var(--color-danger-border);
    --bs-danger-text-emphasis: var(--color-danger-text);
}

body.dark {
    background: var(--color-bg);
    color: var(--color-text);
}

/* Generic helpers */
.surface {
    background: var(--color-surface);
    color: var(--color-text);
}
.surface-alt {
    background: var(--color-surface-alt);
    color: var(--color-text);
}

/* Scrollbar theming (WebKit) */
body.dark ::-webkit-scrollbar {
    width: 12px;
}
body.dark ::-webkit-scrollbar-track {
    background: var(--color-bg);
}
body.dark ::-webkit-scrollbar-thumb {
    background-color: var(--color-border-muted);
    border-radius: 6px;
    border: 3px solid var(--color-bg);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
    }
}