@font-face {
    font-family: "Golos Text";
    src: url("../fonts/golos-text-variable.ttf") format("truetype-variations");
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
}

:root {
    /* Brand primitives */
    --brand-primary: #30a0e7;
    --brand-strong: #1e73be;
    --brand-mist: #eaf6fd;

    /* Semantic colors */
    --surface-page: #ffffff;
    --surface-subtle: #f6f8fa;
    --surface-muted: #eef3f6;
    --surface-inverse: #1e73be;
    --text-primary: #1f2933;
    --text-secondary: #5e6a72;
    --text-tertiary: #7d8990;
    --text-on-brand: #ffffff;
    --border-default: #d9e2e8;
    --border-strong: #bdcbd3;
    --focus-ring: #1e73be;
    --error: #b42318;

    /* Type */
    --font-sans: "Golos Text", "Segoe UI", sans-serif;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --type-display: 64px;
    --type-h2: 42px;
    --type-h3: 26px;
    --type-lead: 19px;
    --type-body: 17px;
    --type-small: 14px;
    --type-caption: 12px;

    /* Layout */
    --layout-stage: 1760px;
    --layout-content: 1600px;
    --layout-reading: 760px;
    --page-gutter: 64px;
    --grid-gap: 24px;
    --section-space: 96px;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;

    /* Components */
    --radius-control: 4px;
    --radius-card: 8px;
    --radius-media: 8px;
    --control-height: 52px;
    --site-header-height: 88px;
    --shadow-raised: 0 8px 24px rgb(31 41 51 / 8%);
    --transition-fast: 180ms ease;
}

@media (max-width: 1799px) {
    :root {
        --page-gutter: 32px;
    }
}

@media (max-width: 1199px) {
    :root {
        --type-display: 52px;
        --type-h2: 36px;
        --type-h3: 24px;
        --type-lead: 18px;
        --page-gutter: 24px;
        --section-space: 80px;
    }
}

@media (max-width: 900px) {
    :root {
        --site-header-height: 72px;
    }
}

@media (max-width: 639px) {
    :root {
        --type-display: 38px;
        --type-h2: 30px;
        --type-h3: 22px;
        --type-lead: 17px;
        --type-body: 16px;
        --page-gutter: 16px;
        --grid-gap: 16px;
        --section-space: 64px;
    }
}

:root.accessibility-mode {
    --brand-primary: #000000;
    --brand-strong: #000000;
    --brand-mist: #ffffff;
    --surface-page: #ffffff;
    --surface-subtle: #ffffff;
    --surface-muted: #f2f2f2;
    --surface-inverse: #000000;
    --text-primary: #000000;
    --text-secondary: #000000;
    --text-tertiary: #1a1a1a;
    --text-on-brand: #ffffff;
    --border-default: #000000;
    --border-strong: #000000;
    --focus-ring: #000000;
    --type-lead: 20px;
    --type-body: 19px;
    --type-small: 16px;
    --type-caption: 14px;
    --shadow-raised: none;
}