/*
|--------------------------------------------------------------------------
| WeddingUI Typography
|--------------------------------------------------------------------------
| Version : 1.0.0
| Author  : WeddingUI
|--------------------------------------------------------------------------
*/

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

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');


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

body{
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-weight: var(--font-regular);
    color: var(--color-text);
    line-height: 1.7;
}


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

h1,
h2,
h3,
h4,
h5,
h6{
    font-family: var(--font-title);
    font-weight: var(--font-semibold);
    color: var(--color-primary);
    line-height: 1.2;
}


/* ==========================================================
   DISPLAY
========================================================== */

.display-1{
    font-family: var(--font-title);
    font-size: clamp(3.5rem, 7vw, 6rem);
    font-weight: var(--font-light);
    line-height: 1;
    letter-spacing: .02em;
}

.display-2{
    font-family: var(--font-title);
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: var(--font-light);
    line-height: 1.05;
}


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

.title-xl{
    font-family: var(--font-title);
    font-size: clamp(2.8rem,5vw,4rem);
    font-weight: var(--font-semibold);
}

.title-lg{
    font-family: var(--font-title);
    font-size: clamp(2.3rem,4vw,3.2rem);
    font-weight: var(--font-semibold);
}

.title-md{
    font-family: var(--font-title);
    font-size: clamp(1.8rem,3vw,2.5rem);
    font-weight: var(--font-medium);
}

.title-sm{
    font-family: var(--font-title);
    font-size: clamp(1.4rem,2vw,1.8rem);
    font-weight: var(--font-medium);
}


/* ==========================================================
   SUBTITLES
========================================================== */

.subtitle-lg{
    font-size: 1.35rem;
    font-weight: var(--font-light);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.subtitle{
    font-size: 1.1rem;
    font-weight: var(--font-medium);
    letter-spacing: .04em;
}


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

.body-lg{
    font-size: 1.15rem;
    line-height: 1.9;
}

.body{
    font-size: 1rem;
    line-height: 1.8;
}

.body-sm{
    font-size: .95rem;
    line-height: 1.7;
}


/* ==========================================================
   CAPTIONS
========================================================== */

.caption{
    font-size: .85rem;
    color: var(--color-text-light);
    letter-spacing: .05em;
}


/* ==========================================================
   OVERLINE
========================================================== */

.overline{
    font-size: .80rem;
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: .25em;
    color: var(--color-accent);
}


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

a{
    transition: color var(--transition-fast);
}

a:hover{
    color: var(--color-accent);
}


/* ==========================================================
   UTILITIES
========================================================== */

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

.text-left{
    text-align:left;
}

.text-right{
    text-align:right;
}

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

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

.text-accent{
    color:var(--color-accent);
}

.text-light{
    color:var(--color-text-light);
}

.text-white{
    color:var(--color-white);
}

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

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

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

.font-light{
    font-weight:var(--font-light);
}

.font-regular{
    font-weight:var(--font-regular);
}

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

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

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


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

@media (max-width:768px){

    body{
        font-size:.95rem;
    }

    .subtitle-lg{
        font-size:1rem;
    }

}