:root {
    --color-bg: #f4f5f8;
    --color-surface: #ffffff;
    --color-surface-muted: #f1f3f8;
    --color-border: #d7dbe6;
    --color-text: #111827;
    --color-text-muted: #667085;
    --color-accent: #4f46e5;
    --color-accent-strong: #4338ca;
    --color-accent-soft: #e9e8ff;
    --color-success: #0f9f6e;
    --color-success-soft: #ecfdf5;
    --color-warning: #d97706;
    --color-warning-soft: #fffbeb;
    --color-danger: #dc2626;
    --color-danger-soft: #fef2f2;
    --color-info: #0ea5e9;
    --color-info-soft: #f0f9ff;

    --color-study: #4f46e5;
    --color-quiz: #f59e0b;
    --color-story: #10b981;

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;

    --shadow-1: 0 1px 2px rgba(17, 24, 39, 0.08);
    --shadow-2: 0 8px 20px rgba(17, 24, 39, 0.08);
    --shadow-3: 0 18px 40px rgba(17, 24, 39, 0.12);

    --duration-fast: 140ms;
    --duration-base: 220ms;
    --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-bs-theme="dark"] {
    --color-bg: #0f172a;
    --color-surface: #172235;
    --color-surface-muted: #202d42;
    --color-border: #3a4a64;
    --color-text: #f3f6ff;
    --color-text-muted: #9ca3af;
    --color-accent: #818cf8;
    --color-accent-strong: #6366f1;
    --color-accent-soft: rgba(99, 102, 241, 0.18);
    --color-success: #34d399;
    --color-warning: #f59e0b;
    --color-danger: #f87171;
    --color-danger-soft: rgba(248, 113, 113, 0.15);
    --color-info: #38bdf8;
    --color-info-soft: rgba(56, 189, 248, 0.15);

    --color-study: #818cf8;
    --color-quiz: #fbbf24;
    --color-story: #34d399;
}