/*
 * Game Pulse look: cs2 (2.3). The look contract is docs/pilot/game-pulse-r12-design.md: token values for
 * [data-game="cs2"] and .is-game-cs2, then the game's own touches, all scoped to this game.
 *
 * Counter-Strike 2, graphite and signal orange: a tactical HUD, the counter-terrorist blue as the second colour, condensed
 * uppercase titles. Drawn in CSS; no game art.
 */

[data-game="cs2"],
.is-game-cs2 {
	--gp-surface: light-dark(#F4F1EC, #15181C);
	--gp-surface-2: light-dark(#FFFFFF, #1C2026);
	--gp-surface-sunk: light-dark(#E7E2DA, #0F1215);
	--gp-ink: light-dark(#1A1D21, #E8E6E1);
	--gp-ink-muted: light-dark(#55595F, #A7ABB2);
	--gp-ink-strong: light-dark(#0B0D10, #FFFFFF);
	--gp-accent: #DE9B35;
	--gp-accent-ink: #14110C;
	--gp-accent-2: light-dark(#2F6FA8, #7CB3E6);
	--gp-title-ink: light-dark(#1A1D21, #F2B65E);
	--gp-title-shadow: none;
	--gp-head-font: "Bahnschrift", "DIN Alternate", "Roboto Condensed", "Arial Narrow", sans-serif;
	--gp-frame-border: 1px solid light-dark(#C9C2B6, #2D333B);
	--gp-frame-radius: 4px;
	--gp-frame-shadow: inset 3px 0 0 #DE9B35, 0 10px 24px -18px rgba(0, 0, 0, 0.6);
	--gp-tab-bg: #101317;
	--gp-tab-ink: #C9CDD3;
	--gp-tab-active-bg: #DE9B35;
	--gp-tab-active-ink: #14110C;
	--gp-btn-bg: light-dark(#FFFFFF, #1C2026);
	--gp-btn-ink: light-dark(#1A1D21, #E8E6E1);
	--gp-btn-border: 1px solid light-dark(#C9C2B6, #3A414A);
	--gp-btn-hover-bg: light-dark(#F3E6D2, #262C34);
	--gp-grid-line: light-dark(#DDD6CA, #2A3038);
	--gp-pop-bg: light-dark(#FFFFFF, #1C2026);
	--gp-pop-border: 1px solid #DE9B35;
	--gp-series-1: #DE9B35;
	--gp-hero-bg:
		repeating-linear-gradient(-45deg, rgba(222, 155, 53, 0.07) 0 12px, transparent 12px 26px),
		radial-gradient(40rem 14rem at 85% -3rem, rgba(222, 155, 53, 0.22), transparent 70%),
		linear-gradient(135deg, #0D0F12 0%, #1A1F26 60%, #2A2116 100%);
	--gp-hero-rule: #DE9B35;
	--gp-hero-accent: #F2B65E;
	--gp-hero-title: #F5F4F0;
	--gp-hero-ink: #D6D9DE;
	--gp-hero-pill: rgba(222, 155, 53, 0.55);
	--gp-tabs-bg: #101317;
	--gp-tabs-rule: #2D333B;
	--gp-tabs-ink: #C9CDD3;
	--gp-tabs-active: #F2B65E;
	--gp-body-font: var(--wp--preset--font-family--body, system-ui, sans-serif);
	--gp-num-font: "Bahnschrift", "DIN Alternate", "Roboto Condensed", "Arial Narrow", sans-serif;
	--gp-frame-image: none;
	--gp-tab-shape: none;
	--gp-table-head-bg: #101317;
	--gp-table-head-ink: #F2B65E;
	--gp-row-alt: light-dark(rgba(0, 0, 0, 0.035), rgba(255, 255, 255, 0.03));
	--gp-row-hover: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
	--gp-good: light-dark(#1F6B35, #7AD69A);
	--gp-bad: light-dark(#A12A1F, #FF9C88);
	--gp-warn: light-dark(#8A5A00, #F2C25C);
	--gp-pop-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.6);
}

:is([data-game="cs2"], .is-game-cs2) :is(.gp-panel__title, .gp-hero__title, .gp-door__title) {
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* The "About this page" fold sits on the page, not on a panel: the accent as text, at 4.5:1 in either scheme. */
:is(body.is-game-cs2, [data-game="cs2"]) .gp-about > summary {
	color: light-dark(#8A5A12, #DE9B35);
}