@font-face {
    font-family: "Montserrat Alternates";
    src: url("../fonts/Montserrat Alternates.75ff7c9fbb8d.ttf") format("truetype");
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("../fonts/Manrope-Variable.c329d9ac3c7b.ttf") format("truetype-variations");
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
}

:root {
    --ds-color-ink: #17243d;
    --ds-color-muted: #626d81;
    --ds-color-line: #d9dfeb;
    --ds-color-paper: #f8f7f2;
    --ds-color-paper-blue: #edf4fa;
    --ds-color-paper-warm: #f5efe6;
    --ds-color-brand: #004b91;
    --ds-color-brand-dark: #00366a;
    --ds-color-accent: #e97832;
    --ds-color-white: #ffffff;
    --ds-color-success: #496f62;

    --ds-font-display: "Montserrat Alternates", "Trebuchet MS", sans-serif;
    --ds-font-body: "Manrope", "Segoe UI", Arial, sans-serif;

    --ds-text-xs: 0.78rem;
    --ds-text-sm: 0.9rem;
    --ds-text-body: 1rem;
    --ds-text-lead: clamp(1.05rem, 1.4vw, 1.22rem);
    --ds-text-h3: clamp(1.15rem, 1.8vw, 1.45rem);
    --ds-text-h2: clamp(2rem, 4vw, 4rem);
    --ds-text-h1: clamp(2.65rem, 5.4vw, 5.4rem);

    --ds-space-1: 0.5rem;
    --ds-space-2: 0.75rem;
    --ds-space-3: 1rem;
    --ds-space-4: 1.5rem;
    --ds-space-5: 2rem;
    --ds-space-6: 3rem;
    --ds-space-7: 4rem;
    --ds-space-8: 6rem;

    --ds-radius-small: 12px;
    --ds-radius-card: 22px;
    --ds-radius-pill: 999px;
    --ds-radius-photo: 22px 22px 48% 22px;

    --ds-shadow-soft: 0 18px 48px rgba(23, 36, 61, 0.09);
    --ds-shadow-lifted: 0 24px 64px rgba(23, 36, 61, 0.14);
    --ds-container: min(1180px, calc(100% - 64px));
    --ds-reading-width: 66ch;
    --ds-control-height: 52px;
}

@media screen and (max-width: 700px) {
    :root {
        --ds-container: min(100% - 32px, 1180px);
        --ds-space-7: 3rem;
        --ds-space-8: 4rem;
    }
}