:root {
    --color-bg: #faf9f5;
    --color-surface: #fffefa;
    --color-bg-alt: #f3f2ed;
    --color-black: #111111;
    --color-black-soft: #292929;
    --color-red: #d52b1e;
    --color-red-dark: #aa2118;
    --color-red-soft: #f7dfdb;
    --color-yellow: #f2c230;
    --color-blue: #2456a6;
    --color-gray: #686762;
    --color-light-gray: #d9d7d0;
    --color-dark-gray: #35342f;
    --color-success: #2f6b4f;

    --font-display: "Arial", "Helvetica Neue", sans-serif;
    --font-body: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Cascadia Mono", "Consolas", monospace;

    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 20px;
    --font-size-xl: 28px;
    --font-size-2xl: clamp(36px, 4.4vw, 60px);
    --font-size-3xl: clamp(48px, 6vw, 76px);

    --line-height: 1.55;
    --letter-spacing: .02em;
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 48px;
    --space-2xl: 88px;

    --border-thick: 2px;
    --border-thin: 1px;
    --border-radius: 0;
    --shadow-float: none;
    --shadow-float-hover: none;
    --shadow-float-strong: none;
    --header-height: 76px;
    --max-width: 1440px;
    --transition: 150ms ease;
}

@media (max-width: 768px) {
    :root {
        --header-height: 64px;
        --space-xl: 36px;
        --space-2xl: 58px;
    }
}