@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/open-sans-v43-latin-ext-regular.woff2") format("woff2");
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/open-sans-v43-latin-ext-700.woff2") format("woff2");
}

:root {
    --color-orange: #f25f28;
    --color-orange-deep: #d94c1a;
    --color-ink: #081820;
    --color-ink-soft: #0c242e;
    --color-text: #10212b;
    --color-muted: #64727b;
    --color-kicker: #7e8f99;
    --color-surface: #ffffff;
    --color-surface-soft: #f5f8fa;
    --color-surface-mist: #e7eef3;
    --color-line: #dce4e8;
    --color-on-dark: #f4f7f8;
    --color-on-dark-muted: #b8c4cb;

    --font-sans: "Open Sans", sans-serif;

    --container: 90rem;
    --content-max: var(--container);
    --gutter: clamp(1.25rem, 4vw, 3rem);
    --section-space: clamp(2.75rem, 5vw, 4.5rem);
    --spine-x: 5%;

    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4.5rem;

    --radius-sm: 0.125rem;
    --radius-md: 0.25rem;
    --radius-lg: 0.5rem;
    --radius-button: 0.125rem;
    --radius-pill: 0.125rem;

    --shadow-sm: 0 10px 28px rgba(8, 24, 32, 0.08);
    --shadow-md: 0 22px 50px rgba(8, 24, 32, 0.16);
    --shadow-device: 0 28px 70px rgba(0, 0, 0, 0.45);

    --transition-fast: 160ms ease;
    --transition: 220ms ease;

    --text-body: 1rem;
    --text-small: 0.875rem;
    --text-kicker: 0.875rem;
    --text-h1: clamp(2.125rem, 1.216rem + 2.565vw, 3.85rem);
    --text-h2: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
    --text-h3: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
    --leading-body: 1.5;
    --leading-tight: 0.98;

    --header-height: 4.625rem;
    --nav-breakpoint: 72em;
    --signal-stroke: 2px;
}