:root {
    --navy: #0d0f39;
    --navy-light: #141650;
    --navy-mid: #1a1d5a;
    --magenta: #8a2a56;
    --magenta-light: #a83368;
    --magenta-glow: rgba(138, 42, 86, 0.3);
    --cyan: #6eeaff;
    --cyan-dim: rgba(110, 234, 255, 0.15);
    --cyan-glow: rgba(110, 234, 255, 0.25);
    --white: #ffffff;
    --text-secondary: #b0b3d6;
    --text-muted: #6b6f9e;
    --green: #34d399;
    --green-bg: rgba(52, 211, 153, 0.12);
    --amber: #fbbf24;
    --amber-bg: rgba(251, 191, 36, 0.12);
    --card-bg: rgba(20, 22, 80, 0.6);
    --card-border: rgba(110, 234, 255, 0.08);
    --red: #ef4444;
    --red-bg: rgba(239, 68, 68, 0.12);

    /* Semantic surface/text variables */
    --bg-body: #0d0f39;
    --bg-surface: rgba(20, 22, 80, 0.6);
    --bg-surface-solid: #141650;
    --bg-hover: rgba(110, 234, 255, 0.04);
    --bg-hover-strong: rgba(110, 234, 255, 0.08);
    --bg-subtle: rgba(110, 234, 255, 0.03);
    --bg-input: rgba(110, 234, 255, 0.03);
    --border-subtle: rgba(110, 234, 255, 0.08);
    --border-hover: rgba(110, 234, 255, 0.15);
    --border-divider: rgba(255, 255, 255, 0.04);
    --border-divider-strong: rgba(255, 255, 255, 0.06);
    --text-primary: #ffffff;
    --text-link-hover: #46c8de;
    --progress-track: rgba(110, 234, 255, 0.06);
    --overlay-bg: rgba(13, 15, 57, 0.85);
    --skeleton-mid: rgba(110, 234, 255, 0.04);

    /* Badge border variants */
    --green-border: rgba(52, 211, 153, 0.2);
    --green-border-light: rgba(52, 211, 153, 0.15);
    --amber-border: rgba(251, 191, 36, 0.2);
    --amber-border-light: rgba(251, 191, 36, 0.15);
    --red-border: rgba(239, 68, 68, 0.2);
    --red-border-light: rgba(239, 68, 68, 0.15);
    --cyan-border-light: rgba(110, 234, 255, 0.15);
    --cyan-tag-bg: rgba(110, 234, 255, 0.08);
    --cyan-tag-border: rgba(110, 234, 255, 0.2);

    /* Status-specific backgrounds */
    --muted-bg: rgba(107, 111, 158, 0.12);

    /* ETA/accent backgrounds */
    --amber-highlight-bg: rgba(251, 191, 36, 0.06);
    --amber-highlight-border: rgba(251, 191, 36, 0.15);
    --magenta-epic-bg: rgba(138, 42, 86, 0.15);
    --magenta-epic-border: rgba(138, 42, 86, 0.25);
}

/* ========== LIGHT THEME ========== */
[data-theme="light"] {
    --navy: #f5f6fa;
    --navy-light: #ffffff;
    --navy-mid: #e8eaf0;
    --magenta: #8a2a56;
    --magenta-light: #a83368;
    --magenta-glow: rgba(138, 42, 86, 0.12);
    --cyan: #0891b2;
    --cyan-dim: rgba(8, 145, 178, 0.08);
    --cyan-glow: rgba(8, 145, 178, 0.15);
    --white: #1a1a2e;
    --text-secondary: #4a4e6a;
    --text-muted: #8b8fa8;
    --green: #059669;
    --green-bg: rgba(5, 150, 105, 0.08);
    --amber: #d97706;
    --amber-bg: rgba(217, 119, 6, 0.08);
    --card-bg: rgba(255, 255, 255, 0.85);
    --card-border: rgba(0, 0, 0, 0.08);
    --red: #dc2626;
    --red-bg: rgba(220, 38, 38, 0.08);

    --bg-body: #f0f1f5;
    --bg-surface: rgba(255, 255, 255, 0.85);
    --bg-surface-solid: #ffffff;
    --bg-hover: rgba(0, 0, 0, 0.03);
    --bg-hover-strong: rgba(0, 0, 0, 0.06);
    --bg-subtle: rgba(0, 0, 0, 0.02);
    --bg-input: rgba(0, 0, 0, 0.03);
    --border-subtle: rgba(0, 0, 0, 0.08);
    --border-hover: rgba(0, 0, 0, 0.15);
    --border-divider: rgba(0, 0, 0, 0.04);
    --border-divider-strong: rgba(0, 0, 0, 0.06);
    --text-primary: #1a1a2e;
    --text-link-hover: #06748e;
    --progress-track: rgba(0, 0, 0, 0.06);
    --overlay-bg: rgba(0, 0, 0, 0.5);
    --skeleton-mid: rgba(0, 0, 0, 0.04);

    --green-border: rgba(5, 150, 105, 0.2);
    --green-border-light: rgba(5, 150, 105, 0.15);
    --amber-border: rgba(217, 119, 6, 0.2);
    --amber-border-light: rgba(217, 119, 6, 0.15);
    --red-border: rgba(220, 38, 38, 0.2);
    --red-border-light: rgba(220, 38, 38, 0.15);
    --cyan-border-light: rgba(8, 145, 178, 0.15);
    --cyan-tag-bg: rgba(8, 145, 178, 0.08);
    --cyan-tag-border: rgba(8, 145, 178, 0.2);

    --muted-bg: rgba(139, 143, 168, 0.12);

    --amber-highlight-bg: rgba(217, 119, 6, 0.06);
    --amber-highlight-border: rgba(217, 119, 6, 0.15);
    --magenta-epic-bg: rgba(138, 42, 86, 0.08);
    --magenta-epic-border: rgba(138, 42, 86, 0.15);
}