:root{
    --ff-primary: 'Montserrat';
    --fw-thin: 200;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 900;
    --color-white: hsl(0, 0%, 100%);
    --color-white-80: hsla(0, 0%, 100%, 0.8);
    --color-black: hsl(0, 0%, 0%);
    --color-black-80: hsla(0, 0%, 0%, 0.8);
    --color-black-60: hsla(0, 0%, 0%, 0.6);
    --color-black-16: hsla(0, 0%, 0%, 0.16);
    --color-gray-50: hsl(220, 20%, 97%);
    --color-gray-100: hsl(0, 0%, 96%);
    --color-gray-200: hsl(0, 0%, 93%);
    --color-gray-300: hsl(0, 0%, 86%);
    --color-gray-400: hsl(0, 0%, 66%);
    --color-gray-600: hsl(202, 7%, 24%);
    --color-gray-700: hsl(20, 10%, 17%);
    --color-gray-900: hsl(0, 0%, 8%);
    --link-color-dark: var(--color-black);
    --link-color-dark-hover: var(--color-black-60);
    --link-color-light: var(--color-white);
    --link-color-light-hover: var(--color-white-80);
    --btn-dark-color: var(--color-white);
    --btn-dark-background-color: var(--color-black);
    --btn-dark-background-color-hover: var(--color-gray-700);
    --btn-dark-background-color-hover-60: var(--color-black-60);
    --btn-light-color: var(--color-black);
    --btn-light-background-color: var(--color-white);
    --btn-light-background-color-hover: var(--color-gray-200);
    --gutter-x: 15px;
    --gutter-y: 20px;
    --content-max-width: 1600px;
    --flow-spacing: 20px;
}
/* tokens */
.color-white{
    color: var(--color-white);
}
.bg-white{
    background-color: var(--color-white);
}
.bg-black{
    background-color: var(--color-black);
}
.text-white{
    color: var(--color-white);
}
.text-black{
    color: var(--color-black);
}
/* typography */
.ff-primary{
    font-family: var(--ff-primary), sans-serif;
}