/*
 * WTR Tidewater: derived tokens (tokens-ext.css).
 *
 * tokens.css is the handoff file byte for byte and is never edited. This file
 * holds the values the prototypes hard-code (BUILD-PLAN §1.4) plus a few
 * layout helpers, as tokens, so no component ever writes a raw colour.
 * Every value is the same in light and dark unless a dark block says so.
 *
 * Loads second (handle wtre-tokens-ext), before the parent's wtr.css.
 */
:root {
	/* Fills, lines and status on petrol (header, newsletter box, score band). */
	--wtr-onband-fill: rgba(255, 255, 255, .12);
	--wtr-onband-fill-2: rgba(255, 255, 255, .14);
	--wtr-onband-line: rgba(255, 255, 255, .4);
	--wtr-onband-rule: rgb(156 198 208 / .25);
	--wtr-onband-win: #7DB8E8;
	--wtr-onband-on-win: #0F181A;
	--wtr-band-tile: #E3E9E7;

	/* Media overlays (video play disc, duration chip, player photo fade). */
	--wtr-media-scrim: rgba(6, 33, 39, .88);
	--wtr-on-media: #FFFFFF;
	--wtr-player-bg: #0A1113;
	--wtr-play-ring: rgba(255, 255, 255, .18);
	--wtr-photo-fade: linear-gradient(180deg, rgba(6, 33, 39, 0), rgba(6, 33, 39, .55));

	/* Light input on a brand surface (newsletter box, footer form), any theme. */
	--wtr-input-on-brand-bg: #FDFCF9;
	--wtr-input-on-brand-text: #0F1D20;
	--wtr-error-on-brand: #FEE7CF;
	/* Error border of an input on petrol (the dark-theme loss value reads on petrol). */
	--wtr-error-line-on-brand: #F29A62;
	/* Success note on petrol (newsletter "check your inbox"). */
	--wtr-onband-note: rgba(255, 255, 255, .1);

	/*
	 * Live text (the match minute "62′" beside a LIVE chip) on light surfaces. The design's
	 * --wtr-signal is 4.21:1 on --wtr-bg at 13 px, under AA; this darker step is ≥ 4.57:1 on
	 * bg, surface, section and tag-bg (M3, change requests WP3-2 / WP6-4). Fills keep
	 * --wtr-signal. Dark value below.
	 */
	--wtr-signal-ink: #C4321F;

	/* Fixed monogram ink on logo tiles (the README's allowed exception). */
	--wtr-mono-ink: #0E4A55;

	/*
	 * Font stacks with the size-adjusted fallbacks from fonts.css.
	 * USE THESE in font-family. The handoff's --wtr-font-sans/serif/mono stay
	 * as delivered (the token check compares them), but they lack the
	 * metric-matched fallback, so text would jump when the web font swaps in.
	 */
	--wtr-ff-sans: 'Hanken Grotesk', 'Hanken Fallback', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	--wtr-ff-serif: 'Source Serif 4', 'Serif Fallback', Georgia, 'Times New Roman', serif;
	--wtr-ff-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

	/*
	 * Layout helpers.
	 * --wtr-sticky-top: offset for sticky sidebars and sticky ad regions from
	 *   1024 px: the 48 px sticky nav + 24 px air + the admin bar. Never use
	 *   --wtr-header-h for this (it is 112 at ≥1024 and includes the masthead
	 *   that scrolls away). Below 1024 nothing is sticky but the header.
	 * --wtr-hit: the minimum target size (44 px).
	 * --wtr-footer-pad-mobile: bottom padding that keeps the last links clear
	 *   of the Mediavine adhesion ad.
	 */
	--wtr-sticky-top: calc(48px + 24px + var(--wp-admin--admin-bar--height, 0px));
	--wtr-hit: 44px;
	--wtr-footer-pad-mobile: 104px;

	/* z-index scale (BUILD-PLAN §1.2). */
	--wtr-z-strip: 90;
	--wtr-z-header: 100;
	--wtr-z-mega: 110;
	--wtr-z-progress: 150;
	--wtr-z-drawer: 200;
	--wtr-z-msearch: 210;
	--wtr-z-modal: 300;
	--wtr-z-toast: 400;
	--wtr-z-consent: 500;
}

/* Dark values (used only once WP11 turns dark mode on; same guards as tokens.css). */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) { --wtr-signal-ink: #F07A66; }
}
:root[data-theme="dark"] { --wtr-signal-ink: #F07A66; }