:root {
    color-scheme: light dark;

    --bg: #ffffff;
    --bg-secondary: #f5f5f5;
    --text: #222222;
    --text-secondary: #666666;
    --border: #dcdcdc;
    --surface: rgba(255, 255, 255, 0.72);
    --surface-strong: rgba(255, 255, 255, 0.9);
    --shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
    --input-bg: rgba(255, 255, 255, 0.82);
    --accent: #2563eb;
    --accent-strong: #1d4ed8;
    --accent-rgb: 37, 99, 235;
    --accent-soft: #60a5fa;
    --button-radius-lg: 0.85rem;
    --button-radius-md: 14px;
    --button-radius-pill: 999px;
    --nav-bg: #222222;
    --nav-text: #ffffff;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #121212;
        --bg-secondary: #1e1e1e;
        --text: #e5e5e5;
        --text-secondary: #aaaaaa;
        --border: #3a3a3a;
        --surface: rgba(15, 23, 42, 0.72);
        --surface-strong: rgba(15, 23, 42, 0.88);
        --shadow: 0 24px 60px rgba(2, 6, 23, 0.5);
        --input-bg: rgba(15, 23, 42, 0.76);
        --accent: #60a5fa;
        --accent-strong: #3b82f6;
        --accent-rgb: 96, 165, 250;
        --accent-soft: #60a5fa;
        --nav-bg: #000000;
        --nav-text: #ffffff;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, "Segoe UI", sans-serif;
}

main {
    padding: 1rem;
}

.text-muted {
    color: var(--text-secondary) !important;
}

.text-accent {
    color: var(--accent) !important;
}

.text-danger {
    color: #b91c1c !important;
}