/* ==========================================================
   ADMIN CSS FRAMEWORK
   File : base/typography.css
   Purpose : Typography System
========================================================== */

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

body{
    color:var(--text);
    font-size:var(--font-md);
    line-height:1.6;
    font-weight:var(--fw-normal);
}

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

h1,
h2,
h3,
h4,
h5,
h6{
    margin:0;
    color:var(--heading);
    font-weight:var(--fw-bold);
    line-height:1.25;
}

h1{
    font-size:2rem;
}

h2{
    font-size:1.75rem;
}

h3{
    font-size:1.5rem;
}

h4{
    font-size:1.25rem;
}

h5{
    font-size:1.125rem;
}

h6{
    font-size:1rem;
}

/* ===========================
   PARAGRAPH
=========================== */

p{
    margin:0 0 1rem;
    color:var(--paragraph);
    line-height:1.7;
}

/* ===========================
   PAGE TITLE
=========================== */

.page-title h2{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0;
    color:var(--heading);
    font-size:var(--font-title);
    font-weight:var(--fw-bold);
    line-height:1.2;
}

.page-title p{
    margin-top:6px;
    margin-bottom:0;
    color:var(--muted);
    font-size:var(--font-subtitle);
}

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

small,
.small{
    font-size:var(--font-sm);
    color:var(--muted);
}

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

.lead{
    font-size:1.125rem;
    color:var(--paragraph);
    font-weight:var(--fw-normal);
    line-height:1.8;
}

/* ===========================
   FONT SIZE
=========================== */

.fs-xs{
    font-size:var(--font-xs)!important;
}

.fs-sm{
    font-size:var(--font-sm)!important;
}

.fs-md{
    font-size:var(--font-md)!important;
}

.fs-lg{
    font-size:var(--font-lg)!important;
}

.fs-xl{
    font-size:var(--font-xl)!important;
}

/* ===========================
   FONT WEIGHT
=========================== */

.fw-normal{
    font-weight:var(--fw-normal)!important;
}

.fw-medium{
    font-weight:var(--fw-medium)!important;
}

.fw-semibold{
    font-weight:var(--fw-semibold)!important;
}

.fw-bold{
    font-weight:var(--fw-bold)!important;
}

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

.text-primary{
    color:var(--primary)!important;
}

.text-success{
    color:var(--success)!important;
}

.text-info{
    color:var(--info)!important;
}

.text-warning{
    color:var(--warning)!important;
}

.text-danger{
    color:var(--danger)!important;
}

.text-secondary{
    color:var(--secondary)!important;
}

.text-muted{
    color:var(--muted)!important;
}

.text-white{
    color:#ffffff!important;
}

/* ===========================
   TEXT ALIGN
=========================== */

.text-start{
    text-align:left!important;
}

.text-center{
    text-align:center!important;
}

.text-end{
    text-align:right!important;
}

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

.text-uppercase{
    text-transform:uppercase!important;
}

.text-lowercase{
    text-transform:lowercase!important;
}

.text-capitalize{
    text-transform:capitalize!important;
}

/* ===========================
   TEXT WRAP
=========================== */

.text-nowrap{
    white-space:nowrap!important;
}

.text-break{
    word-break:break-word;
    overflow-wrap:break-word;
}

/* ===========================
   ELLIPSIS
=========================== */

.text-ellipsis{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

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

.link{
    color:var(--primary);
    transition:var(--transition);
}

.link:hover{
    color:var(--primary-hover);
}

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

@media (max-width:768px){

    h1{
        font-size:1.75rem;
    }

    h2{
        font-size:1.5rem;
    }

    h3{
        font-size:1.3rem;
    }

    .page-title h2{
        font-size:22px;
    }

    .page-title p{
        font-size:14px;
    }

}

@media (max-width:576px){

    .page-title h2{
        font-size:20px;
    }

    .page-title p{
        font-size:13px;
    }

}