:root {
    --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

    --color-bg: #f5f6fb;
    --color-surface: #ffffff;
    --color-surface-muted: #f1f4fb;
    --color-surface-strong: #e9eef8;
    --color-primary: #3b82f6;
    --color-secondary: #14b8a6;
    --color-text: #0f172a;
    --color-muted: #5b6478;
    --color-border: rgba(15, 23, 42, 0.12);
    --color-ring: rgba(59, 130, 246, 0.25);

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 40px;
    --space-8: 56px;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    --shadow-sm: 0 8px 20px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 18px 40px rgba(15, 23, 42, 0.12);
    --shadow-lg: 0 26px 60px rgba(15, 23, 42, 0.18);

    --page-bg: radial-gradient(circle at top, #f9fafb 0%, #eef2ff 45%, #e2e8f0 100%);
    --nav-bg: rgba(255, 255, 255, 0.85);
    --nav-border: rgba(148, 163, 184, 0.35);
    --hero-overlay: linear-gradient(130deg, rgba(15, 23, 42, 0.9), rgba(37, 99, 235, 0.32));

    --bg-light: var(--color-bg);
    --bg-dark: #0f172a;
    --card-bg: var(--color-surface);
    --accent: var(--color-primary);
    --accent-dark: #2563eb;
    --text-dark: var(--color-text);
    --text-light: #f8fafc;
    --text-muted: var(--color-muted);
    --card-border: var(--color-border);
    --shadow: var(--shadow-md);
    --overlay: rgba(15, 23, 42, 0.6);
    --input-bg: #ffffff;
    --input-border: rgba(15, 23, 42, 0.18);
    --bg-card: var(--color-surface);
    --answer-closed-bg: rgba(148, 163, 184, 0.25);
    --answer-closed-text: rgba(71, 85, 105, 0.9);
}

[data-theme="dark"] {
    --color-bg: #0b1120;
    --color-surface: #121a2a;
    --color-surface-muted: #0f172a;
    --color-surface-strong: #1f2937;
    --color-primary: #60a5fa;
    --color-secondary: #2dd4bf;
    --color-text: #f8fafc;
    --color-muted: rgba(226, 232, 240, 0.7);
    --color-border: rgba(148, 163, 184, 0.2);
    --color-ring: rgba(96, 165, 250, 0.3);

    --page-bg: radial-gradient(circle at top, #0b1120 0%, #0f172a 45%, #111827 100%);
    --nav-bg: rgba(15, 23, 42, 0.85);
    --nav-border: rgba(148, 163, 184, 0.2);
    --hero-overlay: linear-gradient(130deg, rgba(7, 10, 24, 0.95), rgba(59, 130, 246, 0.2));

    --bg-dark: #070d1a;
    --card-bg: #111827;
    --accent-dark: #3b82f6;
    --text-light: #f8fafc;
    --input-bg: #0f172a;
    --input-border: rgba(148, 163, 184, 0.25);
    --overlay: rgba(2, 6, 23, 0.7);
    --shadow: 0 20px 50px rgba(2, 6, 23, 0.45);
    --bg-card: #111827;
    --answer-closed-bg: rgba(148, 163, 184, 0.2);
    --answer-closed-text: rgba(226, 232, 240, 0.7);
}

[data-theme="dark"] body {
    color-scheme: dark;
}