:root {
    --white: hsla(0, 0%, 100%, 1.000);
    --slate-50: hsla(208, 46%, 98%, 1.000);
    --slate-100: hsla(208, 34%, 96%, 1.000);
    --slate-200: hsla(213, 31%, 91%, 1.000);
    --slate-300: hsla(213, 27%, 84%, 1.000);
    --slate-400: hsla(215, 20%, 65%, 1.000);
    --slate-500: hsla(215, 16%, 47%, 1.000);
    --slate-600: hsla(214, 20%, 34%, 1.000);
    --slate-700: hsla(214, 26%, 26%, 1.000);
    --slate-800: hsla(217, 32%, 17%, 1.000);
    --slate-900: hsla(222, 49%, 11%, 1.000);
    --slate-950: hsla(231, 80%, 5%, 1.000);
    --black: hsla(0, 0%, 0%, 1);

    --spacing-0: 0px 0rem;
    --spacing-xs: 4px .25rem;
    --spacing-sm: 8px .5rem;
    --spacing-md: 12px .75rem;
    --spacing-lg: 16px 1rem;
    --spacing-xl: 20px 1.25rem;
    --spacing-xxl: 24px 1.5rem;

    --spacing-v-0: 0px;
    --spacing-v-xs: 4px;
    --spacing-v-sm: 8px;
    --spacing-v-md: 12px;
    --spacing-v-lg: 16px;
    --spacing-v-xl: 20px;
    --spacing-v-xxl: 24px;

    --spacing-h-0: 0rem;
    --spacing-h-xs: .25rem;
    --spacing-h-sm: .5rem;
    --spacing-h-md: .75rem;
    --spacing-h-lg: 1rem;
    --spacing-h-xl: 1.25rem;
    --spacing-h-xxl: 1.5rem;

    --radius-0: 0px;
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2x: 24px;

    --default-max-content-width: 90rem;
    --default-breakpoint-sm: 30rem;
    --default-breakpoint-md: 60rem;
    --default-breakpoint-lg: 90rem;

    --minor-second: 1.067;
    --major-second: 1.125;
    --minor-third: 1.2;
    --major-third: 1.25;
    --perfect-fourth: 1.333;
    --augmented-fourth: 1.414;
    --perfect-fifth: 1.5;
    --golden-ratio: 1.618;

}