:root {
    /* Theme Colors - Dark (Default) */
    --bg-primary: #1a1a1a;
    --bg-secondary: #2a2a2a;
    --bg-header: rgba(26, 26, 26, 0.95);
    --bg-control: rgba(255, 255, 255, 0.08);
    --bg-control-hover: rgba(255, 255, 255, 0.12);
    --bg-control-active: rgba(255, 255, 255, 0.15);
    --text-primary: #ffffff;
    --text-secondary: #aaaaaa;
    --border-color: #333333;
    --border-control: rgba(255, 255, 255, 0.15);
    --accent-color: #4CAF50;

    --color-positive: #22c55e;
    --color-positive-rgb: 34, 197, 94;
    --color-negative: #ef4444;
    --color-negative-rgb: 239, 68, 68;
    --color-positive-muted: #10b981;
    --color-negative-muted: #dc2626;

    /* Z-Index Hierarchy */
    --z-base: 0;
    --z-below: -1;
    --z-sticky: 100;
    --z-sticky-high: 150;
    --z-fixed: 200;
    --z-fixed-high: 250;
    --z-dropdown: 500;
    --z-popover: 600;
    --z-modal-backdrop: 1000;
    --z-modal: 2000;
    --z-modal-high: 2100;
    --z-modal-popover: 3000;
    --z-tooltip: 4000;
    --z-notification: 5000;
    --z-toast: 5100;
    --z-critical: 9000;
    --z-emergency: 9500;
}

[data-theme="light"] {
    --bg-primary: #f8f9fa;
    --bg-secondary: #ffffff;
    --bg-header: rgba(255, 255, 255, 0.95);
    --bg-control: rgba(0, 0, 0, 0.05);
    --bg-control-hover: rgba(0, 0, 0, 0.08);
    --bg-control-active: rgba(0, 0, 0, 0.12);
    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --border-color: #e0e0e0;
    --border-control: rgba(0, 0, 0, 0.1);

    --color-positive: #16a34a;
    --color-positive-rgb: 22, 163, 74;
    --color-negative: #dc2626;
    --color-negative-rgb: 220, 38, 38;
    --color-positive-muted: #059669;
    --color-negative-muted: #b91c1c;
}

[data-colorblind="true"] {
    --color-positive: #3B82F6;
    --color-positive-rgb: 59, 130, 246;
    --color-negative: #F97316;
    --color-negative-rgb: 249, 115, 22;
    --color-positive-muted: #2563EB;
    --color-negative-muted: #EA580C;
}

[data-colorblind="true"][data-theme="light"] {
    --color-positive: #2563EB;
    --color-positive-rgb: 37, 99, 235;
    --color-negative: #EA580C;
    --color-negative-rgb: 234, 88, 12;
    --color-positive-muted: #1D4ED8;
    --color-negative-muted: #C2410C;
}

/* Explicitly apply variables to key elements to ensure theme switching works */
body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.header {
    background-color: var(--bg-header) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.brand-text {
    color: var(--text-primary) !important;
}

.control-btn {
    background: var(--bg-control) !important;
    border: 1px solid var(--border-control) !important;
}

.control-btn svg {
    color: var(--text-primary) !important;
}

/* Ensure light mode specific overrides are strong */
[data-theme="light"] body {
    background-color: #f8f9fa !important;
    color: #1a1a1a !important;
}

[data-theme="light"] .header {
    background-color: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}