/*  SETUP: DESIGN TOKENS
//////////////////////////////////////////////////////////////////////////////*/

@layer setup {
    :root {
        /*FONT STACKS*/
        --font-stack-supreme: "Supreme", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, sans-serif;
        --font-stack-code: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
        --font-stack-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, sans-serif;

        /*COLORS*/

        --color-black: hsl(0 0% 0% / 1);
        --color-white: hsl(0 0% 100% / 1);
        --color-red: hsl(347 72% 42% / 1);
        --color-green: hsl(150 80% 57% / 1);

        --color-red-50: color-mix(in oklab, var(--color-red), white 95%);
        --color-red-100: color-mix(in oklab, var(--color-red), white 85%);
        --color-red-200: color-mix(in oklab, var(--color-red), white 65%);
        --color-red-300: color-mix(in oklab, var(--color-red), white 40%);
        --color-red-400: color-mix(in oklab, var(--color-red), white 20%);
        --color-red-500: var(--color-red);
        --color-red-600: color-mix(in oklab, var(--color-red), black 20%);
        --color-red-700: color-mix(in oklab, var(--color-red), black 40%);
        --color-red-800: color-mix(in oklab, var(--color-red), black 60%);
        --color-red-900: color-mix(in oklab, var(--color-red), black 75%);
        --color-red-950: color-mix(in oklab, var(--color-red), black 95%);

        --color-green-50: color-mix(in oklab, var(--color-green), white 90%);
        --color-green-100: color-mix(in oklab, var(--color-green), white 80%);
        --color-green-200: color-mix(in oklab, var(--color-green), white 60%);
        --color-green-300: color-mix(in oklab, var(--color-green), white 40%);
        --color-green-400: color-mix(in oklab, var(--color-green), white 20%);
        --color-green-500: var(--color-green);
        --color-green-600: color-mix(in oklab, var(--color-green), black 20%);
        --color-green-700: color-mix(in oklab, var(--color-green), black 40%);
        --color-green-800: color-mix(in oklab, var(--color-green), black 60%);
        --color-green-900: color-mix(in oklab, var(--color-green), black 80%);
        --color-green-950: color-mix(in oklab, var(--color-green), black 95%);

        --color-neutral-50: hsl(0 0% 95% / 1);
        --color-neutral-100: hsl(0 0% 90% / 1);
        --color-neutral-200: hsl(0 0% 80% / 1);
        --color-neutral-300: hsl(0 0% 70% / 1);
        --color-neutral-400: hsl(0 0% 60% / 1);
        --color-neutral-500: hsl(0 0% 50% / 1);
        --color-neutral-600: hsl(0 0% 40% / 1);
        --color-neutral-700: hsl(0 0% 30% / 1);
        --color-neutral-800: hsl(0 0% 20% / 1);
        --color-neutral-900: hsl(0 0% 10% / 1);
        --color-neutral-950: hsl(0 0% 5% / 1);

        --color-grey-50: var(--color-neutral-50);
        --color-grey-100: var(--color-neutral-100);
        --color-grey-200: var(--color-neutral-200);
        --color-grey-300: var(--color-neutral-300);
        --color-grey-400: var(--color-neutral-400);
        --color-grey-500: var(--color-neutral-500);
        --color-grey-600: var(--color-neutral-600);
        --color-grey-700: var(--color-neutral-700);
        --color-grey-800: var(--color-neutral-800);
        --color-grey-900: var(--color-neutral-900);
        --color-grey-950: var(--color-neutral-950);

        /*FONT SIZES*/

        --font-size-xs: 0.7777777rem;
        --font-size-s: 0.888888rem;
        --font-size-m: 1rem;
        --font-size-l: 1.222222rem;
        --font-size-xl: 1.777777rem;
        --font-size-xxl: 2.6666666rem;

        /* --font-size-xs: 0.875rem;
        --font-size-s: 1rem;
        --font-size-m: 1.125rem;
        --font-size-l: 1.375rem;
        --font-size-xl: 2rem;
        --font-size-xxl: 3rem; */

        /*LINE HEIGHT*/

        --line-height-xs: 1.428571428571429;
        --line-height-s: 1.375;
        --line-height-m: 1.333333333;
        --line-height-l: 1.27272727;
        --line-height-xl: 1.125;
        --line-height-xxl: 1;

        /*FONT WEIGHTS*/

        --font-weight-thin: 100;
        --font-weight-extra-light: 200;
        --font-weight-light: 300;
        --font-weight-normal: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --font-weight-heavy: 800;
        --font-weight-black: 900;

        /*BORDERS*/

        --border-width: 2px;
        --border-style: solid;
        --border-color: hsl(0 0 0 / 1);
        --border-radius: 2px;

        /*BOX SHADOWS*/

        --box-shadow: 0px 1px 2px 0px rgba(60, 64, 67, 0.3), 0px 2px 6px 2px rgba(60, 64, 67, 0.15);

        /*SPACING*/

        --spacing-hairline: 1px;
        --spacing-xxs: 2px;
        --spacing-xs: 0.3125rem;
        --spacing-s: 0.625rem;
        --spacing-m: 1.25rem;
        --spacing-l: 2.5rem;
        --spacing-xl: 5rem;

        --wp--preset--spacing--hairline: var(--spacing-hairline);
        --wp--preset--spacing--xxs: var(--spacing-xxs);
        --wp--preset--spacing--xs: var(--spacing-xs);
        --wp--preset--spacing--s: var(--spacing-s);
        --wp--preset--spacing--m: var(--spacing-m);
        --wp--preset--spacing--l: var(--spacing-l);
        --wp--preset--spacing--xl: var(--spacing-xl);

        --wp--preset--color--red: var(--color-red);

        /*LAYOUT*/

        /*SEPARATOR*/

        --separator-width: 2.5rem;
        --separator-height: 0.63888rem;

        /*ANIMATIONS*/

        --animation-duration: 0.3s;
    }
}