:root {
    --primary: #22c7a8;
    --secondary: #4da3ff;
    --accent: #19b89a;
    --bg: #07111a;
    --bg-soft: #0b1723;
    --bg-elevated: #102131;
    --card-bg: rgba(19, 38, 54, 0.82);
    --card-bg-strong: rgba(24, 48, 67, 0.94);
    --text: #f3f7fb;
    --text-dim: #a9b8c7;
    --text-faint: #7d8d9d;
    --border: rgba(110, 154, 186, 0.18);
    --border-strong: rgba(110, 154, 186, 0.3);
    --success: #21c77a;
    --warning: #f5b940;
    --danger: #ff6b6b;
    --shadow-soft: 0 20px 45px rgba(0, 0, 0, 0.24);
    --shadow-strong: 0 28px 90px rgba(0, 0, 0, 0.35);
    --radius-sm: 14px;
    --radius-md: 20px;
    --radius-lg: 28px;
    --radius-pill: 999px;
    --font-sans: "Noto Sans KR", "Noto Sans", "Segoe UI", system-ui, sans-serif;
    --gradient-accent: linear-gradient(135deg, rgba(34, 199, 168, 0.95), rgba(77, 163, 255, 0.95));
    --gradient-surface: linear-gradient(180deg, rgba(19, 38, 54, 0.92), rgba(11, 23, 35, 0.96));
    --gradient-hero: radial-gradient(circle at top, rgba(34, 199, 168, 0.18), transparent 36%),
        radial-gradient(circle at 85% 10%, rgba(77, 163, 255, 0.16), transparent 28%),
        linear-gradient(180deg, #07111a 0%, #091420 42%, #0b1723 100%);
    color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        scroll-behavior: auto;
    }
}