/* =========================================
   Design Tokens (HSL System)
   ========================================= */
:root {
    --color-bg-page: 216 33% 98%;
    --color-surface: 0 0% 100%;
    --color-surface-hover: 216 50% 98%;
    
    --color-edu-blue: 209 100% 23%;
    --color-edu-blue-light: 208 65% 95%;
    --color-edu-green: 166 100% 24%;
    --color-edu-green-light: 166 46% 94%;
    --color-edu-accent: 30 71% 51%;
    
    --color-text-main: 220 26% 14%;
    --color-text-desc: 218 17% 35%;
    --color-text-muted: 214 20% 69%;
    
    --color-correct: 150 48% 35%;
    --color-correct-bg: 139 75% 87%;
    --color-wrong: 0 61% 48%;
    --color-wrong-bg: 0 96% 92%;
    
    --bg-page: hsl(var(--color-bg-page));
    --surface: hsl(var(--color-surface));
    --surface-hover: hsl(var(--color-surface-hover));
    --edu-blue: hsl(var(--color-edu-blue));
    --edu-blue-light: hsl(var(--color-edu-blue-light));
    --edu-green: hsl(var(--color-edu-green));
    --edu-green-light: hsl(var(--color-edu-green-light));
    --edu-accent: hsl(var(--color-edu-accent));
    --text-main: hsl(var(--color-text-main));
    --text-desc: hsl(var(--color-text-desc));
    --text-muted: hsl(var(--color-text-muted));
    --correct: hsl(var(--color-correct));
    --correct-bg: hsl(var(--color-correct-bg));
    --wrong: hsl(var(--color-wrong));
    --wrong-bg: hsl(var(--color-wrong-bg));
    
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 999px;
    --border-soft: 1px solid hsl(214 32% 91%);
    
    --shadow-card: 0 4px 16px hsl(var(--color-edu-blue) / 6%);
    --shadow-hover: 0 12px 32px hsl(var(--color-edu-blue) / 12%);
    --shadow-nav: 0 4px 20px hsl(0 0% 0% / 5%);
    --shadow-float: 0 10px 40px hsl(0 0% 0% / 8%);
    
    --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    --font-serif: "Noto Serif SC", "Times New Roman", serif;
}