/*==========================================================
    Sean B Shop Marketplace
    File: assets/css/core/typography.css
    Description: Global Typography
==========================================================*/


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

body{

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

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

    font-weight:var(--fw-normal);

    line-height:var(--lh-normal);

    color:var(--text-primary);

}


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

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

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

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

    color:var(--text-primary);

    line-height:1.2;

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

}


h1{

    font-size:clamp(2.25rem,4vw,3.5rem);

}


h2{

    font-size:clamp(1.875rem,3vw,2.75rem);

}


h3{

    font-size:clamp(1.5rem,2.5vw,2.125rem);

}


h4{

    font-size:clamp(1.25rem,2vw,1.5rem);

}


h5{

    font-size:1.125rem;

}


h6{

    font-size:1rem;

}


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

p{

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

    color:var(--text-secondary);

    line-height:1.7;

}


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

a{

    color:var(--link);

    transition:color var(--transition-fast);

}


a:hover{

    color:var(--link-hover);

}


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

small{

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

    color:var(--text-muted);

}


/*==========================================================
    LEAD TEXT
==========================================================*/

.lead{

    font-size:1.125rem;

    font-weight:var(--fw-normal);

    line-height:1.8;

    color:var(--text-secondary);

}


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

.text-primary{

    color:var(--text-primary);

}

.text-secondary{

    color:var(--text-secondary);

}

.text-muted{

    color:var(--text-muted);

}

.text-light{

    color:var(--text-light);

}

.text-white{

    color:var(--white);

}

.text-success{

    color:var(--color-success);

}

.text-danger{

    color:var(--color-danger);

}

.text-warning{

    color:var(--color-warning);

}

.text-info{

    color:var(--color-info);

}


/*==========================================================
    TEXT ALIGNMENT
==========================================================*/

.text-left{

    text-align:left;

}

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}

.text-justify{

    text-align:justify;

}


/*==========================================================
    FONT WEIGHTS
==========================================================*/

.fw-light{

    font-weight:var(--fw-light);

}

.fw-normal{

    font-weight:var(--fw-normal);

}

.fw-medium{

    font-weight:var(--fw-medium);

}

.fw-semibold{

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

}

.fw-bold{

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

}

.fw-black{

    font-weight:var(--fw-black);

}


/*==========================================================
    TEXT TRANSFORM
==========================================================*/

.text-uppercase{

    text-transform:uppercase;

}

.text-lowercase{

    text-transform:lowercase;

}

.text-capitalize{

    text-transform:capitalize;

}


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

.tracking-tight{

    letter-spacing:var(--tracking-tight);

}

.tracking-normal{

    letter-spacing:var(--tracking-normal);

}

.tracking-wide{

    letter-spacing:var(--tracking-wide);

}


/*==========================================================
    TEXT DECORATION
==========================================================*/

.text-underline{

    text-decoration:underline;

}

.text-line-through{

    text-decoration:line-through;

}

.text-none{

    text-decoration:none;

}


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

ul.list{

    list-style:disc;

    padding-left:1.5rem;

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

}


ol.list{

    list-style:decimal;

    padding-left:1.5rem;

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

}


.list li{

    margin-bottom:.5rem;

}


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

blockquote{

    padding:var(--space-5);

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

    border-left:5px solid var(--color-primary);

    background:var(--gray-50);

    color:var(--text-secondary);

    font-style:italic;

}


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

code{

    background:var(--gray-100);

    color:var(--color-danger);

    padding:.15rem .35rem;

    border-radius:4px;

    font-size:.9em;

}


pre{

    overflow:auto;

    padding:var(--space-5);

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

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

    background:var(--gray-900);

    color:var(--white);

}


pre code{

    background:none;

    color:inherit;

    padding:0;

}


/*==========================================================
    HORIZONTAL RULE
==========================================================*/

hr{

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

    border:0;

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

}


/*==========================================================
    MARKETPLACE TITLES
==========================================================*/

.section-title{

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

    font-size:1.75rem;

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

    margin-bottom:.5rem;

    color:var(--text-primary);

}


.section-subtitle{

    font-size:1rem;

    color:var(--text-muted);

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

}


.page-title{

    font-size:2rem;

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

    color:var(--text-primary);

}


.product-title{

    font-size:1rem;

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

    color:var(--text-primary);

    line-height:1.45;

}


.product-price{

    font-size:1.25rem;

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

    color:var(--color-danger);

}


.product-old-price{

    color:var(--text-muted);

    text-decoration:line-through;

    font-size:.95rem;

}


.product-rating{

    color:#f5a623;

    font-size:.9rem;

}


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

@media (max-width:992px){

    h1{

        font-size:2.5rem;

    }

    h2{

        font-size:2rem;

    }

}


@media (max-width:768px){

    body{

        font-size:.95rem;

    }

    h1{

        font-size:2rem;

    }

    h2{

        font-size:1.75rem;

    }

    h3{

        font-size:1.5rem;

    }

    .section-title{

        font-size:1.5rem;

    }

}


@media (max-width:576px){

    body{

        font-size:.92rem;

    }

    h1{

        font-size:1.75rem;

    }

    h2{

        font-size:1.5rem;

    }

    h3{

        font-size:1.3rem;

    }

    .page-title{

        font-size:1.6rem;

    }

}