/*
 * NPL colour tokens: the ONLY file that may contain colour literals
 * (the stylelint rule in .stylelintrc.json enforces it). Everything else,
 * theme, blocks, hover card and the admin app, reads these custom
 * properties. Documented in AGENTS.md Appendix D.
 *
 * Light is the default (brand decision); dark is a fully supported
 * alternative. The theme is chosen before first paint by an inline script
 * that sets <html data-theme="light|dark"> (Ui\DesignTokens), so there is no
 * flash. The selectors work on any element, which is how the dev-only token
 * reference page (/design-tokens/) shows both themes side by side. With no attribute at all (no JS, or a bare page) the :root values
 * below, light, apply.
 */

:root,
[data-theme="light"] {
	color-scheme: light;

	--bg: #F5F3EF; /* page background */
	--surface: #FFFFFF; /* cards, panels, popovers */
	--surface-2: #EFEBE3; /* inset areas: tracks, avatar circles, table headers, skeletons */
	--line: rgba(14, 15, 17, 0.08); /* hairline dividers, default card borders */
	--line-strong: rgba(14, 15, 17, 0.16); /* table header rule, hover borders */
	--control-line: rgba(14, 15, 17, 0.56); /* input / secondary-button outlines: 3:1 against the surface (WCAG 1.4.11) */
	--text: #0E0F11;
	--muted: #5F6168;

	--accent: #E11D3C; /* fills: primary buttons, live dots, progress, active indicator */
	--accent-text: #C8102E; /* crimson AS small text or icons (links, active nav label) */
	--accent-deep: #7C0F26; /* pressed states, destructive fill */
	--accent-tint: rgba(225, 29, 60, 0.08); /* selected rows, "You" pills, active nav background */
	--accent-tint-strong: rgba(225, 29, 60, 0.14);
	--on-accent: #FFFFFF; /* text on --accent fills and on photo overlays */
	--danger-text: var(--accent-deep); /* destructive action text and outline: 10:1 on the light surface */

	--positive: #146C42; /* gains and upward movement. Darker than the brief's #1E9E5A (3.4:1 on white) so it also clears 4.5:1 on its own tint */
	--positive-tint: rgba(20, 108, 66, 0.12);

	--gold: #D8A94E; /* captain / vice-captain badges and awards, never text */
	--on-gold: #0E0F11;
	--on-positive: #FFFFFF; /* lettering on a --positive fill */

	--scrim: rgba(14, 15, 17, 0.45); /* modal and drawer backdrop */
	--overlay-dark: rgba(14, 15, 17, 0.62); /* text-protection layer over photos and covers */
	--overlay-strong: rgba(14, 15, 17, 0.88);
	--toast-bg: var(--text);
	--toast-text: var(--bg);

	/* The ground graphic and jerseys are literal turf and kit colours, the same in both themes. */
	--pitch-grass: #2E5A3B;
	--pitch-grass-alt: #35643F;
	--pitch-strip: #9C8253;
	--pitch-line: rgba(255, 255, 255, 0.55);
	--pitch-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); /* keeps jersey initials legible on the turf */
	--kit-1: #2A2C31; /* jersey bases, one per real-life team; white initials sit on all of them (>= 5:1) */
	--kit-2: #34363B;
	--kit-3: #3E4046;
	--kit-4: #4A4C52;
	--kit-5: #5A5C63;
	--on-crest: #0E0F11; /* lettering on the white crest disc */

	/* Team crest placeholder: hsl(<per-team hue> s l) */
	--crest-s: 45%;
	--crest-l: 88%;
	--crest-ring-l: 75%; /* lightness of the placeholder's inset ring */
	--crest-ring: rgba(14, 15, 17, 0.10);
	--crest-disc: #FFFFFF; /* uploaded crests sit on a white disc: most are drawn for white */

	--skeleton-base: var(--surface-2);
	--skeleton-shine: rgba(255, 255, 255, 0.65);

	/* Badge icon system: the exact values of docs/design/badges/badge-icon-system.svg. A frame ring is a vertical metal
	   gradient (-hi at the top to -lo at the bottom): bronze, silver, gold for tiers; steel for one-time and community
	   badges; crimson for limited editions (with ribbon tails). The tier is always also written in text, never the colour alone. */
	--tier-bronze-hi: #F0BC8A;
	--tier-bronze-lo: #94572B;
	--tier-silver-hi: #F1F3F6;
	--tier-silver-lo: #8E96A3;
	--tier-gold-hi: #F6DE9B;
	--tier-gold-lo: #C48A2A;
	--tier-steel-hi: #6C7078;
	--tier-steel-lo: #2A2C31;
	--tier-crimson-hi: #F3647A;
	--tier-crimson-lo: #A50F27;
	--badge-disc: #17181B; /* the dark inner disc the glyph sits on, the same in both themes */
	--badge-glyph: #F5F3EF; /* the glyph strokes and lettering */
	--badge-edge: #1A1A1A; /* the thin outline that keeps the frame visible on the page */
	--badge-dash: rgba(245, 243, 239, 0.28); /* the dashed inner ring (dropped at 24 and 32 px) */
	--badge-chip: #E31837; /* the count chip, and the optional accent ring */
	--badge-chip-text: #FFFFFF;
	--badge-ribbon-a: #E31837; /* the ribbon tails of a limited edition */
	--badge-ribbon-b: #9C1029;
}

[data-theme="dark"] {
	color-scheme: dark;

	--bg: #0E0F11;
	--surface: #17181B;
	--surface-2: #1D1F23;
	--line: rgba(245, 243, 239, 0.08);
	--line-strong: rgba(245, 243, 239, 0.14);
	--control-line: rgba(245, 243, 239, 0.50);
	--text: #F5F3EF;
	--muted: #93959C;

	--accent: #E11D3C;
	--accent-text: #FF4D68;
	--accent-deep: #7C0F26;
	--accent-tint: rgba(225, 29, 60, 0.16);
	--accent-tint-strong: rgba(225, 29, 60, 0.22);
	--danger-text: var(--accent-text); /* the deep crimson is too dark on the dark surface */
	--on-accent: #FFFFFF;

	--positive: #34C77B;
	--positive-tint: rgba(52, 199, 123, 0.14);

	--gold: #D8A94E;
	--on-gold: #0E0F11;
	--on-positive: #0E0F11;

	--scrim: rgba(0, 0, 0, 0.62);
	--overlay-dark: rgba(0, 0, 0, 0.62);
	--overlay-strong: rgba(0, 0, 0, 0.88);

	--crest-s: 28%;
	--crest-l: 26%;
	--crest-ring-l: 40%;
	--crest-ring: rgba(245, 243, 239, 0.14);

	--skeleton-shine: rgba(245, 243, 239, 0.06);

	/* In dark mode the steel ring lifts and the edge turns light so the frame stays visible on the dark page; the other metals are as on the sheet. */
	--tier-steel-hi: #9AA0AB;
	--tier-steel-lo: #565A63;
	--badge-edge: #F5F3EF;
}