/* ======================================================
   SEAN B SOLUTIONS
   GLOBAL TYPOGRAPHY SYSTEM

   File:
   /public_html/assets/css/typography.css

   Production Version
====================================================== */


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


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap');





/* ======================================================
   BASE TYPOGRAPHY
====================================================== */


body{


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

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

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

    color:var(--text);

    line-height:1.7;

}





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


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


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

    color:var(--primary);

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

    line-height:1.2;

    letter-spacing:-.3px;

}





h1{


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

}



h2{


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

}



h3{


    font-size:var(--heading-md);

}



h4{


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

}



h5,
h6{


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

}





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


p{


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

    color:var(--text-light);

    line-height:1.8;

}





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


a{


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

    transition:var(--transition);

}





/* ======================================================
   NAVIGATION TEXT
====================================================== */


.nav-links a{


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

    font-weight:600;

    letter-spacing:.2px;

}





/* ======================================================
   BUTTON TYPOGRAPHY
====================================================== */


button,
.btn,
.shop-link{


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

    font-weight:600;

    letter-spacing:.2px;

}





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


.section-title{


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

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

    font-weight:700;

    color:var(--primary);

    text-align:center;

}





.section-title span{


    color:var(--secondary);

}





.section-subtitle{


    max-width:700px;

    margin:15px auto 0;

    text-align:center;

    font-size:1.05rem;

    color:var(--text-light);

}





/* ======================================================
   SMALL LABELS / TAGS
====================================================== */


.section-tag{


    display:inline-block;


    font-size:.85rem;


    font-weight:700;


    text-transform:uppercase;


    letter-spacing:1px;


    color:var(--secondary);


}





/* ======================================================
   HERO TYPOGRAPHY
====================================================== */


.hero-title{


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


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


    font-weight:800;


    line-height:1.1;


}



.hero-title span{


    color:var(--secondary);


}




.hero-text{


    max-width:650px;


    font-size:1.15rem;


    line-height:1.8;


}





/* ======================================================
   FOOTER TYPOGRAPHY
====================================================== */


.footer h3,
.footer h4{


    color:white;


}



.footer p,
.footer a{


    color:rgba(255,255,255,.75);


}





/* ======================================================
   MOBILE TYPOGRAPHY
====================================================== */


@media(max-width:900px){



h1{


    font-size:2.5rem;


}



h2{


    font-size:2rem;


}



h3{


    font-size:1.5rem;


}



.section-title{


    font-size:2rem;


}



.hero-title{


    font-size:2.5rem;


}



.hero-text{


    font-size:1rem;


}



p{


    font-size:.95rem;


}



}





/* ======================================================
   SMALL PHONES
====================================================== */


@media(max-width:480px){



h1{


    font-size:2rem;


}



h2{


    font-size:1.7rem;


}



h3{


    font-size:1.3rem;


}



.section-title{


    font-size:1.7rem;


}



.hero-title{


    font-size:2rem;


}



.hero-text{


    font-size:.95rem;


}



body{


    font-size:.95rem;


}



}