/*
 * PlayCross design tokens.
 * Single source of truth for the colors, radii and spacing used by the
 * tournament-specific templates, patterns and shortcodes. Kept independent
 * of theme.json so these hand-authored pages don't depend on the block
 * editor's global-styles palette resolving a particular way.
 */
:root {
	/* Accents */
	--pc-red: #e63946;
	--pc-red-hover: #cf2b38;
	--pc-green: #2ea043;
	--pc-amber: #e6a23c;
	/* World Rankings row hover text (rank/name/points) on the petrol
	   (--pc-dark-bg) hover background -- a distinct, brighter gold-yellow
	   from --pc-amber above, which already means something else (warning/
	   notice) elsewhere on the site. Confirmed with the user. */
	--pc-yellow: #ffc72c;

	/* Dark sections — brand petrol/teal-navy */
	--pc-dark-bg: #0a2e3a;
	--pc-dark-surface: #163a46;
	--pc-dark-border: #224652;
	--pc-dark-text: #f0f6fc;
	--pc-dark-text-muted: #8b949e;

	/* Light sections — body text/headings tinted with the same brand color
	   as the dark sections above, instead of plain black, so both halves
	   of the page read as one cohesive palette. */
	--pc-light-bg: #f7f8fa;
	--pc-light-surface: #ffffff;
	--pc-light-border: #e3e6ea;
	--pc-light-text: #0a2e3a;
	--pc-light-text-muted: #57606a;
	/* A deeper, more saturated grey than --pc-light-bg -- used as a section
	   backdrop specifically where white content (a panel, a board of
	   cards) needs to stand out more than the site's usual near-white
	   background gives it. Originally introduced page-scoped for the
	   player profile's ranking-stats panel; promoted here once a second
	   page (tournament Matches tab) needed the exact same shade, so both
	   share one definition instead of two copies drifting apart. */
	--pc-band-bg: #dfe4e7;

	/* Shape */
	--pc-radius: 10px;
	--pc-radius-sm: 8px;

	/* Spacing scale */
	--pc-space-xs: 0.5rem;
	--pc-space-sm: 1rem;
	--pc-space-md: 1.5rem;
	--pc-space-lg: 1.25rem;
	--pc-space-xl: 2rem;

	/* Type */
	--pc-font-heading: var(--wp--preset--font-family--oswald, "Oswald", sans-serif);
	--pc-font-body: var(--wp--preset--font-family--ibm-plex-sans, "IBM Plex Sans", sans-serif);

	/* Layout */
	--pc-content-width: 74rem;

	/* ------------------------------------------------- Match cards */
	/* Every COLOR the match card paints, in one place. The card itself is
	   assembled from three separate shells that all share one body
	   component: .pc-live-card (homepage LIVE strip, front-page.css),
	   .pc-live-card (My profile's own deliberate copy of that shell,
	   player-profile.css), .pc-matches-card (Matches board + Draws'
	   group/KO lists, matches-board.css) and .pc-live-card-row & co.
	   (the shared body, components.css). Before this layer existed each
	   of those four files reached for the site-wide tokens above (or a
	   bare #fff / rgba()) directly, so re-coloring the card meant editing
	   four files -- and re-pointing a site-wide token would have
	   repainted half the site with it.

	   These are indirection ONLY: every value below is exactly what the
	   four files hardcoded before, so the default look is unchanged to
	   the byte. assets/css/match-card-navy.css re-points them (and
	   nothing else) for the "navy" variant -- see inc/match-card-style.php
	   for the admin switch that turns that file on. Sizes, spacing and
	   structure are deliberately NOT tokenized here: the variant is a
	   re-color, and leaving every dimension out of its reach is what
	   guarantees that. */
	--pc-card-header-bg: var(--pc-dark-bg);
	--pc-card-header-bg-live: var(--pc-red);
	--pc-card-header-bg-upcoming: linear-gradient(90deg, var(--pc-dark-bg) 0%, var(--pc-dark-bg) 60%, var(--pc-red) 100%);
	--pc-card-header-bg-unscheduled: linear-gradient(90deg, var(--pc-dark-bg) 0%, var(--pc-dark-bg) 60%, var(--pc-yellow) 100%);
	--pc-card-header-text: #fff;

	--pc-card-surface: var(--pc-light-surface);
	--pc-card-text: var(--pc-light-text);
	--pc-card-border: var(--pc-light-border);
	--pc-card-divider: var(--pc-light-border);
	--pc-card-score: var(--pc-light-text-muted);
	--pc-card-score-strong: var(--pc-light-text);
	--pc-card-score-live: var(--pc-red);
	--pc-card-tally-divider: var(--pc-light-border);

	/* Two shadows, not one: the homepage strip and My profile have always
	   used a heavier drop than the Matches/Draws board does. Kept apart so
	   tokenizing them doesn't quietly equalize the two. */
	--pc-card-shadow: 0 1px 3px rgba(10, 46, 58, 0.2);
	--pc-card-shadow-board: 0 1px 3px rgba(10, 46, 58, 0.08);
}