/*
 * 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 {
	--bg: #f6f5f1;
	--surface: #ffffff;
	--surface-alt: #eceae3;
	--border: #d8d5cb;
	--text: #1d1c19;
	--text-muted: #6b675d;
	/* Claude's terracotta orange. Light enough that white text on it fails
	   contrast, so buttons carry the ink colour instead. */
	--accent: #d97757;
	--accent-text: #1d1c19;
	--accent-soft: #f7e7df;
	--danger: #b3261e;
	--danger-soft: #fbe4e2;
	--warn: #b06d0a;
	--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. */
	--player-1: #1f6f4a;
	--player-2: #1d5c8f;
	--player-3: #9a5312;
	--player-4: #7a3f8f;

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

	color-scheme: light;
}

[data-theme='dark'] {
	--bg: #14161a;
	--surface: #1c1f24;
	--surface-alt: #23272e;
	--border: #333840;
	--text: #e9e9e6;
	--text-muted: #9aa0a8;
	--accent: #d97757;
	--accent-text: #1d1c19;
	--accent-soft: #3b2a23;
	--danger: #f2867d;
	--danger-soft: #3a201e;
	--warn: #e0a94a;
	--shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 30%);

	--player-1: #6fc79a;
	--player-2: #79b9ec;
	--player-3: #e6a563;
	--player-4: #c193e0;

	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;
	}
}