@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/InterVariable.woff2") format("woff2")
         tech("variations");
}

@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/InterVariable-Italic.woff2") format("woff2")
         tech("variations");
}

:root {
    --size-100: clamp(0.7035rem, 0.8131rem + -0.1414vi, 0.7813rem);
    --size-200: clamp(0.9375, 0.9374rem + 0.0004vi, 0.9377);
    --size-300: 1rem;
    --size-350: clamp(1.125rem, 1.082rem + 0.217vi, 1.25rem);
    --size-400: clamp(1.25rem, 1.207rem + 0.217vi, 1.375rem);
    --size-500: clamp(1.375rem, 1.245rem + 0.652vi, 1.75rem);
    --size-600: clamp(1.625rem, 1.408rem + 1.087vi, 2.25rem);
    --size-700: clamp(2rem, 1.652rem + 1.739vi, 3rem);
    --size-800: clamp(2.5rem, 1.978rem + 2.609vi, 4rem);
    --size-900: clamp(3rem, 2.174rem + 4.13vi, 5.375rem);

    --size-relative-300: clamp(1.1em, 1.048em + 0.261vi, 1.25em);
    --size-relative-400: clamp(1.25em, 1.207em + 0.217vi, 1.375em);

    --space-3xs: clamp(0.3125rem, 0.3125rem + 0vi, 0.3125rem);
    --space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vi, 0.625rem);
    --space-xs: clamp(0.875rem, 0.8494rem + 0.1136vi, 0.9375rem);
    --space-s: clamp(1.125rem, 1.0739rem + 0.2273vi, 1.25rem);
    --space-m: clamp(1.6875rem, 1.6108rem + 0.3409vi, 1.875rem);
    --space-l: clamp(2.25rem, 2.1477rem + 0.4545vi, 2.5rem);
    --space-xl: clamp(3.375rem, 3.2216rem + 0.6818vi, 3.75rem);
    --space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vi, 5rem);
    --space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vi, 7.5rem);

    --space-3xs-2xs: clamp(0.3125rem, 0.1847rem + 0.5682vw, 0.625rem);
    --space-2xs-xs: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
    --space-xs-s: clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
    --space-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
    --space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
    --space-l-xl: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
    --space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
    --space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);

    --space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);

    --font-family-primary: "Inter", Helvetica, Arial, sans-serif;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Primitive colors */
    --c-primary: oklch(0.8 0.1 285);
    --c-secondary: oklch(from var(--c-primary) l c calc(h + 20));
    --c-tertiary: oklch(from var(--c-primary) l c calc(h - 20));
    --c-complement: color-mix(in oklch longer hue,
                              var(--c-primary),
                              var(--c-secondary));
    --c-gray: oklch(from var(--c-secondary) l 0.025 h);

    --c-primary-100: color-mix(in oklch, var(--c-primary) 10%, black);
    --c-primary-200: color-mix(in oklch, var(--c-primary) 30%, black);
    --c-primary-300: color-mix(in oklch, var(--c-primary) 50%, black);
    --c-primary-400: color-mix(in oklch, var(--c-primary) 70%, black);
    --c-primary-500: var(--c-primary);
    --c-primary-600: color-mix(in oklch, var(--c-primary) 70%, white);
    --c-primary-700: color-mix(in oklch, var(--c-primary) 50%, white);
    --c-primary-800: color-mix(in oklch, var(--c-primary) 30%, white);
    --c-primary-900: color-mix(in oklch, var(--c-primary) 10%, white);

    --c-secondary-100: color-mix(in oklch, var(--c-secondary) 10%, black);
    --c-secondary-200: color-mix(in oklch, var(--c-secondary) 30%, black);
    --c-secondary-300: color-mix(in oklch, var(--c-secondary) 50%, black);
    --c-secondary-400: color-mix(in oklch, var(--c-secondary) 70%, black);
    --c-secondary-500: var(--c-secondary);
    --c-secondary-600: color-mix(in oklch, var(--c-secondary) 70%, white);
    --c-secondary-700: color-mix(in oklch, var(--c-secondary) 50%, white);
    --c-secondary-800: color-mix(in oklch, var(--c-secondary) 30%, white);
    --c-secondary-900: color-mix(in oklch, var(--c-secondary) 10%, white);

    --c-tertiary-100: color-mix(in oklch, var(--c-tertiary) 10%, black);
    --c-tertiary-200: color-mix(in oklch, var(--c-tertiary) 30%, black);
    --c-tertiary-300: color-mix(in oklch, var(--c-tertiary) 50%, black);
    --c-tertiary-400: color-mix(in oklch, var(--c-tertiary) 70%, black);
    --c-tertiary-500: var(--c-tertiary);
    --c-tertiary-600: color-mix(in oklch, var(--c-tertiary) 70%, white);
    --c-tertiary-700: color-mix(in oklch, var(--c-tertiary) 50%, white);
    --c-tertiary-800: color-mix(in oklch, var(--c-tertiary) 30%, white);
    --c-tertiary-900: color-mix(in oklch, var(--c-tertiary) 10%, white);

    --c-complement-100: color-mix(in oklch, var(--c-complement) 10%, black);
    --c-complement-200: color-mix(in oklch, var(--c-complement) 30%, black);
    --c-complement-300: color-mix(in oklch, var(--c-complement) 50%, black);
    --c-complement-400: color-mix(in oklch, var(--c-complement) 70%, black);
    --c-complement-500: var(--c-complement);
    --c-complement-600: color-mix(in oklch, var(--c-complement) 70%, white);
    --c-complement-700: color-mix(in oklch, var(--c-complement) 50%, white);
    --c-complement-800: color-mix(in oklch, var(--c-complement) 30%, white);
    --c-complement-900: color-mix(in oklch, var(--c-complement) 10%, white);

    --c-gray-100: color-mix(in oklch, var(--c-gray) 10%, black);
    --c-gray-200: color-mix(in oklch, var(--c-gray) 30%, black);
    --c-gray-300: color-mix(in oklch, var(--c-gray) 50%, black);
    --c-gray-400: color-mix(in oklch, var(--c-gray) 70%, black);
    --c-gray-500: var(--c-gray);
    --c-gray-600: color-mix(in oklch, var(--c-gray) 70%, white);
    --c-gray-700: color-mix(in oklch, var(--c-gray) 50%, white);
    --c-gray-800: color-mix(in oklch, var(--c-gray) 30%, white);
    --c-gray-900: color-mix(in oklch, var(--c-gray) 10%, white);

    /* Semantic colors */
    --c-brand-primary: var(--c-primary-700);
    --c-brand-secondary: var(--c-primary-800);
    --c-brand-tertiary: var(--c-primary-300);

    --c-surface-primary: var(--c-secondary-900);
    --c-surface-secondary: color-mix(in oklch,
                                     var(--c-surface-primary) 90%,
                                     var(--c-text-primary));
    --c-surface-tertiary: color-mix(in oklch,
                                    var(--c-surface-primary) 80%,
                                    var(--c-text-primary));
    --c-surface-light: color-mix(in oklch,
                                 var(--c-surface-primary) 50%,
                                 white);

    --c-text-primary: var(--c-secondary-100);
    --c-text-secondary: color-mix(in oklch,
                                  var(--c-text-primary) 80%,
                                  var(--c-surface-primary));
    --c-text-light: color-mix(in oklch, var(--c-text-primary) 2%, white);

    --c-action-primary: var(--c-primary-400);
    --c-action-secondary: color-mix(in oklch,
                                    var(--c-action-primary) 80%,
                                    var(--c-surface-primary));
    --c-action-tertiary: color-mix(in oklch,
                                   var(--c-action-primary) 80%,
                                   var(--c-text-primary));

    --c-accent-primary: var(--c-complement-400);
    --c-accent-secondary: color-mix(in oklch,
                                    var(--c-accent-primary) 80%,
                                    var(--c-surface-primary));
    --c-accent-tertiary: color-mix(in oklch,
                                   var(--c-accent-primary) 80%,
                                   var(--c-text-primary));
    --c-accent-light: oklch(from var(--c-accent-primary)
                            calc(l + 0.08) calc(c + 0.07) h);

    --c-banner-primary: var(--c-primary-100);
    --c-banner-secondary: color-mix(in oklch,
                                    var(--c-banner-primary) 80%,
                                    var(--c-primary-700));
    --c-banner-tertiary: var(--c-tertiary-500);
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 100%;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    scrollbar-gutter: stable;

    @media (prefers-reduced-motion: no-preference) {
        scroll-behavior: smooth;
        interpolate-size: allow-keywords;
    }
}

body {
    background-color: var(--c-surface-primary);
    color: var(--c-text-primary);
    font-size: var(--size-300);
    line-height: var(--size-relative-300);
    font-family: var(--font-family-primary);
    font-variant-ligatures: discretionary-ligatures;
}