/*
 * Gaming Platform design tokens. Canvas and text follow the active theme (the 10K Games theme sets
 * them through its theme.json palette); every surface, border and muted tone is derived from these
 * two, so the platform and the games stay readable under any theme. The fallbacks are the
 * "Race Day" values (dirt-dark canvas, high-vis orange, fluorescent yellow). Contrast of every pair: docs/ui/design-system.md.
 */

:root {
	--gp-bg: var(--wp--preset--color--base, #100e0c);
	--gp-text: var(--wp--preset--color--contrast, #f5f2ec);

	--gp-surface-1: color-mix(in srgb, var(--gp-text) 4%, var(--gp-bg));
	--gp-surface-2: color-mix(in srgb, var(--gp-text) 8%, var(--gp-bg));
	--gp-surface-3: color-mix(in srgb, var(--gp-text) 13%, var(--gp-bg));
	--gp-border: color-mix(in srgb, var(--gp-text) 11%, var(--gp-bg));
	--gp-border-strong: color-mix(in srgb, var(--gp-text) 22%, var(--gp-bg));
	/* Borders of form controls need 3:1 against the canvas. */
	--gp-border-control: color-mix(in srgb, var(--gp-text) 40%, var(--gp-bg));
	--gp-text-muted: color-mix(in srgb, var(--gp-text) 68%, var(--gp-bg));
	--gp-text-subtle: color-mix(in srgb, var(--gp-text) 58%, var(--gp-bg));

	--gp-accent: var(--wp--preset--color--accent, #ff5f00);
	/* The accent carries dark text, so its hover fill is lighter, not darker. */
	--gp-accent-hover: color-mix(in srgb, var(--gp-accent) 86%, #fff);
	--gp-on-accent: var(--wp--preset--color--on-accent, #140d07);
	--gp-accent-text: color-mix(in srgb, var(--gp-accent) 58%, var(--gp-text));
	--gp-accent-soft: color-mix(in srgb, var(--gp-accent) 18%, var(--gp-bg));
	--gp-highlight: var(--wp--preset--color--highlight, #dfff00);
	--gp-token: var(--wp--preset--color--token, #ffc53d);
	--gp-success: var(--wp--preset--color--success, #3dd68c);
	--gp-danger: var(--wp--preset--color--danger, #ff6369);
	--gp-warning: var(--wp--preset--color--warning, #ffb224);

	/* Hard corners. "pill" keeps its name for the rules that use it; nothing is a pill any more. */
	--gp-radius-sm: 2px;
	--gp-radius-md: 3px;
	--gp-radius-lg: 4px;
	--gp-radius-pill: 4px;

	--gp-space-1: 0.25rem;
	--gp-space-2: 0.5rem;
	--gp-space-3: 0.75rem;
	--gp-space-4: 1rem;
	--gp-space-5: 1.5rem;
	--gp-space-6: 2rem;
	--gp-space-7: 3rem;

	--gp-font-display: var(--wp--preset--font-family--display, inherit);
	--gp-font-mono: var(--wp--preset--font-family--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);

	/* The "lit edge": a hairline highlight at the top of a raised surface. */
	--gp-edge: inset 0 1px 0 color-mix(in srgb, var(--gp-text) 7%, transparent);
	--gp-shadow-raised: 0 12px 32px -12px rgb(0 0 0 / 55%);
	/* No glow: a hard offset shadow, like a sticker edge. */
	--gp-glow: 5px 5px 0 color-mix(in srgb, var(--gp-accent) 45%, var(--gp-bg));
	/* The black of a pit board (notices). */
	--gp-board: color-mix(in srgb, var(--gp-bg) 70%, #000);
	/* Tyre tread: slanted knobs. Used for short divider bands and behind the hero. */
	--gp-tread: repeating-linear-gradient(115deg, var(--gp-border-strong) 0 7px, transparent 7px 15px);
	/* Mud splatter: a few flecks, placed by background-position of the element that uses it. */
	--gp-mud:
		radial-gradient(circle at 12% 30%, var(--gp-border) 0 5px, transparent 6px),
		radial-gradient(circle at 22% 62%, var(--gp-border) 0 2px, transparent 3px),
		radial-gradient(circle at 71% 18%, var(--gp-border) 0 3px, transparent 4px),
		radial-gradient(circle at 84% 55%, var(--gp-border) 0 8px, transparent 9px),
		radial-gradient(circle at 91% 78%, var(--gp-border) 0 2px, transparent 3px),
		radial-gradient(circle at 58% 88%, var(--gp-border) 0 4px, transparent 5px);
	--gp-focus: 2px solid var(--gp-highlight);

	--gp-duration: 0.16s;
	--gp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--gp-duration: 0s;
	}
}