/* Default Theme — VPN Zoo Opus */
/* Skin system: replace this file to change the look */

:root,
[data-theme="light"] {
    --c-bg: #fafafa;
    --c-surface: #ffffff;
    --c-surface-hover: #f5f5f5;
    --c-border: #cdced1;
    --c-border-hover: #d1d5db;
    --c-text: #111827;
    --c-text-sec: #6b7280;
    --c-text-muted: #9ca3af;
    --c-accent: #6366f1;
    --c-accent-hover: #4f46e5;
    --c-accent-bg: rgba(99, 102, 241, 0.08);
    --c-star: #f59e0b;
    --c-good: #10b981;
    --c-good-bg: rgba(16, 185, 129, 0.1);
    --c-mid: #f59e0b;
    --c-mid-bg: rgba(245, 158, 11, 0.1);
    --c-bad: #ef4444;
    --c-bad-bg: rgba(239, 68, 68, 0.1);
    --c-pro: #f59e0b;
    --c-hl-border: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
    --c-hl-glow: rgba(99, 102, 241, 0.15);
    --c-danger: #ef4444;
    --c-success: #10b981;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
    --radius: 12px;
    --radius-sm: 8px;
    --radius-xs: 6px;
}

[data-theme="dark"] {
    --c-bg: #0a0a0b;
    --c-surface: #141416;
    --c-surface-hover: #1c1c1f;
    --c-border: #27272a;
    --c-border-hover: #3f3f46;
    --c-text: #fafafa;
    --c-text-sec: #a1a1aa;
    --c-text-muted: #71717a;
    --c-accent: #818cf8;
    --c-accent-hover: #6366f1;
    --c-accent-bg: rgba(129, 140, 248, 0.1);
    --c-good-bg: rgba(16, 185, 129, 0.15);
    --c-mid-bg: rgba(245, 158, 11, 0.15);
    --c-bad-bg: rgba(239, 68, 68, 0.15);
    --c-hl-glow: rgba(129, 140, 248, 0.2);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
}

@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        --c-bg: #0a0a0b;
        --c-surface: #141416;
        --c-surface-hover: #1c1c1f;
        --c-border: #27272a;
        --c-border-hover: #3f3f46;
        --c-text: #fafafa;
        --c-text-sec: #a1a1aa;
        --c-text-muted: #71717a;
        --c-accent: #818cf8;
        --c-accent-hover: #6366f1;
        --c-accent-bg: rgba(129, 140, 248, 0.1);
        --c-good-bg: rgba(16, 185, 129, 0.15);
        --c-mid-bg: rgba(245, 158, 11, 0.15);
        --c-bad-bg: rgba(239, 68, 68, 0.15);
        --c-hl-glow: rgba(129, 140, 248, 0.2);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
    }
}