:root {
    --vg-primary: #F4511E;
    --vg-secondary: #17181B;
    --vg-accent: #F59E0B;
    --vg-footer-bg: #121316;
    --vg-radius: 14px;
    --vg-container: 1200px;
    --vg-logo-h: 40px;
    --vg-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --vg-font-head: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --vg-font-mono: ui-monospace, "Cascadia Code", Consolas, "Liberation Mono", monospace;

    --vg-primary-dark: color-mix(in srgb, var(--vg-primary) 86%, #000);
    --vg-primary-soft: color-mix(in srgb, var(--vg-primary) 9%, #fff);
    --vg-primary-line: color-mix(in srgb, var(--vg-primary) 32%, #fff);
    --vg-secondary-soft: color-mix(in srgb, var(--vg-secondary) 6%, #fff);
    --vg-accent-soft: color-mix(in srgb, var(--vg-accent) 16%, #fff);
    --vg-on-primary: #FFFFFF;
    --vg-on-secondary: #FFFFFF;
    --vg-on-accent: #17181B;

    --vg-bg: #FFFFFF;
    --vg-bg-alt: #F6F6F3;
    --vg-surface: #FFFFFF;
    --vg-surface-2: #FAFAF7;
    --vg-border: #ECECEC;
    --vg-border-strong: #DCDCD8;
    --vg-text: #34363B;
    --vg-heading: #17181B;
    --vg-muted: #6B7280;
    --vg-link: var(--vg-primary);

    --vg-ok: #12855A;
    --vg-ok-soft: #E4F5EC;
    --vg-warn: #B26B00;
    --vg-warn-soft: #FBEFD8;
    --vg-err: #D33A2C;
    --vg-err-soft: #FBE7E4;
    --vg-info: #2563EB;
    --vg-info-soft: #E6EDFD;
    --vg-green: #12855A;
    --vg-blue: #2563EB;

    --vg-radius-sm: 8px;
    --vg-radius-lg: 20px;
    --vg-radius-pill: 999px;
    --vg-shadow-sm: 0 1px 2px rgba(23, 24, 27, .05), 0 1px 3px rgba(23, 24, 27, .06);
    --vg-shadow: 0 10px 30px -12px rgba(23, 24, 27, .18);
    --vg-shadow-lg: 0 30px 60px -24px rgba(23, 24, 27, .30);
    --vg-focus: 0 0 0 3px color-mix(in srgb, var(--vg-primary) 40%, transparent);
    --vg-gutter: clamp(16px, 4vw, 28px);
    --vg-section: clamp(60px, 8vw, 104px);
    --vg-header-h: 76px;
    --vg-ease: cubic-bezier(.2, .7, .2, 1);
    color-scheme: light;
}

html[data-theme="dark"] {
    --vg-primary-soft: color-mix(in srgb, var(--vg-primary) 22%, #17181B);
    --vg-primary-line: color-mix(in srgb, var(--vg-primary) 40%, #17181B);
    --vg-accent-soft: color-mix(in srgb, var(--vg-accent) 26%, #17181B);
    --vg-secondary: #0B0C0E;
    --vg-secondary-soft: rgba(255, 255, 255, .06);
    --vg-footer-bg: #0B0C0E;
    --vg-bg: #0E0F12;
    --vg-bg-alt: #141519;
    --vg-surface: #17181B;
    --vg-surface-2: #1E2024;
    --vg-border: #2A2C31;
    --vg-border-strong: #3B3E45;
    --vg-text: #CBCDD3;
    --vg-heading: #F5F6F7;
    --vg-muted: #9A9DA6;
    --vg-ok-soft: rgba(18, 133, 90, .20);
    --vg-warn-soft: rgba(178, 107, 0, .22);
    --vg-err-soft: rgba(211, 58, 44, .22);
    --vg-info-soft: rgba(37, 99, 235, .22);
    --vg-shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
    --vg-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
    --vg-shadow-lg: 0 30px 60px -22px rgba(0, 0, 0, .72);
    color-scheme: dark;
}