/* ═══════════════════════════════════════════════════
   DESIGN TOKENS & THEME DEFINITIONS
   ═══════════════════════════════════════════════════ */
:root, [data-theme="dark"] {
    --bg-deep: #060a1a;
    --bg-surface: #0a0f22;
    --bg-sidebar: rgba(8, 12, 30, 0.95);
    --bg-card: rgba(12, 18, 45, 0.55);
    --bg-card-solid: #0d1230;
    --bg-card-border: rgba(100, 140, 255, 0.10);
    --bg-card-hover: rgba(12, 18, 45, 0.72);
    --bg-section: rgba(255, 255, 255, 0.03);
    --bg-input: rgba(255, 255, 255, 0.05);
    --bg-input-focus: rgba(255, 255, 255, 0.09);
    --border-input: rgba(255, 255, 255, 0.08);
    --border-input-focus: rgba(0, 180, 255, 0.45);
    --border-subtle: rgba(255, 255, 255, 0.06);
    --accent: #00b8ff;
    --accent-dim: rgba(0, 184, 255, 0.15);
    --accent-glow: rgba(0, 184, 255, 0.25);
    --accent-green: #34d399;
    --accent-green-dim: rgba(52, 211, 153, 0.12);
    --accent-purple: #a78bfa;
    --accent-purple-dim: rgba(167, 139, 250, 0.12);
    --text-primary: rgba(255, 255, 255, 0.92);
    --text-secondary: rgba(255, 255, 255, 0.55);
    --text-muted: rgba(255, 255, 255, 0.45);
    --danger: #f87171;
    --danger-dim: rgba(248, 113, 113, 0.10);
    --warning: #fbbf24;
    --warning-dim: rgba(251, 191, 36, 0.10);
    /* Background atmosphere */
    --canvas-grad-1: rgba(88, 28, 135, 0.25);
    --canvas-grad-2: rgba(6, 95, 124, 0.30);
    --canvas-grad-3: rgba(120, 50, 180, 0.12);
    --canvas-grad-4: rgba(0, 140, 180, 0.10);
    --orb-1: rgba(147, 51, 234, 0.2);
    --orb-2: rgba(6, 182, 212, 0.18);
    --orb-3: rgba(59, 130, 246, 0.15);
    /* Buttons */
    --btn-gradient: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    --btn-shadow: rgba(14, 165, 233, 0.2);
    --btn-shadow-hover: rgba(14, 165, 233, 0.3);
    --btn-disabled-bg: rgba(255, 255, 255, 0.06);
    --btn-ghost-bg: rgba(255, 255, 255, 0.04);
    --btn-ghost-bg-hover: rgba(255, 255, 255, 0.07);
    /* Layout elements */
    --topbar-bg: rgba(6, 10, 26, 0.6);
    --sidebar-mobile-bg: rgba(8, 12, 30, 0.97);
    --nav-hover-bg: rgba(255, 255, 255, 0.04);
    --select-option-bg: #0d1230;
    --select-arrow: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='rgba(255,255,255,0.3)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --avatar-gradient: linear-gradient(135deg, rgba(0,184,255,0.2), rgba(147,51,234,0.2));
    --input-focus-ring: rgba(0, 184, 255, 0.06);
    --scrollbar-thumb: rgba(255, 255, 255, 0.12);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.14);
    /* Borders */
    --border-download: rgba(52, 211, 153, 0.15);
    --border-download-hover: rgba(52, 211, 153, 0.18);
    --border-zip: rgba(167, 139, 250, 0.15);
    --border-zip-hover: rgba(167, 139, 250, 0.18);
    --border-danger-hover: rgba(248, 113, 113, 0.12);
    --border-dot-pending: rgba(255, 255, 255, 0.10);
    --border-dot-done: rgba(52, 211, 153, 0.3);
    --border-dot-error: rgba(248, 113, 113, 0.3);
    --timeline-line-bg: rgba(255, 255, 255, 0.06);
    --timeline-line-done: rgba(52, 211, 153, 0.25);
    --timeline-line-active: rgba(0, 184, 255, 0.2);
    --dl-row-border: rgba(255, 255, 255, 0.03);
    --badge-pending-bg: rgba(255, 255, 255, 0.06);
    --dot-pending-bg: rgba(255, 255, 255, 0.06);
    --job-card-hover-border: rgba(100, 140, 255, 0.18);
    /* Toasts */
    --toast-bg: rgba(16, 24, 40, 0.92);
    --toast-border-success: rgba(52, 211, 153, 0.25);
    --toast-border-error: rgba(248, 113, 113, 0.25);
    --toast-border-info: rgba(0, 184, 255, 0.25);
    --toast-shadow: rgba(0, 0, 0, 0.4);
    /* Eagle SVG */
    --eagle-grad-start: rgba(200, 220, 255, 0.5);
    --eagle-grad-end: rgba(100, 140, 200, 0.25);
    /* Layout constants */
    --sidebar-w: 232px;
    --topbar-h: 52px;
    --radius: 10px;
    --radius-lg: 14px;
}

