:root {

    /* typography */
    --font-family:            "Public Sans", sans-serif;
    --font-size-xs:           0.625rem;  /* 10px */
    --font-size-s:            0.75rem;   /* 12px */
    --font-size-sm:           0.875rem;  /* 14px */
    --font-size-base:         1rem;      /* 16px */
    --font-size-m:            1.125rem;  /* 18px */
    --font-size-l:            1.25rem;   /* 20px */
    --font-size-xl:           1.5rem;    /* 24px */
    --font-size-2xl:          2rem;      /* 32px */
    --font-size-3xl:          2.5rem;    /* 40px */
    --font-size-4xl:          3rem;      /* 48px */
    --font-size-5xl:          4rem;      /* 64px */
    --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;
}