:root{
/* ========================================================================================== */
/*                                        Tokens Full Screen Nav Bar                          */
/* ========================================================================================== */

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

    --color-bg: #fafafa ;
    --color-text-primary: #151515 ;
    --color-text-secondary: #fafafa ;


    --color-bg-hover: #151515;
    --color-text-hover: #fafafa ;

    --color-neutral-p: #fafafa;
    --color-neutral-s: #000;

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

    --font-primary: "Cormorant", serif;
    --font-secondary: "Manrope", sans-serif;
    --font-accent: "Caveat", cursive;

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

    --fs-xl: clamp(4.5rem, 8vw, 9rem); /* ~ 56px → 144px */
    --fs-l: clamp(2.25rem, 4vw, 4.5rem); /* ~ 36px → 72px */
    --fs-m: clamp(1rem, 1.4vw, 1.25rem); /* 18px → 22px */
    --fs-r: clamp(0.875rem, 1.1vw, 1rem); /* 14px → 16px */
    --fs-s: clamp(0.75rem, 0.9vw, 0.975rem); /* 12px → 14px */

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

    --fw-xl:800;
    --fw-l: 700;
    --fw-m: 500;
    --fw-r: 400;
    --fw-s: 300;

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

    --lh-large: 1.4;
    --lh-medium: 1.3;
    --lh-regular: 1.05;
    --lh-small: 0.95;
    --lh-xsmall: 0.85;

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

        /* Cormorant */
    --ls-cormorant-wide: 0.09em;
    --ls-cormorant-default: 0.02em;
    --ls-cormorant-tight: 0.01em;

        /* Manrope */
    --ls-manrope-default: 0.08em;
    --ls-manrope-strong: 0.12em;

        /* Caveat */
    --ls-caveat-default: 0.01em; /* Using for handwriting */

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

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

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

    --border-primary : 1px dashed currentColor;
    --border-secondary: 1px dashed #fafafa;

}