/*
 * Design tokens: colours, type, spacing, shape. Source: docs/redesign/design/tokens.css.
 * Mirrored in theme.json where the editor needs them.
 */
:root {
	--acw-ink: #16181d;
	--acw-text-2: #3b3f48;
	--acw-muted: #5a5f6b;
	--acw-accent: #3a5575;
	--acw-bg: #fff;
	--acw-surface: #f3f4f7;
	--acw-hairline: #e3e4e8;
	--acw-border: #c9cdd5;
	--acw-placeholder: #d5d8df;
	--acw-mark: #ffe58f;
	--acw-inverse-bg: #16181d;
	--acw-inverse-text: #fff; /* text on an ink or accent fill (buttons, current tile) */
	--acw-inverse-muted: #b8bcc6;
	--acw-panel-bg: #16181d; /* the dark panels: player bar, podcast hero */
	--acw-panel-text: #fff;
	--acw-panel-muted: #b8bcc6;
	--acw-panel-border: #3b3f48;
	--acw-panel-hover: #abcedc;
	--acw-panel-card-bg: var(--acw-panel-bg); /* podcast cards beside the light ones (night: darker than the page) */
	--acw-shadow: rgb(22 24 29 / 0.16);
	--acw-img-backdrop: transparent; /* behind post images (night: white, for transparent PNGs) */
	--acw-mark-day: inline-block; /* which logo image shows */
	--acw-mark-night: none;
	--acw-icon-moon: block; /* which icon the day/night switch shows */
	--acw-icon-sun: none;
	color-scheme: light;

	--acw-serif: "Newsreader", Georgia, "Times New Roman", serif;
	--acw-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
	--acw-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

	--acw-fs-display: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
	--acw-fs-lead: clamp(1.875rem, 1.5rem + 1.4vw, 2.625rem);
	--acw-fs-section: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
	--acw-fs-headline: clamp(1.4375rem, 1.2rem + 0.9vw, 1.875rem);
	--acw-fs-small-hed: 1.25rem;
	--acw-fs-standfirst: clamp(1.25rem, 1.1rem + 0.5vw, 1.4375rem);
	--acw-fs-quote: clamp(1.5rem, 1.3rem + 0.6vw, 1.75rem);
	--acw-fs-body: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
	--acw-fs-excerpt: clamp(1.125rem, 1.08rem + 0.2vw, 1.1875rem);
	--acw-fs-ui: 1rem;
	--acw-fs-ui-sm: 0.9375rem;
	--acw-fs-caption: 0.875rem;
	--acw-fs-label: 0.8125rem;

	--acw-lh-tight: 1.08;
	--acw-lh-hed: 1.15;
	--acw-lh-body: 1.6;
	--acw-lh-ui: 1.5;

	--acw-tracking-display: -0.02em;
	--acw-tracking-hed: -0.01em;
	--acw-tracking-label: 0.04em;
	--acw-tracking-section: 0.08em;

	--acw-max: 1200px;
	--acw-max-article: 1040px;
	--acw-measure: 680px;
	--acw-wide: 1000px;
	--acw-gutter: clamp(16px, 4vw, 32px);

	--acw-space-1: 4px;
	--acw-space-2: 8px;
	--acw-space-3: 12px;
	--acw-space-4: 16px;
	--acw-space-5: 24px;
	--acw-space-6: 32px;
	--acw-space-7: 48px;
	--acw-space-8: 64px;
	--acw-space-9: 80px;

	--acw-radius-xs: 6px;
	--acw-radius-sm: 8px;
	--acw-radius-md: 10px;
	--acw-radius-lg: 14px;
	--acw-radius-pill: 999px;

	--acw-rule-section: 2px solid var(--acw-ink);
	--acw-rule-hair: 1px solid var(--acw-hairline);

	--acw-tap: 44px;
	--acw-focus: 2px solid var(--acw-accent);
	--acw-focus-offset: 2px;
}

@media (max-width: 599px) {
	:root {
		--acw-fs-label: 0.75rem;
	}
}

/*
 * Night theme. Follows the device setting unless the reader chose with the header switch
 * (html[data-theme], set before first paint by the inline script in inc/setup.php). The two
 * blocks below must stay identical. Screen only: print stays light.
 */
@media screen and (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--acw-ink: #e6e7ea;
		--acw-text-2: #c4c7ce;
		--acw-muted: #9ca1ac;
		--acw-accent: #abcedc;
		--acw-bg: #121418;
		--acw-surface: #1c1f25;
		--acw-hairline: #2a2e36;
		--acw-border: #3f444f;
		--acw-placeholder: #343842;
		--acw-mark: #5c4b0e;
		--acw-inverse-bg: #e6e7ea;
		--acw-inverse-text: #121418;
		--acw-inverse-muted: #4a4f5a;
		--acw-panel-bg: #1f232a;
		--acw-panel-text: #f3f4f6;
		--acw-panel-muted: #a9aeb9;
		--acw-panel-border: #474c58;
		--acw-panel-card-bg: #08090b;
		--acw-shadow: rgb(0 0 0 / 0.5);
		--acw-img-backdrop: #fff;
		--acw-mark-day: none;
		--acw-mark-night: inline-block;
		--acw-icon-moon: none;
		--acw-icon-sun: block;
		color-scheme: dark;
	}
}

@media screen {
	:root[data-theme="dark"] {
		--acw-ink: #e6e7ea;
		--acw-text-2: #c4c7ce;
		--acw-muted: #9ca1ac;
		--acw-accent: #abcedc;
		--acw-bg: #121418;
		--acw-surface: #1c1f25;
		--acw-hairline: #2a2e36;
		--acw-border: #3f444f;
		--acw-placeholder: #343842;
		--acw-mark: #5c4b0e;
		--acw-inverse-bg: #e6e7ea;
		--acw-inverse-text: #121418;
		--acw-inverse-muted: #4a4f5a;
		--acw-panel-bg: #1f232a;
		--acw-panel-text: #f3f4f6;
		--acw-panel-muted: #a9aeb9;
		--acw-panel-border: #474c58;
		--acw-panel-card-bg: #08090b;
		--acw-shadow: rgb(0 0 0 / 0.5);
		--acw-img-backdrop: #fff;
		--acw-mark-day: none;
		--acw-mark-night: inline-block;
		--acw-icon-moon: none;
		--acw-icon-sun: block;
		color-scheme: dark;
	}
}