:root {
    --bg: #050505;
    --bg-elevated: #0a0a0b;
    --surface: #101114;
    --surface-2: #15161a;
    --surface-soft: rgba(255, 255, 255, 0.045);
    --surface-strong: rgba(13, 14, 18, 0.88);
    --text: #f7f8fb;
    --text-soft: #b0b4be;
    --muted: #777c88;
    --line: rgba(255, 255, 255, 0.09);
    --line-strong: rgba(255, 255, 255, 0.16);
    --accent: #6385ff;
    --accent-bright: #8da6ff;
    --accent-dark: #3155d9;
    --accent-soft: rgba(99, 133, 255, 0.13);
    --accent-glow: rgba(77, 112, 255, 0.34);
    --success: #62e6ad;
    --danger: #ff6e7d;
    --shadow-sm: 0 8px 30px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 24px 70px rgba(0, 0, 0, 0.34);
    --shadow-lg: 0 40px 120px rgba(0, 0, 0, 0.55);
    --font-display: "Space Grotesk", "Segoe UI Variable Display", "Segoe UI", sans-serif;
    --font-body: Inter, "Segoe UI Variable Text", "Segoe UI", sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --container: 1280px;
    --header-height: 76px;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
    --section-space: clamp(6rem, 11vw, 10rem);
}

html[data-theme="light"] {
    --bg: #f5f7fc;
    --bg-elevated: #edf0f7;
    --surface: #ffffff;
    --surface-2: #e9edf6;
    --surface-soft: rgba(7, 14, 32, 0.045);
    --surface-strong: rgba(250, 251, 255, 0.9);
    --text: #0b1020;
    --text-soft: #495063;
    --muted: #697084;
    --line: rgba(10, 20, 44, 0.1);
    --line-strong: rgba(10, 20, 44, 0.18);
    --accent: #315ce8;
    --accent-bright: #4d73ef;
    --accent-dark: #2345b4;
    --accent-soft: rgba(49, 92, 232, 0.11);
    --accent-glow: rgba(49, 92, 232, 0.2);
    --shadow-sm: 0 8px 30px rgba(41, 55, 85, 0.08);
    --shadow-md: 0 24px 70px rgba(41, 55, 85, 0.13);
    --shadow-lg: 0 40px 120px rgba(41, 55, 85, 0.18);
}