:root {
    color-scheme: light dark;

    --clr-base: hsl(32deg, 57%, 95%);
    --clr-surface: hsl(35deg, 100%, 98%);
    --clr-overlay: hsl(33deg, 43%, 91%);
    --clr-muted: hsl(257deg, 9%, 61%);
    --clr-subtle: hsl(248deg, 12%, 52%);
    --clr-text: hsl(248deg, 19%, 40%);
    --clr-love: hsl(343deg, 35%, 55%);
    --clr-gold: hsl(35deg, 81%, 56%);
    --clr-rose: hsl(3deg, 53%, 67%);
    --clr-pine: hsl(197deg, 53%, 34%);
    --clr-foam: hsl(189deg, 30%, 48%);
    --clr-iris: hsl(268deg, 21%, 57%);
    --clr-low: hsl(25deg, 35%, 93%);
    --clr-med: hsl(10deg, 9%, 86%);
    --clr-high: hsl(315deg, 4%, 80%);

    /* font family */
    --ff-heading: 'Montserrat',
        sans-serif;
    --ff-body: 'Inter',
        sans-serif;

    /* font size */
    --fs-100: clamp(0.7813rem, 0.7748rem + 0.0325vw, 0.8rem);
    --fs-200: clamp(0.9375rem, 0.9159rem + 0.1085vw, 1rem);
    --fs-300: clamp(1.125rem, 1.0819rem + 0.2169vw, 1.25rem);
    --fs-400: clamp(1.35rem, 1.2767rem + 0.3688vw, 1.5625rem);
    --fs-500: clamp(1.62rem, 1.5051rem + 0.5781vw, 1.9531rem);
    --fs-600: clamp(1.9438rem, 1.7722rem + 0.8633vw, 2.4413rem);
    --fs-700: clamp(2.3325rem, 2.0844rem + 1.2484vw, 3.0519rem);
    --fs-800: clamp(2.7994rem, 2.4491rem + 1.7625vw, 3.815rem);

    /* @link https://utopia.fyi/space/calculator?c=320,18,1.2,1280,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

    /* space */
    --space-3xs: clamp(0.3125rem, 0.3125rem + 0vi, 0.3125rem);
    --space-2xs: clamp(0.5625rem, 0.5417rem + 0.1042vi, 0.625rem);
    --space-xs: clamp(0.875rem, 0.8542rem + 0.1042vi, 0.9375rem);
    --space-s: clamp(1.125rem, 1.0833rem + 0.2083vi, 1.25rem);
    --space-m: clamp(1.6875rem, 1.625rem + 0.3125vi, 1.875rem);
    --space-l: clamp(2.25rem, 2.1667rem + 0.4167vi, 2.5rem);
    --space-xl: clamp(3.375rem, 3.25rem + 0.625vi, 3.75rem);
    --space-2xl: clamp(4.5rem, 4.3333rem + 0.8333vi, 5rem);
    --space-3xl: clamp(6.75rem, 6.5rem + 1.25vi, 7.5rem);

    /* One-up pairs */
    --space-3xs-2xs: clamp(0.3125rem, 0.2083rem + 0.5208vi, 0.625rem);
    --space-2xs-xs: clamp(0.5625rem, 0.4375rem + 0.625vi, 0.9375rem);
    --space-xs-s: clamp(0.875rem, 0.75rem + 0.625vi, 1.25rem);
    --space-s-m: clamp(1.125rem, 0.875rem + 1.25vi, 1.875rem);
    --space-m-l: clamp(1.6875rem, 1.4167rem + 1.3542vi, 2.5rem);
    --space-l-xl: clamp(2.25rem, 1.75rem + 2.5vi, 3.75rem);
    --space-xl-2xl: clamp(3.375rem, 2.8333rem + 2.7083vi, 5rem);
    --space-2xl-3xl: clamp(4.5rem, 3.5rem + 5vi, 7.5rem);

    /* Two-up pairs */
    --space-3xs-xs: clamp(0.3125rem, 0.1042rem + 1.0417vi, 0.9375rem);
    --space-2xs-s: clamp(0.5625rem, 0.3333rem + 1.1458vi, 1.25rem);
    --space-xs-m: clamp(0.875rem, 0.5417rem + 1.6667vi, 1.875rem);
    --space-s-l: clamp(1.125rem, 0.6667rem + 2.2917vi, 2.5rem);
    --space-m-xl: clamp(1.6875rem, 1rem + 3.4375vi, 3.75rem);
    --space-l-2xl: clamp(2.25rem, 1.3333rem + 4.5833vi, 5rem);
    --space-xl-3xl: clamp(3.375rem, 2rem + 6.875vi, 7.5rem);

    /* Custom pairs */
    --space-xs-xl: clamp(0.875rem, -0.0833rem + 4.7917vi, 3.75rem);

    /* shadow */
    --clr-shadow: transparent;

    --shadow-low-1: 0px 1px 1.5px color-mix(in srgb, var(--clr-shadow), black 0%);
    --shadow-low-2: 0px 1.9px 2.8px color-mix(in srgb, var(--clr-shadow), black 23%);
    --shadow-low-3: 0px 4px 6px color-mix(in srgb, var(--clr-shadow), black 46%);
    --shadow-low: var(--shadow-low-1),
        var(--shadow-low-2),
        var(--shadow-low-3);

    --shadow-med-1: 0px 1px 1.1px color-mix(in srgb, var(--clr-shadow), black 0%);
    --shadow-med-2: 0px 2.3px 2.6px -1.2px color-mix(in srgb, var(--clr-shadow), black 12%);
    --shadow-med-3: 0px 4.4px 5px -1.2px color-mix(in srgb, var(--clr-shadow), black 23%);
    --shadow-med-4: 0px 8.7px 9.8px -1.9px color-mix(in srgb, var(--clr-shadow), black 35%);
    --shadow-med-5: 0px 16.7px 18.8px -2.5px color-mix(in srgb, var(--clr-shadow), black 46%);
    --shadow-med: var(--shadow-med-1),
        var(--shadow-med-2),
        var(--shadow-med-3),
        var(--shadow-med-4),
        var(--shadow-med-5);

    --shadow-high-1: 0px 1px 1.1px color-mix(in srgb, var(--clr-shadow), black 0%);
    --shadow-high-2: 0px 3.5px 3.9px -0.3px color-mix(in srgb, var(--clr-shadow), black 5%);
    --shadow-high-3: 0px 6px 6.8px -0.6px color-mix(in srgb, var(--clr-shadow), black 11%);
    --shadow-high-4: 0px 8.9px 10px -0.8px color-mix(in srgb, var(--clr-shadow), black 16%);
    --shadow-high-5: 0px 12.9px 14.5px -1.1px color-mix(in srgb, var(--clr-shadow), black 21%);
    --shadow-high-6: 0px 18.4px 20.7px -1.4px color-mix(in srgb, var(--clr-shadow), black 27%);
    --shadow-high-7: 0px 26.1px 29.4px -1.7px color-mix(in srgb, var(--clr-shadow), black 32%);
    --shadow-high-8: 0px 36.3px 40.8px -1.9px color-mix(in srgb, var(--clr-shadow), black 38%);
    --shadow-high-9: 0px 49.8px 56px -2.2px color-mix(in srgb, var(--clr-shadow), black 43%);
    --shadow-high-10: -0.1px 67px 75.4px -2.5px color-mix(in srgb, var(--clr-shadow), black 48%);
    --shadow-high: var(--shadow-high-1),
        var(--shadow-high-2),
        var(--shadow-high-3),
        var(--shadow-high-4),
        var(--shadow-high-5),
        var(--shadow-high-6),
        var(--shadow-high-7),
        var(--shadow-high-8),
        var(--shadow-high-9),
        var(--shadow-high-10);

    /* utils */
    --animate-f: cubic-bezier(.4, 0, .2, 1);
    --animate-t: .15s;

    --max-width: 780px;
    --padding-inline-m: max(calc((100% - var(--max-width)) / 2), var(--space-xs-m));
    --padding-inline-l: clamp(var(--space-xs-m), calc((100% - var(--max-width)) / 2), var(--space-xl-3xl));
}

@media (prefers-color-scheme: dark) {
    :root {
        --clr-base: hsl(249deg, 22%, 12%);
        --clr-surface: hsl(247deg, 23%, 15%);
        --clr-overlay: hsl(248deg, 25%, 18%);
        --clr-muted: hsl(249deg, 12%, 47%);
        --clr-subtle: hsl(248deg, 15%, 61%);
        --clr-text: hsl(245deg, 50%, 91%);
        --clr-love: hsl(343deg, 76%, 68%);
        --clr-gold: hsl(35deg, 88%, 72%);
        --clr-rose: hsl(2deg, 55%, 83%);
        --clr-pine: hsl(197deg, 49%, 38%);
        --clr-foam: hsl(189deg, 43%, 73%);
        --clr-iris: hsl(267deg, 57%, 78%);
        --clr-low: hsl(244deg, 18%, 15%);
        --clr-med: hsl(249deg, 15%, 28%);
        --clr-high: hsl(248deg, 13%, 36%);
    }
}
