:root,
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg-color: #080c14;
    --panel-bg: rgba(13, 20, 35, 0.65);
    --card-bg: var(--panel-bg);
    --border-color: rgba(0, 242, 254, 0.12);
    --border-hover: rgba(0, 242, 254, 0.35);
    --text-color: #f8fafc;
    --text-muted: #64748b;
    --text-soft: #d1d9e5;
    --text-subtle: #a7b6c9;
    --cyan: #00f2fe;
    --magenta: #ff007f;
    --green: #10b981;
    --orange: #f59e0b;
    --yellow: #facc15;
    --red: #f43f5e;
    --green-glow: rgba(16, 185, 129, 0.12);
    --cyan-glow: rgba(0, 242, 254, 0.12);
    --magenta-glow: rgba(255, 0, 127, 0.12);
    --card-glow: 0 10px 40px 0 rgba(0, 0, 0, 0.45);
    --dialog-shadow: 0 24px 70px rgba(0, 0, 0, 0.65);
    --surface-dialog: #111a29;
    --surface-control: #182335;
    --surface-input: #101827;
    --surface-muted: #131d2b;
    --surface-alt: #172232;
    --surface-hover: #243246;
    --surface-dim: rgba(15, 23, 42, 0.5);
    --control-bg: rgba(8, 12, 20, 0.8);
    --nav-bg: rgba(8, 12, 20, 0.9);
    --code-bg: rgba(2, 6, 23, 0.72);
    --modal-backdrop: rgba(0, 0, 0, 0.68);
    --on-accent: #081018;
    --gradient-end: #60a5fa;
    --layer-bg: rgba(10, 16, 28, 0.5);
    --field-readonly: #151f2c;
    --surface-content: #1a2535;
    --table-row-bg: rgba(255, 255, 255, 0.015);
}

:root[data-theme="light"] {
    color-scheme: light;
    --bg-color: #f1f5f9;
    --panel-bg: #ffffff;
    --card-bg: #ffffff;
    --border-color: #d5d7da;
    --border-hover: #94a3b8;
    --text-color: #0f172a;
    --text-muted: #64748b;
    --text-soft: #334155;
    --text-subtle: #64748b;
    --cyan: #2563eb;
    --magenta: #64748b;
    --green: #15803d;
    --orange: #b45309;
    --yellow: #a16207;
    --red: #dc2626;
    --green-glow: #f0fdf4;
    --cyan-glow: #eff6ff;
    --magenta-glow: #f8fafc;
    --card-glow: 0 4px 14px rgba(15, 23, 42, 0.08);
    --dialog-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
    --surface-dialog: #ffffff;
    --surface-control: #f8fafc;
    --surface-input: #ffffff;
    --surface-muted: #f8fafc;
    --surface-alt: #f1f5f9;
    --surface-hover: #e2e8f0;
    --surface-dim: rgba(226, 232, 240, 0.7);
    --control-bg: #ffffff;
    --nav-bg: #ffffff;
    --code-bg: #f8fafc;
    --modal-backdrop: rgba(15, 23, 42, 0.32);
    --on-accent: #ffffff;
    --gradient-end: #1d4ed8;
    --layer-bg: #f8fafc;
    --field-readonly: #f1f5f9;
    --surface-content: #ffffff;
    --table-row-bg: #f8fafc;
}