/*
 * One palette, two themes. Every colour is a custom property so a component
 * never names a literal: switching theme is re-declaring the tokens, not
 * re-styling the components.
 */
:root {
	/* Paper and ink with a faint green cast: a word game reads as a page, and
	   the cast ties the neutrals to the accent instead of leaving them beside
	   it. */
	--bg: #f4f7f4;
	--surface: #ffffff;
	--surface-alt: #e9f0ea;
	--border: #c2d1c8;
	--text: #16211b;
	--text-muted: #5b6a61;
	/* Word-game green. Dark enough to carry white text and to be read as text
	   itself, which the accent has to be: the clock, a word's points and the
	   connection badge are all drawn in it. */
	--accent: #15803d;
	--accent-text: #ffffff;
	--accent-soft: #dff2e5;
	--danger: #a3231c;
	--danger-soft: #fbe4e2;
	--warn: #8a5a08;
	--shadow: 0 1px 2px rgb(0 0 0 / 8%), 0 8px 24px rgb(0 0 0 / 6%);

	/* One colour per seat, in seat order. The chat log is written in them, so
	   a line's author is legible before its name is read. Four, because a room
	   holds four. None of them is the accent's green: a seat colour that looks
	   like the game's own colour says nothing about whose word it is. */
	--player-1: #1d5c8f;
	--player-2: #7a3f8f;
	--player-3: #8a4c12;
	--player-4: #0e6e7a;

	--radius: 12px;
	--radius-sm: 8px;
	--font: system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

	color-scheme: light;
}

[data-theme='dark'] {
	--bg: #101512;
	--surface: #17201a;
	--surface-alt: #1f2a23;
	--border: #3a4a40;
	--text: #e6ece7;
	--text-muted: #9aab9f;
	/* Lightened rather than inverted, which is what a dark surface needs from
	   an accent; white on it would fail, so the ink on a button turns dark. */
	--accent: #5ddc8b;
	--accent-text: #0c1410;
	--accent-soft: #1e3a2a;
	--danger: #f2867d;
	--danger-soft: #3a201e;
	--warn: #e9b949;
	--shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 30%);

	--player-1: #79b9ec;
	--player-2: #c193e0;
	--player-3: #e6a563;
	--player-4: #63cfdc;

	color-scheme: dark;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	min-height: 100%;
}

body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
}

button {
	font: inherit;
	color: inherit;
	cursor: pointer;
}

input {
	font: inherit;
	color: inherit;
}

/* Visible only to assistive technology. */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

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