/* ==========================================================================
   HAUS OF LESS
   Typography
   Version: 4.0
   Last Updated: July 2026

   Changes
   - Standardized typography system
   - Improved readability
   - Added accessibility improvements
   - Optimized responsive scaling
   ========================================================================== */


/* ==========================================================
   Body
========================================================== */

body{

    font-family:var(--font-body);
    font-size:var(--fs-base);
    font-weight:var(--fw-regular);
    line-height:1.8;

    color:var(--text-primary);
    background:var(--background-body);

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;

}


/* ==========================================================
   Headings
========================================================== */

h1,
h2,
h3,
h4,
h5,
h6{

    font-family:var(--font-heading);
    font-weight:500;

    color:var(--color-forest);

    line-height:var(--lh-heading);
    letter-spacing:-0.035em;

    text-wrap:balance;

}


/* ==========================================================
   Hero Heading
========================================================== */

h1{

    font-size:clamp(3.5rem,6vw,5.5rem);

}


/* ==========================================================
   Section Heading
========================================================== */

h2{

    font-size:clamp(2.75rem,4vw,4.5rem);

}


/* ==========================================================
   Card Heading
========================================================== */

h3{

    font-size:clamp(1.5rem,2vw,2rem);
    line-height:1.2;

}


/* ==========================================================
   Minor Heading
========================================================== */

h4{

    font-size:1.25rem;
    line-height:1.35;

}


/* ==========================================================
   Paragraphs
========================================================== */

p{

    margin-bottom:1.75rem;

    font-size:var(--fs-md);
    line-height:1.85;

    color:var(--text-secondary);

    text-wrap:pretty;

}

p:last-child{

    margin-bottom:0;

}


/* ==========================================================
   Strong
========================================================== */

strong{

    font-weight:600;
    color:var(--color-forest);

}


/* ==========================================================
   Links
========================================================== */

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

a:focus-visible{

    outline:2px solid var(--color-brass);
    outline-offset:4px;

}


/* ==========================================================
   Section Label
========================================================== */

.section-label{

    display:inline-block;

    margin-bottom:1rem;

    font-family:var(--font-body);
    font-size:.85rem;
    font-weight:600;

    letter-spacing:.22em;
    text-transform:uppercase;

    color:var(--color-brass);

}


/* ==========================================================
   Section Title
========================================================== */

.section-title{

    max-width:900px;
    margin:0 auto 2rem;

}


/* ==========================================================
   Section Description
========================================================== */

.section-description{

    max-width:760px;

    margin-inline:auto;

    font-size:1.2rem;
    line-height:1.9;

}


/* ==========================================================
   Lists
========================================================== */

ul,
ol{

    padding-left:1.25rem;

}

li{

    line-height:1.8;

}


/* ==========================================================
   Blockquote
========================================================== */

blockquote{

    margin:3rem 0;
    padding-left:2rem;

    border-left:3px solid var(--color-brass);

    font-family:var(--font-heading);
    font-size:clamp(2rem,3vw,3.2rem);
    line-height:1.25;

    color:var(--color-forest);

}


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

::selection{

    color:var(--color-white);
    background:var(--color-forest);

}


/* ==========================================================
   Responsive
========================================================== */

@media (max-width:992px){

    h1{

        font-size:clamp(3rem,7vw,4.75rem);

    }

    h2{

        font-size:clamp(2.5rem,5vw,3.75rem);

    }

    p{

        font-size:1.05rem;

    }

    .section-description{

        font-size:1.1rem;

    }

}

@media (max-width:768px){

    h1{

        font-size:clamp(2.6rem,9vw,3.75rem);

    }

    h2{

        font-size:clamp(2.2rem,7vw,3rem);

    }

    h3{

        font-size:1.4rem;

    }

    p{

        font-size:1rem;
        line-height:1.8;

    }

    .section-description{

        font-size:1.05rem;

    }

}