:root {

    /* TEXT SIZE SCALE */

    /* https://www.sat-fluid-type-scale.sat-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(1.26rem, -0.01vw + 1.27rem, 1.25rem);
--text-s: clamp(1.42rem, 0.07vw + 1.4rem, 1.5rem);
--text-m: clamp(1.6rem, 0.18vw + 1.54rem, 1.8rem);
--text-l: clamp(1.8rem, 0.32vw + 1.7rem, 2.16rem);
--text-xl: clamp(2.02rem, 0.51vw + 1.86rem, 2.59rem);


    /* HEADING SIZE SCALE */
    
    /* https://www.sat-fluid-type-scale.sat-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 */

/* You now don't need to set ANY typography in Theme Styles - not even body copy. The below code handles it all from here in one place. REMOVE any font sizes or line heights set for body copy in Bricks Theme Style typography settings. */

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


/* HEADING SIZE UTILITY CLASSES */

/*  REMOVE any font sizes or line heights set for all heading levels in Bricks Theme Style typography settings. */

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