/* 
 * Font sizes enerated using https://typescale.net/
 * Settings: 
 * - base font size: 16
 * - font scale: perfect fourth (1.333)
 * - line height / letter spacing: both normal
 * - round values: on
 * - fluid typography (scale for mobile): on 
*/

/* Fuzzy Bubbles */
@import url('https://fonts.googleapis.com/css2?family=Fuzzy+Bubbles:wght@400;700&display=swap');
/* Jost (futura clone lol) */
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

/* Fluid Typography with CSS clamp() */
:root {
	/* Font Family */
	--font-family: 'Jost', 'Helvetica', 'Arial', sans-serif;

	/* Type Scale */
	--display-lg-size: clamp(2.569rem, calc(2.106rem + 2.603vw), 3.842rem);
	--display-lg-weight: 800;
	--display-lg-line-height: 1.73;
	--display-lg-letter-spacing: 0.008em;

	--display-md-size: clamp(2.283rem, calc(1.933rem + 1.971vw), 3.247rem);
	--display-md-weight: 800;
	--display-md-line-height: 1.73;
	--display-md-letter-spacing: 0.008em;

	--h1-size: clamp(2.029rem, calc(1.769rem + 1.462vw), 2.744rem);
	--h1-weight: 700;
	--h1-line-height: 1.78;
	--h1-letter-spacing: 0.012em;

	--h2-size: clamp(1.603rem, calc(1.473rem + 0.731vw), 1.960rem);
	--h2-weight: 600;
	--h2-line-height: 1.78;
	--h2-letter-spacing: 0.016em;

	--h3-size: clamp(1.424rem, calc(1.340rem + 0.475vw), 1.657rem);
	--h3-weight: 600;
	--h3-line-height: 1.78;
	--h3-letter-spacing: 0.016em;

	--h4-size: clamp(1.266rem, calc(1.217rem + 0.274vw), 1.400rem);
	--h4-weight: 500;
	--h4-line-height: 1.84;
	--h4-letter-spacing: 0.02em;

	--h5-size: clamp(1.194rem, calc(1.159rem + 0.191vw), 1.287rem);
	--h5-weight: 500;
	--h5-line-height: 1.84;
	--h5-letter-spacing: 0.02em;

	--h6-size: clamp(1.125rem, calc(1.104rem + 0.119vw), 1.183rem);
	--h6-weight: 500;
	--h6-line-height: 1.84;
	--h6-letter-spacing: 0.02em;

	--body-xl-size: clamp(1.061rem, calc(1.051rem + 0.055vw), 1.088rem);
	--body-xl-weight: 400;
	--body-xl-line-height: 1.84;
	--body-xl-letter-spacing: 0.024em;

	--body-size: clamp(1.000rem, calc(1.000rem + 0.000vw), 1.000rem);
	--body-weight: 400;
	--body-line-height: 1.84;
	--body-letter-spacing: 0.024em;

	--body-sm-size: clamp(0.943rem, calc(0.951rem + -0.048vw), 0.919rem);
	--body-sm-weight: 400;
	--body-sm-line-height: 1.84;
	--body-sm-letter-spacing: 0.024em;

	--caption-lg-size: clamp(0.889rem, calc(0.905rem + -0.089vw), 0.845rem);
	--caption-lg-weight: 400;
	--caption-lg-line-height: 1.9;
	--caption-lg-letter-spacing: 0.024em;

	--caption-size: clamp(0.838rem, calc(0.860rem + -0.125vw), 0.777rem);
	--caption-weight: 400;
	--caption-line-height: 1.9;
	--caption-letter-spacing: 0.024em;

	--caption-sm-size: clamp(0.790rem, calc(0.817rem + -0.155vw), 0.714rem);
	--caption-sm-weight: 300;
	--caption-sm-line-height: 1.9;
	--caption-sm-letter-spacing: 0.024em;

	--overline-size: clamp(0.745rem, calc(0.777rem + -0.180vw), 0.657rem);
	--overline-weight: 500;
	--overline-line-height: 1.9;
	--overline-letter-spacing: 0.024em;
}