/* ── Light Theme ── */
[data-theme="light"] {
    --bg-deep: #f0f2f7;
    --bg-surface: #f5f7fa;
    --bg-sidebar: rgba(255, 255, 255, 0.95);
    --bg-card: rgba(255, 255, 255, 0.80);
    --bg-card-solid: #ffffff;
    --bg-card-border: rgba(0, 30, 80, 0.08);
    --bg-card-hover: rgba(255, 255, 255, 0.95);
    --bg-section: rgba(0, 0, 0, 0.02);
    --bg-input: rgba(0, 0, 0, 0.03);
    --bg-input-focus: rgba(0, 0, 0, 0.05);
    --border-input: rgba(0, 0, 0, 0.10);
    --border-input-focus: rgba(0, 140, 210, 0.50);
    --border-subtle: rgba(0, 0, 0, 0.06);
    --accent: #0088cc;
    --accent-dim: rgba(0, 136, 204, 0.10);
    --accent-glow: rgba(0, 136, 204, 0.20);
    --accent-green: #059669;
    --accent-green-dim: rgba(5, 150, 105, 0.08);
    --accent-purple: #7c3aed;
    --accent-purple-dim: rgba(124, 58, 237, 0.08);
    --text-primary: rgba(0, 0, 0, 0.87);
    --text-secondary: rgba(0, 0, 0, 0.55);
    --text-muted: rgba(0, 0, 0, 0.32);
    --danger: #dc2626;
    --danger-dim: rgba(220, 38, 38, 0.08);
    --warning: #d97706;
    --warning-dim: rgba(217, 119, 6, 0.08);
    --canvas-grad-1: rgba(100, 80, 200, 0.04);
    --canvas-grad-2: rgba(0, 120, 180, 0.05);
    --canvas-grad-3: rgba(100, 60, 180, 0.03);
    --canvas-grad-4: rgba(0, 140, 180, 0.03);
    --orb-1: rgba(100, 60, 200, 0.04);
    --orb-2: rgba(0, 150, 200, 0.04);
    --orb-3: rgba(60, 130, 246, 0.04);
    --btn-gradient: linear-gradient(135deg, #0088cc 0%, #006aa8 100%);
    --btn-shadow: rgba(0, 136, 204, 0.20);
    --btn-shadow-hover: rgba(0, 136, 204, 0.30);
    --btn-disabled-bg: rgba(0, 0, 0, 0.04);
    --btn-ghost-bg: rgba(0, 0, 0, 0.03);
    --btn-ghost-bg-hover: rgba(0, 0, 0, 0.06);
    --topbar-bg: rgba(255, 255, 255, 0.70);
    --sidebar-mobile-bg: rgba(255, 255, 255, 0.97);
    --nav-hover-bg: rgba(0, 0, 0, 0.03);
    --select-option-bg: #ffffff;
    --select-arrow: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='rgba(0,0,0,0.35)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --avatar-gradient: linear-gradient(135deg, rgba(0,136,204,0.12), rgba(124,58,237,0.12));
    --input-focus-ring: rgba(0, 136, 204, 0.10);
    --scrollbar-thumb: rgba(0, 0, 0, 0.18);
    --scrollbar-thumb-hover: rgba(0, 0, 0, 0.18);
    --border-download: rgba(5, 150, 105, 0.18);
    --border-download-hover: rgba(5, 150, 105, 0.22);
    --border-zip: rgba(124, 58, 237, 0.18);
    --border-zip-hover: rgba(124, 58, 237, 0.22);
    --border-danger-hover: rgba(220, 38, 38, 0.15);
    --border-dot-pending: rgba(0, 0, 0, 0.10);
    --border-dot-done: rgba(5, 150, 105, 0.35);
    --border-dot-error: rgba(220, 38, 38, 0.30);
    --timeline-line-bg: rgba(0, 0, 0, 0.06);
    --timeline-line-done: rgba(5, 150, 105, 0.25);
    --timeline-line-active: rgba(0, 136, 204, 0.20);
    --dl-row-border: rgba(0, 0, 0, 0.04);
    --badge-pending-bg: rgba(0, 0, 0, 0.05);
    --dot-pending-bg: rgba(0, 0, 0, 0.05);
    --job-card-hover-border: rgba(0, 80, 200, 0.15);
    --toast-bg: rgba(255, 255, 255, 0.95);
    --toast-border-success: rgba(5, 150, 105, 0.25);
    --toast-border-error: rgba(220, 38, 38, 0.25);
    --toast-border-info: rgba(0, 136, 204, 0.25);
    --toast-shadow: rgba(0, 0, 0, 0.12);
    --eagle-grad-start: rgba(60, 80, 140, 0.35);
    --eagle-grad-end: rgba(40, 60, 120, 0.20);
}