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

@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 500 600;
    font-display: swap;
    src: url("../fonts/fraunces-latin.woff2") format("woff2");
}

:root {
    --color-navy: #19374a;
    --color-navy-deep: #122c3d;
    --color-blue: #eaf2f7;
    --color-blue-line: #c7d9e4;
    --color-sage: #697c60;
    --color-sage-dark: #4d654d;
    --color-sage-light: #ecf0e7;
    --color-terracotta: #b8663f;
    --color-peach: #f4e5db;
    --color-cream: #f8f6f0;
    --color-white: #ffffff;
    --color-text: #334a57;
    --color-muted: #546570;
    --color-border: #d8dedb;
    --font-body: "DM Sans", sans-serif;
    --font-heading: "Fraunces", Georgia, serif;
    --text-small: 1rem;
    --text-body: 1.125rem;
    --text-h1: clamp(2.65rem, 5.1vw, 4.65rem);
    --text-h2: clamp(2.1rem, 3.5vw, 3.25rem);
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-5: 3rem;
    --space-6: 4.5rem;
    --space-section: clamp(4rem, 7.5vw, 7rem);
    --radius-small: 0.5rem;
    --radius-medium: 1.25rem;
    --shadow-soft: 0 12px 36px rgb(25 55 74 / 7%);
    --transition: 180ms ease;
    --content-width: 1200px;
    --page-gutter: clamp(1.25rem, 4.5vw, 4rem);
}