/* Self-hosted web fonts (latin subset). "optional": a font that isn't ready by the first
   render is skipped for that page view instead of swapping in later, so text never shifts.
   The fonts used above the fold are preloaded by each page, so they're normally ready.
   DM Sans is only used at 12-16px: its optical size axis is pinned at 14 (63 KB -> 23 KB). */
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: optional;
    src: url(fonts/dm-sans-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    font-display: optional;
    src: url(fonts/poppins-400-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 500;
    font-display: optional;
    src: url(fonts/poppins-500-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    font-display: optional;
    src: url(fonts/poppins-600-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700;
    font-display: optional;
    src: url(fonts/poppins-700-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched fallbacks: text keeps the same size while the web fonts load (avoids layout shift) */
@font-face {
    font-family: "Poppins Fallback";
    src: local("Arial"), local("Liberation Sans");
    ascent-override: 93.62%;
    descent-override: 31.21%;
    line-gap-override: 8.92%;
    size-adjust: 112.16%;
}

@font-face {
    font-family: "DM Sans Fallback";
    src: local("Arial"), local("Liberation Sans");
    ascent-override: 94.9%;
    descent-override: 29.66%;
    line-gap-override: 0%;
    size-adjust: 104.53%;
}

:root {
    /* fonts */
    --font-family-title: Poppins, "Poppins Fallback", sans-serif;
    --font-family-body: "DM Sans", "DM Sans Fallback", sans-serif;

    --font-size-4xl: 89.9px;
    --font-size-3xl: 67.42px;
    --font-size-2xl: 50.57px;
    --font-size-xl: 37.93px;
    --font-size-lg: 28.44px;
    --font-size-md: 21.33px;
    --font-size-sm: 16px;
    --font-size-xs: 12px;

    --line-height-xl: 88px;
    --line-height-lg: 80px;
    --line-height-md: 72px;
    --line-height-sm: 64px;
    --line-height-xs: 56px;

    /* colors */
    --on-surface: #e6e0e9;
    --on-surface-variant: #cac4d0;
    --tertiary: #7d5260;
    --tertiary-container: #633b48;
    --on-tertiary-container: #ffd8e4;
    --primary: #d0bcff;
    --on-primary: #381e72;
    --primary-container: #4f378b;
    --on-primary-opacity-10: rgba(56, 30, 114, 0.1);
    --on-primary-opacity-08: rgba(230, 224, 233, 0.08);

    /* surfaces */
    --surface: #141218;
    --surface-container-lowest: #36343b;
    --surface-container-low: #1d1b20;
    --surface-container: #211f26;
    --surface-container-high: #2b2930;
    --surface-container-highest: #36343b;

    /* misc */
    --radius-xl: 32px;
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 8px;

    /* spacing */
    --spacing-3xl: 48px;
    --spacing-2xl: 40px;
    --spacing-xl: 32px;
    --spacing-lg: 24px;
    --spacing-md: 16px;
    --spacing-smd: 12px;
    --spacing-sm: 8px;
    --spacing-xs: 4px;
}