/* Matrix Command Center - Multi-Theme CSS Variables Engine */

:root, [data-theme="monochrome"] {
    --bg-base: #09090b;
    --bg-gradient: radial-gradient(circle at 50% 0%, #18181b 0%, #09090b 75%);
    --surface-panel: rgba(14, 14, 18, 0.90);
    --surface-subtle: rgba(24, 24, 27, 0.80);
    --surface-card: rgba(20, 20, 24, 0.85);
    --border-subtle: #27272a;
    --border-glow: #3f3f46;
    --text-primary: #fafafa;
    --text-secondary: #d4d4d8;
    --text-muted: #a1a1aa;
    --accent-color: #3b82f6;
    --accent-glow: 0 4px 20px -2px rgba(59, 130, 246, 0.25);
    --panel-border: 1px solid var(--border-subtle);
    --card-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

[data-theme="monochrome-light"] {
    --bg-base: #f8fafc;
    --bg-gradient: radial-gradient(circle at 50% 0%, #f1f5f9 0%, #f8fafc 75%);
    --surface-panel: rgba(255, 255, 255, 0.92);
    --surface-subtle: rgba(241, 245, 249, 0.85);
    --surface-card: #ffffff;
    --border-subtle: #e2e8f0;
    --border-glow: #cbd5e1;
    --text-primary: #09090b;
    --text-secondary: #334155;
    --text-muted: #64748b;
    --accent-color: #2563eb;
    --accent-glow: 0 4px 15px -2px rgba(37, 99, 235, 0.15);
    --panel-border: 1px solid var(--border-subtle);
    --card-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.06);
}

[data-theme="cyberpunk"] {
    --bg-base: #060913;
    --bg-gradient: radial-gradient(circle at 50% 0%, #0d1a36 0%, #060913 80%);
    --surface-panel: rgba(13, 20, 36, 0.80);
    --surface-subtle: rgba(18, 28, 52, 0.70);
    --surface-card: rgba(15, 23, 42, 0.75);
    --border-subtle: rgba(0, 240, 255, 0.22);
    --border-glow: rgba(0, 240, 255, 0.55);
    --text-primary: #00f0ff;
    --text-secondary: #38bdf8;
    --text-muted: #94a3b8;
    --accent-color: #00f0ff;
    --accent-glow: 0 0 25px -3px rgba(0, 240, 255, 0.35);
    --panel-border: 1px solid var(--border-subtle);
    --card-shadow: 0 0 35px -5px rgba(0, 240, 255, 0.15);
}

/* Common Dynamic Element Rules */
.theme-panel {
    background: var(--surface-panel);
    border: var(--panel-border);
    box-shadow: var(--card-shadow);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.theme-card-sub {
    background: var(--surface-subtle);
    border: 1px solid var(--border-subtle);
}

.apple-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    background-color: var(--surface-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: 9999px;
    transition: background-color 0.25s, border-color 0.25s, box-shadow 0.25s;
    cursor: pointer;
}

.apple-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background-color: #ffffff;
    border-radius: 50%;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.apple-switch[data-state="on"] {
    background-color: #10b981;
    border-color: #059669;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

.apple-switch[data-state="on"]::after {
    transform: translateX(20px);
}

[data-theme="cyberpunk"] .apple-switch[data-state="on"] {
    background-color: #00f0ff;
    border-color: #38bdf8;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
}