/*
 * RosterSlots design tokens — monochrome.
 *
 * The whole site is neutral greyscale. Exactly one colour exists, and it is
 * spent only on the two things a reader is meant to look at: the rating, and
 * the thing to click. Nothing else in the interface is allowed to be coloured,
 * which is what makes those two register instantly.
 *
 * Greys are true neutrals (R=G=B). Any blue or warm cast would read as a tint
 * and undermine the monochrome premise.
 */

:root {
	/* ---- surfaces ---- */
	--bg-canvas: #0a0a0a;
	--bg-base: #101010;
	--bg-surface: #161616;
	--bg-elevated: #1e1e1e;
	--bg-muted: #2a2a2a;

	--border: #3a3a3a;
	--border-subtle: #242424;
	/* Boundaries of interactive components need 3:1 under WCAG 1.4.11. */
	--border-interactive: #6e6e6e;

	/* ---- text ----
	   Against --bg-canvas: primary 19.8  secondary 10.0  muted 5.9 */
	--text-primary: #ffffff;
	--text-secondary: #b8b8b8;
	--text-muted: #969696;

	/* ---- the only colour on the site ----
	   Ratings and calls to action. Nothing else. 11.0:1 on canvas, 8.0:1 at
	   worst on --bg-muted; label on the filled button is 10.98:1. */
	--accent: #ffb224;
	--accent-hover: #ffc355;
	--accent-active: #e09612;
	--accent-quiet: rgba(255, 178, 36, 0.12);
	--on-accent: #0a0a0a;
	--accent-grad: linear-gradient(180deg, #ffbe45 0%, #f5a411 100%);
	--accent-grad-hover: linear-gradient(180deg, #ffcb66 0%, #ffb224 100%);

	/* ---- semantic ----
	   Deliberately greyscale. Pros and cons are already distinguished by their
	   ✓ / − marks, so colour would be redundant here and would dilute the one
	   colour that carries meaning. */
	--positive: #ffffff;
	--negative: #8f8f8f;
	--warning: var(--accent);

	/* ---- spacing ---- */
	--s1: 8px;
	--s2: 16px;
	--s3: 24px;
	--s4: 32px;
	--s5: 48px;
	--s6: 64px;
	--s7: 96px;

	/* ---- radius ---- */
	--r-sm: 4px;
	--r-md: 8px;
	--r-lg: 12px;
	--r-pill: 999px;

	/* ---- type ---- */
	--font-head: 'Archivo', system-ui, -apple-system, sans-serif;
	--font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

	/* ---- elevation ----
	   Gradients are reserved for buttons. Everything else separates on flat
	   value steps plus a 1px top highlight and a shadow — depth without any
	   surface being a gradient. */
	--surface-grad: var(--bg-surface);
	--surface-grad-hi: var(--bg-elevated);
	--hairline: inset 0 1px 0 rgba(255, 255, 255, 0.055);
	--hairline-strong: inset 0 1px 0 rgba(255, 255, 255, 0.1);
	--lift: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -12px rgba(0, 0, 0, 0.8);
	--glow-accent: 0 6px 20px -10px rgba(255, 178, 36, 0.45);
	--ring-accent: 0 0 0 1px rgba(255, 178, 36, 0.25);

	/* No page wash: the canvas is a flat value. */
	--page-wash: none;

	/* ---- motion ---- */
	--dur: 170ms;
	--ease: cubic-bezier(0.2, 0.6, 0.3, 1);

	/* ---- layout ---- */
	--w-page: 1200px;
	--w-prose: 680px;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur: 0ms;
	}
}