/* =========================
   Theme tokens (light/dark)
   ========================= */
:root {
    color-scheme: light;

    --color-app-bg: #f3f4f6;
    --color-surface: #ffffff;
    --color-surface-soft: #f9fafb;
    --color-surface-muted: #f3f4f6;
    --color-surface-strong: #111827;
    --color-overlay: rgba(0, 0, 0, 0.78);

    --color-text-primary: #111827;
    --color-text-secondary: #374151;
    --color-text-muted: #9ca3af;
    --color-text-inverse: #ffffff;

    --color-border: #e5e7eb;
    --color-border-soft: #f3f4f6;
    --color-border-strong: #d1d5db;

    --color-primary: #2563eb;
    --color-primary-soft: #dbeafe;
    --color-primary-shadow: rgba(59, 130, 246, 0.25);

    --color-danger: #dc2626;
    --color-danger-soft: #fee2e2;
    --color-danger-strong: #ef4444;

    --color-success: #16a34a;
    --color-success-soft: #22c55e;

    --color-icon-muted: #9ca3af;
    --color-icon-default: #6b7280;
    --color-input-ring: #3b82f6;
    --color-progress-track: #f3f4f6;
    --color-scrollbar-thumb: #cbd5e1;
}

:root[data-theme='dark'] {
    color-scheme: dark;

    --color-app-bg: #0b1220;
    --color-surface: #111827;
    --color-surface-soft: #1f2937;
    --color-surface-muted: #0f172a;
    --color-surface-strong: #f9fafb;
    --color-overlay: rgba(2, 6, 23, 0.82);

    --color-text-primary: #f9fafb;
    --color-text-secondary: #d1d5db;
    --color-text-muted: #94a3b8;
    --color-text-inverse: #0b1220;

    --color-border: #334155;
    --color-border-soft: #1e293b;
    --color-border-strong: #475569;

    --color-primary: #60a5fa;
    --color-primary-soft: #1e3a8a;
    --color-primary-shadow: rgba(96, 165, 250, 0.28);

    --color-danger: #f87171;
    --color-danger-soft: #3f1d21;
    --color-danger-strong: #fb7185;

    --color-success: #4ade80;
    --color-success-soft: #22c55e;

    --color-icon-muted: #94a3b8;
    --color-icon-default: #cbd5e1;
    --color-input-ring: #60a5fa;
    --color-progress-track: #1e293b;
    --color-scrollbar-thumb: #475569;
}

body {
    background-color: var(--color-app-bg);
    color: var(--color-text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overscroll-behavior-y: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.scan-overlay { background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,0.3)); }
.scan-line {
    width: 100%; height: 2px; background: var(--color-danger-strong); position: absolute; top: 50%;
    animation: scan 2s infinite linear; box-shadow: 0 0 8px var(--color-danger-strong);
}
@keyframes scan {
    0% { transform: translateY(-120px); opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { transform: translateY(120px); opacity: 0; }
}
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.tab-active { color: var(--color-primary); border-bottom: 3px solid var(--color-primary); }
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--color-scrollbar-thumb); border-radius: 4px; }

/* Utility remap to keep existing HTML/JS structure intact */
.bg-gray-50 { background-color: var(--color-app-bg) !important; }
.bg-white { background-color: var(--color-surface) !important; }
.bg-gray-100 { background-color: var(--color-surface-muted) !important; }
.bg-blue-50 { background-color: var(--color-primary-soft) !important; }
.bg-red-50,
.bg-red-100 { background-color: var(--color-danger-soft) !important; }
.bg-gray-900 { background-color: var(--color-surface-strong) !important; }

.text-gray-900,
.text-gray-800,
.text-gray-700 { color: var(--color-text-primary) !important; }
.text-gray-600,
.text-gray-500 { color: var(--color-text-secondary) !important; }
.text-gray-400,
.text-gray-300 { color: var(--color-text-muted) !important; }
.text-white { color: var(--color-text-inverse) !important; }

.text-blue-600,
.text-blue-500 { color: var(--color-primary) !important; }
.bg-blue-600,
.bg-blue-500 { background-color: var(--color-primary) !important; }

.text-red-600,
.text-red-500 { color: var(--color-danger) !important; }
.bg-red-500 { background-color: var(--color-danger-strong) !important; }

.text-green-600,
.text-green-500 { color: var(--color-success) !important; }
.bg-green-500 { background-color: var(--color-success-soft) !important; }

.border-gray-50,
.border-gray-100,
.border-gray-200 { border-color: var(--color-border-soft) !important; }
.border-gray-300 { border-color: var(--color-border-strong) !important; }

.active\:bg-gray-50:active { background-color: var(--color-surface-soft) !important; }
.active\:text-blue-600:active { color: var(--color-primary) !important; }
.active\:text-red-500:active { color: var(--color-danger) !important; }

.shadow-blue-200 { --tw-shadow-color: var(--color-primary-shadow) !important; }
.shadow-blue-100 { --tw-shadow-color: var(--color-primary-shadow) !important; }

.focus\:ring-blue-500:focus,
.focus\:ring-blue-400:focus {
    --tw-ring-color: var(--color-input-ring) !important;
}

.fixed.inset-0.bg-black\/80,
.fixed.inset-0.bg-black\/60,
.fixed.inset-0.bg-black {
    background-color: var(--color-overlay) !important;
}