/*  SETUP: VARIABLES
//////////////////////////////////////////////////////////////////////////////*/

@layer setup {
    :root {
        --font-family-code: var(--font-stack-code);
        --font-family-copy: var(--font-stack-supreme);
        --font-family-display: var(--font-stack-supreme);

        --font-size-copy: var(--font-size-m);
        --font-size-display: var(--font-size-xl);

        --line-height-copy: var(--line-height-m);
        --line-height-display: var(--line-height-xl);

        --font-weight-copy: 450;
        --font-weight-headings: 700;

        --width-column: 5rem;
        --grid-gap: 1.25rem;
        --grid-gap-vertical: 0;
        --page-margin: 2.5rem;
        --size-button: 2.5rem;

        --size-column: 5rem;
        --size-grid-gap: 1.25rem;
        --size-page-margin: 2.5rem;
        --size-button: 2.5rem;

        --component-padding: var(--spacing-s);

        --icon-stroke-width: 1px;

        /* TEXT COLORS */

        --color-text: var(--color-black);
        --color-links: var(--color-black);
        --color-links-hover: var(--color-red);

        /* BACKGROUND COLORS */

        --color-background-primary: var(--color-white);
        --color-background-secondary: var(--color-grey-light);
    }
}