*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	/* ------------------------------ TYPOGRAPHY ------------------------------ */
	/* Rules for readable text */
	--font-size-default: 16px;
	--line-height-default: --light-dark(1.5, 1.7);
	--line-height-headings: 1.2;
	--letter-spacing: calc(var(--font-size-default) * 0.06);
	--word-spacing: calc(var(--font-size-default) * 0.15);
	--paragraph-clamp: clamp(25ch, 90%, 75ch);

	/* Responsive headings */
	--font-size-page: clamp(4.209rem, calc(11vw + 1rem), 5.61rem);
	--font-size-section: clamp(3.157rem, calc(8vw + 1rem), 4.209rem);
	--font-size-card: clamp(2.369rem, calc(5.5vw + 1rem), 3.157rem);
	--font-size-paragraph: clamp(1.777rem, calc(3.6vw + 1rem), 2.369rem);
	--font-size-subparagraph: clamp(1.333rem, calc(2.3vw + 1rem), 1.777rem);

	/* ------------------------------ SPACING ------------------------------ */
	--spacing-base-unit: 0.5rem;
	--space-0: calc(0 * var(--spacing-base-unit));
	--space-025: calc(0.25 * var(--spacing-base-unit));
	--space-050: calc(0.5 * var(--spacing-base-unit));
	--space-075: calc(0.75 * var(--spacing-base-unit));
	--space-100: calc(1 * var(--spacing-base-unit));
	--space-150: calc(1.5 * var(--spacing-base-unit));
	--space-200: calc(2 * var(--spacing-base-unit));
	--space-250: calc(2.5 * var(--spacing-base-unit));
	--space-300: calc(3 * var(--spacing-base-unit));
	--space-400: calc(4 * var(--spacing-base-unit)); /* paragraph-space-bottom */
	--space-500: calc(5 * var(--spacing-base-unit));
	--space-600: calc(6 * var(--spacing-base-unit));
	--space-800: calc(8 * var(--spacing-base-unit));
	--space-1000: calc(10 * var(--spacing-base-unit));

	/* ------------------------------ Border ------------------------------ */
	--parent-radius: 15px;
	--child-radius: calc(var(--parent-radius) * 0.5);


	/* ------------------------------ COLOR ------------------------------ */
	color-scheme: light dark;
	--color-default: light-dark(#e8eeff, #414348);
	--color-highlight: light-dark(#caa737, #caa737);
	--color-text: light-dark(black, white);

	--pink: light-dark(hotpink, fuchsia);
	--red: light-dark(darksalmon, crimson);
	--purple: light-dark(violet, purple);
	--brown: light-dark(Tan, brown);

	--scheme: default;
	--mode: dark;
	color: white;

	--primary: #414348;
	--accent: #caa737;

	@supports (not (if())) {
		--primary: if(
			style(--scheme: default): var(--color-default) ;
				style(--scheme: blindness1): var(--pink) ; else: orange
		);

		--accent: if(
			style(--scheme: default): var(--color-highlight) ;
				style(--scheme: blindness1): var(--red) ; else: orange
		);
	}

	@media (prefers-color-scheme: light) {
		--mode: light;
		color: black;
	}
}

@property --primary {
	syntax: '<color>';
	inherits: true;
	initial-value: #414348;
}

@property --accent {
	syntax: '<color>';
	inherits: true;
	initial-value: #caa737;
}

@function --light-dark(--light-mode, --dark-mode) {
	result: if(style(--mode: dark): var(--dark-mode) ;
	else: var(--light-mode));
}

/* @function --light-dark(--light-mode, --dark-mode) {
	result: if(style(--mode: dark): var(--dark-mode) ; else: var(--light-mode));
} */

@function --darkest(--color) {
	result: oklch(from var(--color) calc(l - 0.1) c h);
}

@function --darken(--color) {
	result: oklch(from var(--color) calc(l - 0.05) c h);
}

@function --lighten(--color) {
	result: oklch(from var(--color) calc(l + 0.1) c h);
}

@function --lightest(--color) {
	result: oklch(from var(--color) calc(l + 0.15) c h);
}

@font-face {
	font-family: 'RobotoFlex';
	src: url('/fonts/RobotoFlex[GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght].ttf')
		format('truetype-variations');
	font-weight: 100 900;
	font-stretch: 75% 100%;
}

body {
	/* ------------------------------ TYPOGRAPHY ------------------------------ */
	font-family: 'RobotoFlex', sans-serif;
	font-optical-sizing: auto;
	font-size: var(--font-size-default);
	line-height: var(--line-height-default);
	letter-spacing: var(--letter-spacing);
	word-spacing: var(--word-spacing);

	/* ------------------------------ COLOR ------------------------------ */
	&:has(input[data-scheme='default']:checked) {
		--scheme: default;
	}

	&:has(input[data-scheme='blindness1']:checked) {
		--scheme: blindness1;
	}

	&:has(input[data-scheme='blindness2']:checked) {
		--scheme: blindness2;
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: var(--line-height-headings);
}

h1 {
	font-size: var(--font-size-page);
}

h2 {
	font-size: var(--font-size-section);
}

h3 {
	font-size: var(--font-size-card);
}

h4 {
	font-size: var(--font-size-paragraph);
}

h5 {
	font-size: var(--font-size-subparagraph);
}