/**
 * We Are Retro — design tokens.
 *
 * The palette comes from the logo's stacked rainbow bar, which is the brand's
 * one distinctive asset. Those five hues are used as a spectrum: the full ramp
 * appears once as a signature stripe, and individual hues carry meaning
 * elsewhere (green up, red down, blue interactive). They are never used
 * decoratively as flat fills, which would read as a children's toy rather than
 * a database for adults spending real money.
 *
 * Surfaces are three steps of near-black rather than one, so cards separate
 * from the canvas by luminance instead of heavy borders.
 */

:root {
	/* Brand spectrum, top to bottom of the logo bar. */
	--war-red: #e63329;
	--war-orange: #f07f26;
	--war-yellow: #f5c518;
	--war-green: #21a35b;
	--war-blue: #1b7fd4;

	/* Surfaces. Canvas is not pure black: pure black on an OLED panel makes
	   card edges vibrate against it, and this is a browsing interface people
	   sit with for a long time. */
	--war-canvas: #0a0a0b;
	--war-surface: #141416;
	--war-surface-raised: #1c1c1f;
	--war-line: #2a2a2e;
	--war-line-strong: #3a3a40;

	/* Type. */
	--war-text: #f2f2f3;
	--war-text-muted: #9a9aa2;
	--war-text-dim: #6b6b73;

	/* Semantics. Gain and loss are the two colours that must never be
	   ambiguous, so they take the two most separated hues in the ramp. */
	--war-up: #21a35b;
	--war-down: #e63329;
	--war-link: #4f9fe0;

	/* The signature: the logo bar as a gradient. */
	--war-spectrum: linear-gradient(
		90deg,
		var(--war-red) 0%,
		var(--war-orange) 25%,
		var(--war-yellow) 50%,
		var(--war-green) 75%,
		var(--war-blue) 100%
	);

	/* Type scale. Poppins carries the logo's geometry; Inter handles dense
	   tabular data where Poppins' wide counters would cost too much width. */
	--war-display: "Poppins", "Segoe UI", system-ui, sans-serif;
	--war-body: "Inter", "Segoe UI", system-ui, sans-serif;
	--war-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

	--war-radius: 10px;
	--war-radius-sm: 6px;

	--war-gap: 20px;
	--war-pad: 22px;

	--war-sidebar: 248px;
	--war-max: 1560px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--war-canvas);
	color: var(--war-text);
	font-family: var(--war-body);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	color: var(--war-text);
}

img {
	max-width: 100%;
	display: block;
}

h1,
h2,
h3,
h4 {
	font-family: var(--war-display);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0;
	line-height: 1.15;
}

/* Keyboard focus must stay visible: this is a dense interface and losing your
   place while tabbing is genuinely disorienting. */
:focus-visible {
	outline: 2px solid var(--war-blue);
	outline-offset: 2px;
	border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}