/* DEFINE TYPOGRAPHY FRAMEWORK VARIABLES */
:root {
    /* TYPOGRAPHY: TEXT SIZE SCALE */
    /* https://www.fluid-type-scale.com/calculate?minFontSize=16&minWidth=320&minRatio=1.125&maxFontSize=18&maxWidth=1280&maxRatio=1.2&steps=xs,s,m,l,xl&baseStep=m&prefix=text&decimals=2&useRems=on&remValue=16&previewFont=Inter&previewText=Preview&previewWidth=900 */
    --text-xs: clamp(0.79rem, -0.01vw + 0.79rem, 0.78rem);
    --text-s: clamp(0.89rem, 0.08vw + 0.87rem, 0.94rem);
    --text-m: clamp(1rem, 0.21vw + 0.96rem, 1.13rem);
    --text-l: clamp(1.13rem, 0.37vw + 1.05rem, 1.35rem);
    --text-xl: clamp(1.27rem, 0.59vw + 1.15rem, 1.62rem);

    /* TYPOGRAPHY: HEADING SIZE SCALE */
    /* https://www.fluid-type-scale.com/calculate?minFontSize=20&minWidth=320&minRatio=1.25&maxFontSize=22&maxWidth=1280&maxRatio=1.333&steps=6,5,4,3,2,1,title&baseStep=4&prefix=h&decimals=2&useRems=on&remValue=16&previewFont=Inter&previewText=Preview&previewWidth=900 */
    --h6: clamp(0.8rem, -0.04vw + 0.81rem, 0.77rem);
    --h5: clamp(1rem, 0.05vw + 0.99rem, 1.03rem);
    --h4: clamp(1.25rem, 0.21vw + 1.21rem, 1.38rem);
    --h3: clamp(1.56rem, 0.45vw + 1.47rem, 1.83rem);
    --h2: clamp(1.95rem, 0.82vw + 1.79rem, 2.44rem);
    --h1: clamp(2.44rem, 1.36vw + 2.17rem, 3.26rem);
    --h-title: clamp(3.05rem, 2.15vw + 2.62rem, 4.34rem);
}


/* TEXT SIZE UTILITY CLASSES */

/* Do not set 'body' typography in Theme Styles.
REMOVE any previous font size and line height in Theme Styles > Typography > Body */

.text-xl {
    font-size: var(--text-xl);
    line-height: 1.4;
}
.text-l {
    font-size: var(--text-l);
    line-height: 1.5;
}
body, .text-m {
    font-size: var(--text-m);
    line-height: 1.5;
}
.text-s {
    font-size: var(--text-s);
    line-height: 1.6;
}
.text-xs {
    font-size: var(--text-xs);
    line-height: 1.7;
}

/* HEADING SIZE UTILITY CLASSES */

/*  Do not set any headings typography in Theme Styles. 
REMOVE any font sizes or line heights on all heading levels in Theme Styles > Typography. */

h1, .h1 {
    font-size: var(--h1);
    line-height: 1.1;
}

h2, .h2 {
    font-size: var(--h2);
    line-height: 1.2;
}
h3, .h3 {
    font-size: var(--h3);
    line-height: 1.3;
}
h4, .h4 {
    font-size: var(--h4);
    line-height: 1.4;
}
h5, .h5 {
    font-size: var(--h5);
    line-height: 1.5;
}
h6, .h6 {
    font-size: var(--h6);
    line-height: 1.6;
}

header.entry-header .entry-title {
    font-size: var(--h-title);
    line-height: 1.05; 
}

h2, .entry-content :where(h2) {
    font-size: var(--h2);
    line-height: 1.2;
}

h3, .entry-content :where(h3) {
    font-size: var(--h3);
    line-height: 1.3;
}
h4, .entry-content :where(h4) {
    font-size: var(--h4);
    line-height: 1.4;
}
h5, .entry-content :where(h5) {
    font-size: var(--h5);
    line-height: 1.5;
}
h6, .entry-content :where(h6) {
    font-size: var(--h6);
    line-height: 1.6;
}