/*
 * Retro screen constraints
 * - One fixed palette (ten colors). No tints, gradients, opacity or blur.
 * - 8px grid: spacing and type sizes are multiples of 8 (--px is one "game pixel" = 4px).
 * - No rounded corners; corners are notched one --px instead.
 * - Pixel fonts, uppercase. No eased animation: blink with steps().
 * Same look in light and dark: it is always a black screen.
 */
:root {
	--c-black: #000000;
	--c-white: #ffffff;
	--c-grey: #7c7c84;
	--c-navy: #1c2a8c;
	--c-maroon: #8a2a2e;
	--c-red: #ff5a5a;
	--c-pink: #e86fb0;
	--c-green: #3fbf3f;
	--c-yellow: #ffe14a;
	--c-cyan: #5fd7e3;

	/* semantic roles */
	--bg: var(--c-black);
	--surface: var(--c-black);
	--surface-2: var(--c-navy);
	--border: var(--c-white);
	--text: var(--c-white);
	--text-muted: var(--c-pink); /* labels: "COMP", "TD", "PTS" */
	--accent: var(--c-yellow);
	--accent-text: var(--c-black);
	--danger: var(--c-red);

	/* grid */
	--px: 4px;
	--space-1: 8px;
	--space-2: 16px;
	--space-3: 24px;
	--space-4: 32px;
	--radius: 0;
	--radius-pill: 0;

	/* type */
	--font-display: 'Press Start 2P', ui-monospace, monospace;
	--font-body: 'VT323', ui-monospace, monospace;
	--font: var(--font-body);
	--display-weight: 400;
	--fs-label: 16px;
	--fs-title: 24px;
	--fs-hero: 32px;
	--fs-body: 24px;

	/* one-pixel stepped corners; use as clip-path (it clips box-shadow, so use it on frames) */
	--notch: polygon(
		var(--px) 0,
		calc(100% - var(--px)) 0,
		calc(100% - var(--px)) var(--px),
		100% var(--px),
		100% calc(100% - var(--px)),
		calc(100% - var(--px)) calc(100% - var(--px)),
		calc(100% - var(--px)) 100%,
		var(--px) 100%,
		var(--px) calc(100% - var(--px)),
		0 calc(100% - var(--px)),
		0 var(--px),
		var(--px) var(--px)
	);
}