/* =====================================================
   KASI MATTRESS
   TYPOGRAPHY
   Version: 1.0.0
   ===================================================== */

/* ==========================================
   BODY
========================================== */

body{
    font-family:var(--font-body);
    font-size:var(--font-size-base);
    font-weight:var(--font-weight-normal);
    line-height:var(--line-height);
    color:var(--text);
}

/* ==========================================
   HEADINGS
========================================== */

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

    margin-bottom:var(--space-4);

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

    font-weight:var(--font-weight-bold);

    line-height:1.2;

    letter-spacing:-0.02em;

    color:var(--text);

}

h1{

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

}

h2{

    font-size:clamp(2rem,4vw,var(--font-size-4xl));

}

h3{

    font-size:var(--font-size-3xl);

}

h4{

    font-size:var(--font-size-2xl);

}

h5{

    font-size:var(--font-size-xl);

}

h6{

    font-size:var(--font-size-lg);

}

/* ==========================================
   PARAGRAPHS
========================================== */

p{

    margin-bottom:var(--space-5);

    color:var(--text-light);

    font-size:var(--font-size-base);

    line-height:1.8;

}

/* ==========================================
   LINKS
========================================== */

a{

    transition:var(--transition-normal);

}

a:hover{

    color:var(--primary);

}

/* ==========================================
   SMALL TEXT
========================================== */

small{

    font-size:var(--font-size-sm);

    color:var(--text-muted);

}

/* ==========================================
   STRONG
========================================== */

strong{

    font-weight:var(--font-weight-semibold);

}

/* ==========================================
   LISTS
========================================== */

ul,
ol{

    margin-bottom:var(--space-5);

}

li{

    line-height:1.8;

}

/* ==========================================
   BLOCKQUOTE
========================================== */

blockquote{

    margin:var(--space-8) 0;

    padding:var(--space-6);

    border-left:4px solid var(--primary);

    background:var(--surface);

    border-radius:var(--radius-md);

    font-style:italic;

    color:var(--text-light);

}

/* ==========================================
   CODE
========================================== */

code{

    padding:2px 6px;

    border-radius:var(--radius-sm);

    background:var(--gray-100);

    font-family:Consolas, Monaco, monospace;

    font-size:90%;

}

/* ==========================================
   PRE
========================================== */

pre{

    overflow:auto;

    margin:var(--space-6) 0;

    padding:var(--space-6);

    border-radius:var(--radius-lg);

    background:var(--gray-900);

    color:var(--white);

}

pre code{

    padding:0;

    background:none;

    color:inherit;

}

/* ==========================================
   HR
========================================== */

hr{

    margin:var(--space-10) 0;

    border:none;

    border-top:1px solid var(--border);

}

/* ==========================================
   SECTION TITLES
========================================== */

.km-section-title{

    margin-bottom:var(--space-12);

    text-align:center;

}

.km-section-title span{

    display:inline-block;

    margin-bottom:var(--space-3);

    color:var(--primary);

    font-weight:var(--font-weight-semibold);

    text-transform:uppercase;

    letter-spacing:.08em;

}

.km-section-title h2{

    margin-bottom:var(--space-4);

}

.km-section-title p{

    max-width:700px;

    margin:0 auto;

}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width:768px){

    h1{

        line-height:1.15;

    }

    h2{

        line-height:1.2;

    }

    p{

        line-height:1.7;

    }

}