/* Every colour, size and timing on the site comes from here. */

:root {
	--black: #000;
	--ink: #0d0d0d;
	--ink-2: #141414;
	--ink-3: #1c1c1c;

	--navy: #0b1f47;
	--navy-deep: #0a1224;
	--royal: #2149c2;
	--royal-hi: #2f5be0;
	--royal-deep: #1a3a9c;
	--royal-edge: #4c72e8;
	--sky: #86a4ff;

	--gold: #d4af37;
	--gold-soft: #c5a059;
	--gold-pale: #ebd78f;

	--bone: #f3eee3;
	--bone-2: #bdb6a8;
	--bone-3: #8f897d;
	--line: rgb(243 238 227 / .14);
	--line-2: rgb(243 238 227 / .28);
	--err: #f2705e;

	--display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
	--sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;

	--t-name: clamp(3.4rem, 10.6vw, 13rem);
	--t-opener: clamp(2.5rem, 6.2vw, 5.4rem);
	--t-h2: clamp(1.7rem, 2.7vw, 2.4rem);
	--t-h3: clamp(1.2rem, 1.5vw, 1.4rem);
	--t-deck: clamp(1.15rem, 1.55vw, 1.45rem);
	--t-read: clamp(1.125rem, 1.22vw, 1.25rem);
	--t-body: 1rem;
	--t-small: .875rem;
	--t-label: .75rem;

	--gutter: clamp(16px, 2.2vw, 28px);
	--wrap: 1240px;
	--measure: 66ch;
	--section: clamp(76px, 10vw, 140px);
	--head-h: 68px;
	--radius: 2px;

	--film-filter: contrast(1.18) brightness(.74) saturate(1.04);
	--film-blend: normal;
	--film-opacity: .7;
	--scrim: 0 0 0;
	--wheel-filter: invert(1) hue-rotate(180deg) brightness(.86) contrast(1.08);
	--wheel-blend: screen;
	--wheel-filter-alt: brightness(.95) contrast(1.05);

	--ease: cubic-bezier(.22, .8, .24, 1);
	--ease-io: cubic-bezier(.65, 0, .35, 1);
	--fast: .22s;
	--mid: .5s;
	--slow: .95s;
	--crawl: 1.6s;
}

@media (max-width: 640px) {
	:root {
		--t-name: 13.2vw;
		--head-h: 60px;
	}
}

/* Light mode. The same names, other values, so no component needs a second rule. */

:root[data-theme="light"] {
	--black: #f6f1e6;
	--ink: #eee7d8;
	--ink-2: #e9e1cf;
	--ink-3: #e0d6c0;

	--sky: #1e43b5;

	--gold: #7a5c0c;
	--gold-soft: #94731a;
	--gold-pale: #5e4608;

	--bone: #15130f;
	--bone-2: #423e35;
	--bone-3: #5a5549;
	--line: rgb(21 19 15 / .16);
	--line-2: rgb(21 19 15 / .32);
	--err: #b3261e;

	/* Light films are white-backed and multiply onto the page, so they are held back
	   to a pale tint. Anything less and dark text over the footage stops reading. */
	--film-filter: none;
	--film-blend: multiply;
	--film-opacity: .6;
	--scrim: 246 241 230;
	--wheel-filter: none;
	--wheel-blend: multiply;
	--wheel-filter-alt: invert(1) hue-rotate(180deg) contrast(1.05);

	color-scheme: light;
}

/* The navy fields, the menu and the intro stay dark in both modes. Film has a copy made for light mode, so it turns light with the page. */

:root[data-theme="light"] :is(.section--navy, .site-menu, .curtain, .zoom, .btn--primary, .tile__badge, .notice, .check input:checked) {
	--black: #000;
	--ink: #0d0d0d;
	--ink-2: #141414;
	--ink-3: #1c1c1c;
	--sky: #86a4ff;
	--gold: #d4af37;
	--gold-soft: #c5a059;
	--gold-pale: #ebd78f;
	--bone: #f3eee3;
	--bone-2: #bdb6a8;
	--bone-3: #8f897d;
	--line: rgb(243 238 227 / .14);
	--line-2: rgb(243 238 227 / .28);
	color: var(--bone);
}

:root {
	color-scheme: dark;
}