/*
 * Design tokens.
 * Palette: sumi ink, lime-plaster washi and aged cedar from the building;
 * black / kaki / moegi from the jōshiki-maku curtain (used only as a signature accent).
 * Every text/background pairing below meets WCAG AA in both schemes.
 */
:root {
	--tz-sumi: #211d17;
	--tz-washi: #e6e2d3;
	--tz-washi-light: #efece2;
	--tz-washi-deep: #dcd7c6;
	--tz-cedar: #6b5139;
	--tz-kaki: #9c5430;
	--tz-kaki-deep: #8a4526;
	--tz-moegi: #33502e;

	/* The curtain keeps its true dyes in both schemes. */
	--tz-maku-black: #1c1915;
	--tz-maku-kaki: #9c5430;
	--tz-maku-moegi: #33502e;
	--tz-maku: repeating-linear-gradient(
		90deg,
		var(--tz-maku-black) 0 2rem,
		var(--tz-maku-kaki) 2rem 4rem,
		var(--tz-maku-moegi) 4rem 6rem
	);

	/* Roles */
	--tz-bg: var(--tz-washi);
	--tz-surface: var(--tz-washi-light);
	--tz-surface-sunk: var(--tz-washi-deep);
	--tz-text: var(--tz-sumi);
	--tz-text-soft: #4f4638;
	--tz-text-muted: var(--tz-cedar);
	--tz-line: rgb(33 29 23 / 0.16);
	--tz-line-strong: rgb(33 29 23 / 0.34);
	--tz-accent: var(--tz-kaki);
	--tz-positive: var(--tz-moegi);
	--tz-link-underline: var(--tz-kaki);
	--tz-action-bg: var(--tz-kaki-deep);
	--tz-action-bg-hover: #733920;
	--tz-action-text: #f6f3ea;
	--tz-focus: var(--tz-sumi);

	/* The "stage": dark bands such as the footer and prototype notice. */
	--tz-stage-bg: var(--tz-sumi);
	--tz-stage-text: #e6e2d3;
	--tz-stage-muted: #c9b99a;
	--tz-stage-line: rgb(230 226 211 / 0.16);
	--tz-stage-accent: #d4875a;

	/* Type */
	--tz-font-display: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
	--tz-font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
	--tz-step--2: 0.8125rem;
	--tz-step--1: 0.9375rem;
	--tz-step-0: 1.0625rem;
	--tz-step-1: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
	--tz-step-2: clamp(1.4375rem, 1.25rem + 0.9vw, 1.875rem);
	--tz-step-3: clamp(1.75rem, 1.4rem + 1.8vw, 2.625rem);
	--tz-step-4: clamp(2.125rem, 1.5rem + 3.2vw, 3.75rem);
	--tz-step-5: clamp(2.5rem, 1.4rem + 5.6vw, 5.5rem);
	--tz-leading: 1.7;
	--tz-leading-ja: 1.9;
	--tz-leading-tight: 1.25;

	/* Space */
	--tz-space-3xs: 0.25rem;
	--tz-space-2xs: 0.5rem;
	--tz-space-xs: 0.75rem;
	--tz-space-s: 1rem;
	--tz-space-m: 1.5rem;
	--tz-space-l: 2rem;
	--tz-space-xl: clamp(2.5rem, 2rem + 2vw, 3.5rem);
	--tz-space-2xl: clamp(3rem, 2rem + 4vw, 5.5rem);
	--tz-space-3xl: clamp(4rem, 2.5rem + 6vw, 8rem);

	/* Layout */
	--tz-gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
	--tz-measure: 42rem;
	--tz-wide: 76rem;
	--tz-radius: 2px;
	--tz-header-h: 3.75rem;
	--tz-sticky-h: 5.5rem;
	--tz-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--tz-duration: 240ms;

	color-scheme: light;
}

/* Dark: the playhouse at night, lamplight on wood. Designed, not inverted. */
@media (prefers-color-scheme: dark) {
	:root {
		--tz-bg: #1b1813;
		--tz-surface: #25211a;
		--tz-surface-sunk: #141210;
		--tz-text: #ebe5d4;
		--tz-text-soft: #d3cab5;
		--tz-text-muted: #bfb49c;
		--tz-line: rgb(235 229 212 / 0.14);
		--tz-line-strong: rgb(235 229 212 / 0.3);
		--tz-accent: #d4875a;
		--tz-positive: #8fb07f;
		--tz-link-underline: #d4875a;
		--tz-action-bg: #d98a55;
		--tz-action-bg-hover: #e8a070;
		--tz-action-text: #1b1813;
		--tz-focus: #ebe5d4;

		--tz-stage-bg: #141210;
		--tz-stage-text: #ebe5d4;
		--tz-stage-muted: #bfb49c;
		--tz-stage-line: rgb(235 229 212 / 0.12);

		color-scheme: dark;
	}
}