/* Design tokens. Everything else in the stylesheet reads from these — no raw colour or spacing
   literal belongs in base.css or components.css.

   The presenter screen is not a second token set: `.stage` below re-binds the same names to a dark,
   much larger scale, so every component works on both grounds unchanged. */

/* Inter, self-hosted: no request leaves the deployment at runtime.
   @fontsource-variable/inter 5.2.5 (SIL OFL 1.1), variable weight axis 100–900.
   files/inter-latin-wght-normal.woff2      sha256 f052ee44c3728dfd23aba8a4567150bc314d23903026fbb6ad089422c2df56af
   files/inter-latin-ext-wght-normal.woff2  sha256 48f540fb71166bf65a0fe187a71fad500c43143d3e2e42038f527e38c786e90f */
@font-face {
	font-family: "Inter Variable";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url(/static/fonts/inter-latin-wght-normal.woff2) format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter Variable";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url(/static/fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--c-bg: #f6f7fb;
	--c-surface: #fff;
	--c-surface-2: #f0f2f8;
	--c-text: #12141c;
	--c-muted: #5b6172;
	--c-border: #e2e5ee;
	--c-brand: #5b2ee5;
	--c-brand-ink: #fff;
	--c-brand-soft: #ede8fd;
	--c-ok: #1f9d55;
	--c-bad: #d64545;
	--c-warn: #e0a800;

	/* Answer tiles: colour AND shape are both meaningful. Keep in step with ui.AnswerStyle. */
	--c-a1: #e2373f;
	--c-a2: #1f6fd6;
	--c-a3: #e0a21b;
	--c-a4: #2c9e4b;

	--r-sm: 8px;
	--r-md: 14px;
	--r-lg: 22px;
	--r-pill: 999px;

	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-6: 24px;
	--sp-8: 32px;
	--sp-12: 48px;

	--font: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--fs-sm: 0.875rem;
	--fs-md: 1rem;
	--fs-lg: 1.25rem;
	--fs-xl: 1.75rem;
	--fs-display: clamp(2rem, 5vw, 3rem);
	--lh: 1.5;

	--shadow-1: 0 1px 2px rgb(18 20 28 / 0.08), 0 4px 12px rgb(18 20 28 / 0.06);
	--shadow-2: 0 2px 6px rgb(18 20 28 / 0.12), 0 12px 32px rgb(18 20 28 / 0.12);

	/* The smallest comfortable tap target; every interactive element honours it. */
	--tap: 44px;
	--duration: 180ms;
}

/* The presenter screen: dark ground, and type sized to be read from the back of a room. Scoped
   rather than global so an admin page embedding a preview keeps its own scale. */
.stage {
	--c-bg: #0e1020;
	--c-surface: #191d38;
	--c-surface-2: #232a4d;
	--c-text: #f4f5ff;
	--c-muted: #a8adcc;
	--c-border: #2f3663;
	--c-brand: #8a6bff;
	--c-brand-ink: #0e1020;
	--c-brand-soft: #262151;

	--fs-sm: 1.25rem;
	--fs-md: 1.75rem;
	--fs-lg: 2.5rem;
	--fs-xl: 3.5rem;
	--fs-display: clamp(3rem, 7vw, 6rem);

	--shadow-1: 0 2px 10px rgb(0 0 0 / 0.4);
	--shadow-2: 0 12px 40px rgb(0 0 0 / 0.5);
}

/* The projector proper, as opposed to a preview embedded in an admin page: type and spacing keyed
   off `vmin` so one scale covers 1280×720, 1080p and 4K without a media query each. `rem` would
   pin the layout to the browser's font size, which on a room PC is whatever the last person left
   it at. */
.present {
	--sp-1: 0.35vmin;
	--sp-2: 0.7vmin;
	--sp-3: 1.05vmin;
	--sp-4: 1.4vmin;
	--sp-6: 2.1vmin;
	--sp-8: 2.8vmin;
	--sp-12: 4.2vmin;

	--fs-sm: 1.7vmin;
	--fs-md: 2.3vmin;
	--fs-lg: 3.4vmin;
	--fs-xl: 5vmin;
	--fs-display: 13vmin;

	--r-sm: 0.8vmin;
	--r-md: 1.4vmin;
	--r-lg: 2.2vmin;
}