/* ==========================================================================
   HAUS OF LESS
   Variables
   Version: 2.0
   Last Updated: July 2026

   Changes
   - Removed duplicate charcoal variables
   - Standardized formatting
   - Improved organization
   - Production-ready design tokens
   ========================================================================== */

:root{

    /* ==========================================================
       Brand Colors
    ========================================================== */

    --color-forest:#1F3A2E;
    --color-forest-light:#2C4B3E;
    --color-forest-dark:#15271F;

    --color-stone:#E7E2D9;

    --color-linen:#F7F5F1;
    --color-linen-dark:#F1EEE8;

    --color-brass:#B08A4E;
    --color-brass-light:#C79A52;

    --color-olive:#7C8362;

    --color-charcoal:#27332D;
    --color-charcoal-dark:#1B2520;
    --color-charcoal-light:#36433C;

    --color-white:#FFFFFF;
    --color-black:#000000;

    /* ==========================================================
       Text
    ========================================================== */

    --text-primary:var(--color-charcoal);
    --text-secondary:#545454;
    --text-muted:#777777;
    --text-white:#FFFFFF;

    /* ==========================================================
       Backgrounds
    ========================================================== */

    --background-body:var(--color-linen);
    --background-section:var(--color-white);
    --background-stone:var(--color-stone);
    --background-dark:var(--color-forest);

    /* ==========================================================
       Borders
    ========================================================== */

    --border-light:rgba(31,58,46,.08);
    --border-medium:rgba(31,58,46,.16);
    --border-dark:rgba(31,58,46,.28);

    /* ==========================================================
       Shadows
    ========================================================== */

    --shadow-xs:0 2px 8px rgba(0,0,0,.03);

    --shadow-sm:0 10px 24px rgba(0,0,0,.05);

    --shadow-md:0 20px 50px rgba(0,0,0,.08);

    --shadow-lg:0 40px 100px rgba(0,0,0,.12);

    /* ==========================================================
       Typography
    ========================================================== */

    --font-heading:
        "Cormorant Garamond",
        Georgia,
        serif;

    --font-body:
        "Inter",
        system-ui,
        sans-serif;

    /* ==========================================================
       Font Weights
    ========================================================== */

    --fw-regular:400;
    --fw-medium:500;
    --fw-semibold:600;
    --fw-bold:700;

    /* ==========================================================
       Font Sizes
    ========================================================== */

    --fs-xs:.75rem;
    --fs-sm:.875rem;
    --fs-base:1rem;
    --fs-md:1.125rem;
    --fs-lg:1.25rem;
    --fs-xl:1.5rem;
    --fs-2xl:2rem;
    --fs-3xl:2.75rem;
    --fs-4xl:3.75rem;
    --fs-5xl:4.75rem;

    --fs-display:clamp(3.6rem,7vw,6rem);

    /* ==========================================================
       Line Heights
    ========================================================== */

    --lh-tight:1;
    --lh-heading:1.08;
    --lh-body:1.85;

    /* ==========================================================
       Letter Spacing
    ========================================================== */

    --ls-tight:-.03em;
    --ls-normal:0;
    --ls-wide:.12em;
    --ls-wider:.22em;

    /* ==========================================================
       Layout
    ========================================================== */

    --container:1360px;
    --container-narrow:980px;
    --content-width:720px;

    /* ==========================================================
       Header
    ========================================================== */

    --header-height:92px;
    --header-height-scroll:74px;

    /* ==========================================================
       Buttons
    ========================================================== */

    --button-height:56px;
    --button-radius:999px;

    /* ==========================================================
       Border Radius
    ========================================================== */

    --radius-xs:8px;
    --radius-sm:12px;
    --radius-md:18px;
    --radius-lg:28px;
    --radius-round:999px;

    /* ==========================================================
       Spacing
    ========================================================== */

    --space-1:.5rem;
    --space-2:.75rem;
    --space-3:1rem;
    --space-4:1.5rem;
    --space-5:2rem;
    --space-6:3rem;
    --space-7:4rem;
    --space-8:5rem;
    --space-9:6rem;
    --space-10:8rem;
    --space-11:10rem;

    /* ==========================================================
       Animation
    ========================================================== */

    --transition-fast:.18s ease;
    --transition:.30s ease;
    --transition-slow:.45s ease;

    /* ==========================================================
       Effects
    ========================================================== */

    --blur:18px;

    /* ==========================================================
       Z-Index
    ========================================================== */

    --z-header:100;
    --z-menu:500;
    --z-overlay:600;
    --z-modal:1000;

}