html {
	font-family: var(--font-family);
	font-size: 100%;
	/* 16px */
}

body {
	font-size: var(--body-size);
	font-weight: var(--body-weight);
	line-height: var(--body-line-height);
	letter-spacing: var(--body-letter-spacing);
}

h1 {
	font-size: var(--h1-size);
	font-weight: var(--h1-weight);
	line-height: var(--h1-line-height);
	letter-spacing: var(--h1-letter-spacing);
}

h2 {
	font-size: var(--h2-size);
	font-weight: var(--h2-weight);
	line-height: var(--h2-line-height);
	letter-spacing: var(--h2-letter-spacing);
}

h3 {
	font-size: var(--h3-size);
	font-weight: var(--h3-weight);
	line-height: var(--h3-line-height);
	letter-spacing: var(--h3-letter-spacing);
}

h4 {
	font-size: var(--h4-size);
	font-weight: var(--h4-weight);
	line-height: var(--h4-line-height);
	letter-spacing: var(--h4-letter-spacing);
}

h5 {
	font-size: var(--h5-size);
	font-weight: var(--h5-weight);
	line-height: var(--h5-line-height);
	letter-spacing: var(--h5-letter-spacing);
}

h6 {
	font-size: var(--h6-size);
	font-weight: var(--h6-weight);
	line-height: var(--h6-line-height);
	letter-spacing: var(--h6-letter-spacing);
}

p,
li {
	font-size: var(--body-size);
	font-weight: var(--body-weight);
	line-height: var(--body-line-height);
	letter-spacing: var(--body-letter-spacing);
}

li {
	margin-bottom: 0.5em;
}

.text-body-xl {
	font-size: var(--body-xl-size);
	font-weight: var(--body-xl-weight);
	line-height: var(--body-xl-line-height);
	letter-spacing: var(--body-xl-letter-spacing);
}

.text-body-sm {
	font-size: var(--body-sm-size);
	font-weight: var(--body-sm-weight);
	line-height: var(--body-sm-line-height);
	letter-spacing: var(--body-sm-letter-spacing);
}

.text-caption-lg {
	font-size: var(--caption-lg-size);
	font-weight: var(--caption-lg-weight);
	line-height: var(--caption-lg-line-height);
	letter-spacing: var(--caption-lg-letter-spacing);
}

.text-caption {
	font-size: var(--caption-size);
	font-weight: var(--caption-weight);
	line-height: var(--caption-line-height);
	letter-spacing: var(--caption-letter-spacing);
	font-style: italic;
}

.text-caption-sm {
	font-size: var(--caption-sm-size);
	font-weight: var(--caption-sm-weight);
	line-height: var(--caption-sm-line-height);
	letter-spacing: var(--caption-sm-letter-spacing);
}

.text-overline {
	font-size: var(--overline-size);
	font-weight: var(--overline-weight);
	line-height: var(--overline-line-height);
	letter-spacing: var(--overline-letter-spacing);
	text-transform: uppercase;
}

/* .display-lg {
	font-size: var(--display-lg-size);
	font-weight: var(--display-lg-weight);
	line-height: var(--display-lg-line-height);
	letter-spacing: var(--display-lg-letter-spacing);
} */

.display-lg {
	font-size: 5em;
	font-weight: 800;
	line-height: 1em;
	letter-spacing: 2px;
}

.display-md {
	font-size: var(--display-md-size);
	font-weight: var(--display-md-weight);
	line-height: var(--display-md-line-height);
	letter-spacing: var(--display-md-letter-spacing);
}

mark {
	font-family: 'Fuzzy Bubbles', 'Comic Sans MS', fantasy;
	font-weight: 700;
	/* colors are in styles.css; this file is only for font and fontsize */
}