/*
 * Design tokens — colors, spacing, containers.
 * Values transcribed exactly from design-reference/design.md. Do not
 * change these values without a corresponding change to the approved
 * design reference.
 *
 * Light is the default (:root). Dark applies automatically when the OS
 * prefers dark AND the visitor hasn't made an explicit choice, and always
 * applies when [data-theme="dark"] is set by the toggle (see theme-toggle.js).
 * [data-theme="light"] pins light even if the OS prefers dark.
 */

:root {
	--bg: #F0F0EE;
	--surface: #FFFFFF;
	--sunk: #E2E2DF;
	--ink: #101418;
	--ink2: #5A6270;
	--rule: #D7D7D3;
	--accent: #D93B14;
	--accent-ink: #FFFFFF;
	--accent-soft: #FBE6DF;
	--band: #101418;
	--band-ink: #F4F4F2;
	--band-rule: #2C333C;
	--band-dim: rgba(244, 244, 242, .66);

	/* Spacing (4pt rhythm) */
	--space-inline: 8px;
	--space-card: 16px;
	--space-gutter: 28px;
	--space-block: 44px;
	--space-section: 72px;

	/* Containers */
	--container-max: 1300px;
	--container-article: 1120px;
	--container-search: 880px;
	--container-about: 820px;
	--container-legal: 780px;

	/* Hero sizing (overridden at the 700px breakpoint below) */
	--hero-h: 540px;
	--hero-type: clamp(38px, 4.2vw, 58px);
	--art-hero-h: 560px;

	/* Navigation display mode, swapped at the 1120px breakpoint */
	--nav-wide: flex;
	--nav-compact: none;

	/* Grid column recipes reused across templates, swapped at their
	   respective breakpoints below. Declared in full here even though
	   only a subset is consumed by the current stage's templates — these
	   are shared design tokens, not per-template logic. */
	--cols-main: minmax(0, 1fr) 300px;
	--cols-list: 150px minmax(0, 1fr) 130px;
	--cols-feat: minmax(0, 1.2fr) minmax(0, 1fr);
	--cols-tr: minmax(0, 1.5fr) minmax(0, 1.9fr) minmax(0, .6fr) 108px;
	/* Layout refinement: widened from 1.6fr so the standings table (the
	   competition page's primary content) gets more breathing room —
	   "Next fixtures" stays a real second column (kept for when it has
	   real content) but reads as a secondary panel rather than a near-
	   equal half, which is what looked unbalanced while it's empty. */
	--cols-compdetail: minmax(0, 1.9fr) minmax(0, 1fr);
	--cols-player: 260px minmax(0, 1fr);
	--cols-type: 150px minmax(0, 1fr);
	--cols-resp: 150px minmax(0, 1fr) minmax(0, 1fr);
}

/* Exact approved breakpoints — 1120 / 900 / 860 / 760 / 700 */
@media (max-width: 1120px) {
	:root { --nav-wide: none; --nav-compact: flex; }
}
@media (max-width: 900px) {
	:root { --cols-main: minmax(0, 1fr); }
}
@media (max-width: 860px) {
	:root { --cols-feat: minmax(0, 1fr); --cols-compdetail: minmax(0, 1fr); }
}
@media (max-width: 760px) {
	:root {
		--cols-list: minmax(0, 1fr);
		--cols-tr: minmax(0, 1fr) auto;
		--cols-player: minmax(0, 1fr);
		--cols-resp: minmax(0, 1fr);
	}
}
@media (max-width: 700px) {
	:root {
		--cols-type: minmax(0, 1fr);
		--hero-h: 420px;
		--hero-type: 36px;
		--art-hero-h: 420px;
	}
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #0C1015;
		--surface: #151B22;
		--sunk: #1C242D;
		--ink: #F2F3F5;
		--ink2: #98A2AF;
		--rule: #252F39;
		--accent: #FF5C33;
		--accent-ink: #12161A;
		--accent-soft: #2A1912;
		--band: #070A0E;
		--band-ink: #F2F3F5;
		--band-rule: #222B34;
		--band-dim: rgba(242, 243, 245, .64);
	}
}

:root[data-theme="dark"] {
	--bg: #0C1015;
	--surface: #151B22;
	--sunk: #1C242D;
	--ink: #F2F3F5;
	--ink2: #98A2AF;
	--rule: #252F39;
	--accent: #FF5C33;
	--accent-ink: #12161A;
	--accent-soft: #2A1912;
	--band: #070A0E;
	--band-ink: #F2F3F5;
	--band-rule: #222B34;
	--band-dim: rgba(242, 243, 245, .64);
}