:root {

    /* typography */
    --font-family:            "Public Sans", sans-serif;
    --font-size-xs:           clamp(0.6875rem, 0.670rem + 0.089vw, 0.75rem);    /* 11→12px */
    --font-size-s:            clamp(0.8125rem, 0.795rem + 0.089vw, 0.875rem);   /* 13→14px */
    --font-size-sm:           clamp(0.9375rem, 0.920rem + 0.089vw, 1rem);       /* 15→16px */
    --font-size-base:         clamp(1.2rem,    1.164rem + 0.179vw, 1.4rem);     /* 12→14px */
    --font-size-m:            clamp(1.125rem,  1.089rem + 0.179vw, 1.25rem);    /* 18→20px */
    --font-size-l:            clamp(1.1875rem, 1.134rem + 0.268vw, 1.375rem);   /* 19→22px */
    --font-size-xl:           clamp(1.375rem,  1.304rem + 0.357vw, 1.625rem);   /* 22→26px */
    --font-size-2xl:          clamp(1.625rem,  1.482rem + 0.714vw, 2.125rem);   /* 26→34px */
    --font-size-3xl:          clamp(1.75rem,   1.500rem + 1.25vw,  2.625rem);   /* 28→42px */
    --font-size-4xl:          clamp(1.875rem,  1.518rem + 1.786vw, 3.125rem);   /* 30→50px */
    --font-size-5xl:          clamp(2.375rem,  1.875rem + 2.5vw,   4.125rem);   /* 38→66px */
    --font-weight-light:      300;
    --font-weight-regular:    400;
    --font-weight-medium:     500;
    --line-height-base:       1.4;
    --letter-spacing-tight:   -0.01em;
    --letter-spacing-tighter: -0.02em;

    /* color — primary */
    --color-green:            #003d32;
    --color-green-soft:       #025f52;
    --color-green-05:         rgba(0, 61, 50, 0.051);
    --color-green-10:         rgba(0, 61, 50, 0.102);
    --color-green-15:         rgba(0, 61, 50, 0.149);
    --color-green-20:         rgba(0, 61, 50, 0.2);
    --color-green-50:         rgba(0, 61, 50, 0.502);
    --color-green-70:         rgba(0, 61, 50, 0.702);
    --color-snow-white:       #fcfcf7;
    --color-white:            #ffffff;

    /* color — text */
    --text-primary:           #003d32;
    --text-secondary:         rgba(0, 61, 50, 0.702);
    --text-disabled:          rgba(0, 61, 50, 0.502);
    --text-error:             #eb5757;
    --text-warning:           #ebb057;
    --text-inverse:           #fcfcf7;
    --text-inverse-secondary: rgba(252, 252, 247, 0.7);

    /* color — fill/background */
    --fill-primary:           #fcfcf7;  /* snow white */
    --fill-secondary:         #F7F4EF;  /* yellowish white */
    --fill-tertiary:          #eff1e4;  /* foam white */
    --fill-neutral-light:     #f9f9f9;
    --fill-neutral-medium:    #efefef;
    --fill-neutral-dark:      #e6e6e6;
    --fill-brand:             #003d32;
    --fill-brand-subtle:      #025f52;
    --fill-bright:            #ffffff;

    /* color — outline/border */
    --outline-primary:        #003d32;
    --outline-neutral:        #d2d8d0;
    --outline-light:          #fcfcf7;
    --outline-error:          #eb5757;
    --outline-primary-10:     rgba(0, 61, 50, 0.102);

    /* color — neutral scale */
    --neutral-20:             #f9f9f9;
    --neutral-40:             #efefef;
    --neutral-60:             #e6e6e6;
    --neutral-faded-20:       #cdd9d6;
    --neutral-faded-40:       #9ab2ac;
    --neutral-faded-60:       #648c83;

    /* color — scrims */
    --scrim-dark-20:          rgba(0, 0, 0, 0.2);
    --scrim-dark-50:          rgba(0, 0, 0, 0.5);
    --scrim-glass-dark-08:    rgba(87, 94, 85, 0.08);
    --scrim-glass-dark-35:    rgba(87, 94, 85, 0.35);

    /* color — guidance */
    --color-success:          #d3fa99;
    --color-success-soft:     #e9f0ca;
    --color-error:            #eb5757;
    --color-warning:          #ebb057;

    /* border radius */
    --radius-xs:              0.25rem;  /* 4px  */
    --radius-s:               0.5rem;   /* 8px  */
    --radius-sm:              0.75rem;  /* 12px */
    --radius-m:               1rem;     /* 16px */
    --radius-l:               1.5rem;   /* 24px */
    --radius-xl:              2rem;     /* 32px */
    --radius-pill:            99em;

    /* spacing */
    --space-1:                0.25rem;  /* 4px  */
    --space-2:                0.5rem;   /* 8px  */
    --space-3:                0.75rem;  /* 12px */
    --space-4:                1rem;     /* 16px */
    --space-5:                1.25rem;  /* 20px */
    --space-6:                1.5rem;   /* 24px */
    --space-8:                2rem;     /* 32px */
    --space-10:               2.5rem;   /* 40px */
    --space-14:               3.5rem;   /* 56px */
    --space-20:               5rem;     /* 80px */
    --space-gutter:           1.25rem;
    --space-inner:            2rem;

    /* transitions */
    --trs:                    all 0.3s ease-in-out;
    --trs-time:               0.3s;
    --trs-fast:               0.15s;

    /* state / opacity */
    --state-hovered:          rgba(0, 0, 0, 0.08);
    --state-focused:          rgba(0, 0, 0, 0.12);
    --state-pressed:          rgba(0, 0, 0, 0.12);
    --opacity-active:         0.7;
    --opacity-hover:          0.8;
    --opacity-disabled:       0.4;
}