:root{

/* ========================================================================================== */
/*                                        Tokens Burger Nav Bar                               */
/* ========================================================================================== */

/* ========================= COLORS ========================= */

    --color-primary: #fff ;
    --color-secondary: #1c1c1c ;

    --color-hover: #bcbcbc;

/* ========================= FONTS ========================= */

    --font-primary: "Inter", sans-serif;
    --font-secondary: "Bebas Neue", sans-serif;

/* ========================= FONTS SIZES ========================= */

    --font-size-xlarge: clamp(1.75rem, 4vw, 3rem); /* 28px → 48px */
    --font-size-large: clamp(1.5rem, 1.1707rem + 2.439vw, 1.75rem); /* 24px → 28px */
    --font-size-medium: clamp(1.125rem, 0.622rem + 3.1707vw, 1.375rem); /* 18px → 22px */
    --font-size-regular: clamp(0.875rem, 0.0732rem + 3.9024vw, 1rem); /* 14px → 16px */
    --font-size-small: clamp(0.75rem, 0.5rem + 1.2vw, 0.875rem); /* 12px → 14px */

/* ========================= FONTS WEIGHTS ========================= */

    --font-weight-regular: 400;

/* ========================= LINE-HEIGHT ========================= */

    --line-height-large: 1.2;
    --line-height-medium: 1.2;
    --line-height-regular: 1.3;
    --line-height-small: 1.4;
    --line-heigth-xsmall: 1.1;

/* ========================= LETTER-SPACING ========================= */

        /* INTER */
    --letter-spacing-primary-large: 0.16em;
    --letter-spacing-primary: 0.04em;
    --letter-spacing-primary-soft: 0.03em;

        /* BEBAS NEUE */
    --letter-spacing-secondary: 0.08em;
    --letter-spacing-secondary-strong: 0.1em;

        /* SMALL TEXT */
    --letter-spacing-meta: 0.02em;

/* ========================= SPACE ========================= */

    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;

/* ========================= BORDER ========================= */

    --border-radius-card: 4px;

/* ========================= BORDER WIDTH ========================= */

    --border-width-hairline: 0.5px solid;
    --border-width-regular: 1px solid;

}