:root {
    --bg-page: #f8fafc;
    --bg-card: #ffffff;
    --bg-hover: #f9fafb;
    --border-color: #e6eefb;

    --primary-color: #1f5fe0;
    --accent-color: #60a5fa;

    --text-primary: #0f172a;
    --text-secondary: #6b7280;

    --success-color: #059669;
    --danger-color: #ef4444;
    --warning-color: #f59e0b;

    --text: var(--text-primary);
    --primary: var(--primary-color);
    --muted: var(--text-secondary);
    --card-bg: linear-gradient(180deg, var(--bg-card), var(--bg-hover));
}

:root[data-theme="dark"] {
    --bg-page: #0b1220;
    --bg-card: #0f1724;
    --bg-hover: #111827;
    --border-color: rgba(255,255,255,0.04);

    --primary-color: #60a5fa;
    --accent-color: #3b82f6;

    --text-primary: #e6eef8;
    --text-secondary: #94a3b8;

    --success-color: #10b981;
    --danger-color: #ef4444;
    --warning-color: #f59e0b;

    --text: var(--text-primary);
    --primary: var(--primary-color);
    --muted: var(--text-secondary);
    --card-bg: linear-gradient(180deg, var(--bg-card), var(--bg-hover));
}

.bg-page { background: var(--bg-page); }
.bg-card { background: var(--bg-card); }
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.btn-primary { background: var(--primary-color); color: #fff; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --bg-page: #0b1220;
        --bg-card: #0f1724;
        --bg-hover: #111827;
        --border-color: rgba(255,255,255,0.04);

        --primary-color: #60a5fa;
        --accent-color: #3b82f6;

        --text-primary: #e6eef8;
        --text-secondary: #94a3b8;
    }
}