/* Creative Comment tokens. Single source for colour, type, space and motion. */

@font-face {
	font-family: "Geist";
	src: url("../fonts/geist-latin-wght-normal.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Newsreader";
	src: url("../fonts/newsreader-latin-standard-normal.woff2") format("woff2");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Newsreader";
	src: url("../fonts/newsreader-latin-standard-italic.woff2") format("woff2");
	font-weight: 200 800;
	font-style: italic;
	font-display: swap;
}
/* Metric-matched fallbacks to keep the swap from shifting layout. */
@font-face {
	font-family: "Geist Fallback";
	src: local("Helvetica Neue"), local("Arial");
	size-adjust: 103%;
	ascent-override: 92%;
	descent-override: 22%;
}
@font-face {
	font-family: "Newsreader Fallback";
	src: local("Georgia"), local("Times New Roman");
	size-adjust: 94%;
	ascent-override: 98%;
	descent-override: 26%;
}

:root {
	/* Type */
	--font-sans: "Geist", "Geist Fallback", -apple-system, BlinkMacSystemFont, sans-serif;
	--font-serif: "Newsreader", "Newsreader Fallback", Georgia, serif;

	/* Fluid type scale, 320px to 1440px */
	--step--2: clamp(0.72rem, 0.70rem + 0.08vw, 0.78rem);
	--step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.9rem);
	--step-0: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
	--step-1: clamp(1.125rem, 1.07rem + 0.27vw, 1.3rem);
	--step-2: clamp(1.25rem, 1.15rem + 0.48vw, 1.6rem);
	--step-3: clamp(1.45rem, 1.27rem + 0.89vw, 2.1rem);
	--step-4: clamp(1.7rem, 1.38rem + 1.6vw, 2.85rem);
	--step-5: clamp(2rem, 1.47rem + 2.68vw, 3.9rem);
	--step-6: clamp(2.4rem, 1.54rem + 4.29vw, 5.4rem);
	--step-7: clamp(2.8rem, 1.5rem + 6.5vw, 7.4rem);

	--text-article: clamp(1.15rem, 1.07rem + 0.36vw, 1.375rem);

	/* Space scale */
	--space-3xs: clamp(0.25rem, 0.23rem + 0.09vw, 0.31rem);
	--space-2xs: clamp(0.5rem, 0.47rem + 0.18vw, 0.63rem);
	--space-xs: clamp(0.75rem, 0.7rem + 0.27vw, 0.94rem);
	--space-s: clamp(1rem, 0.93rem + 0.36vw, 1.25rem);
	--space-m: clamp(1.5rem, 1.39rem + 0.54vw, 1.88rem);
	--space-l: clamp(2rem, 1.86rem + 0.71vw, 2.5rem);
	--space-xl: clamp(3rem, 2.79rem + 1.07vw, 3.75rem);
	--space-2xl: clamp(4rem, 3.57rem + 2.14vw, 5.5rem);
	--space-3xl: clamp(5rem, 4.14rem + 4.29vw, 8rem);
	--space-4xl: clamp(6rem, 4.29rem + 8.57vw, 12rem);

	/* Grid */
	--page-max: 90rem;
	--gutter: clamp(1rem, 0.43rem + 2.86vw, 3rem);
	--col-gap: clamp(1rem, 0.71rem + 1.43vw, 2rem);
	--measure: 66ch;

	/* Shape */
	--radius-s: 4px;
	--radius-m: 8px;

	/* Motion */
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
	--dur-fast: 140ms;
	--dur-base: 220ms;
	--dur-slow: 420ms;

	/* Light: warm paper, navy-black ink. */
	--light-paper: #f3f1ec;
	--light-paper-2: #ebe8e1;
	--light-ink: #171c26;
	--light-ink-2: #4a505c;
	--light-ink-3: #6e7380;
	--light-rule: #d8d4ca;
	--light-rule-strong: #b9b4a8;
	--light-accent: #c4122a;
	--light-accent-ink: #fff8f4;
	--light-select: #f6d5d0;

	/* Dark: warm charcoal, never black. Paper-tinted text, never white. */
	--dark-paper: #14161b;
	--dark-paper-2: #1c1f26;
	--dark-ink: #ebe7df;
	--dark-ink-2: #b3b0a8;
	--dark-ink-3: #8b8a85;
	--dark-rule: #2c303a;
	--dark-rule-strong: #434856;
	--dark-accent: #ff5f6d;
	--dark-accent-ink: #1a0b0d;
	--dark-select: #5a2a31;

	--paper: var(--light-paper);
	--paper-2: var(--light-paper-2);
	--ink: var(--light-ink);
	--ink-2: var(--light-ink-2);
	--ink-3: var(--light-ink-3);
	--rule: var(--light-rule);
	--rule-strong: var(--light-rule-strong);
	--accent: var(--light-accent);
	--accent-ink: var(--light-accent-ink);
	--select: var(--light-select);
	--img-dim: 1;
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--paper: var(--dark-paper);
		--paper-2: var(--dark-paper-2);
		--ink: var(--dark-ink);
		--ink-2: var(--dark-ink-2);
		--ink-3: var(--dark-ink-3);
		--rule: var(--dark-rule);
		--rule-strong: var(--dark-rule-strong);
		--accent: var(--dark-accent);
		--accent-ink: var(--dark-accent-ink);
		--select: var(--dark-select);
		--img-dim: 0.9;
		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--paper: var(--dark-paper);
	--paper-2: var(--dark-paper-2);
	--ink: var(--dark-ink);
	--ink-2: var(--dark-ink-2);
	--ink-3: var(--dark-ink-3);
	--rule: var(--dark-rule);
	--rule-strong: var(--dark-rule-strong);
	--accent: var(--dark-accent);
	--accent-ink: var(--dark-accent-ink);
	--select: var(--dark-select);
	--img-dim: 0.9;
	color-scheme: dark;
}