/* SportSync — calm design tokens, reset, typography.
   One purpose: a quiet, scannable overview of the events you follow.
   One typeface (Schibsted Grotesk, tabular numerals), muted palette, one
   restrained accent used only where it earns attention (live, must-see). */

:root {
	/* Tekst-TV, reborn — a premium modern take on NRK teletext sport pages:
	   near-black "page", monospace, the teletext colour language led by amber. */
	/* Dark (default) — the page */
	--bg: #08090c;
	--surface: #111318;
	--fg: #e9ecef;
	--fg-2: #949aa3;
	--fg-3: #5b616b;
	--line: rgba(255, 255, 255, 0.09);
	--accent: #ffb454;        /* teletext amber — leads the palette */
	--accent-ink: #08090c;    /* dark text on an amber block */
	--accent-wash: rgba(255, 180, 84, 0.13);
	--cyan: #66d0ff;          /* teletext cyan — secondary / links */
	--live: #ff5b54;          /* teletext red — live */

	--font: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, "Cascadia Mono", monospace;
	--display: var(--font);
	--max-w: 680px;
}

:root[data-theme="light"] {
	/* A clean "paper" sibling — same mono + structure carries the identity */
	--bg: #f4f4f1;
	--surface: #ffffff;
	--fg: #14161a;
	--fg-2: #5a616b;
	--fg-3: #9aa0a8;
	--line: rgba(20, 24, 34, 0.12);
	--accent: #b26a12;
	--accent-ink: #ffffff;
	--accent-wash: rgba(178, 106, 18, 0.12);
	--cyan: #0e7fb8;
	--live: #d33a30;
}

@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) {
		--bg: #f4f4f1;
		--surface: #ffffff;
		--fg: #14161a;
		--fg-2: #5a616b;
		--fg-3: #9aa0a8;
		--line: rgba(20, 24, 34, 0.12);
		--accent: #b26a12;
		--accent-ink: #ffffff;
		--accent-wash: rgba(178, 106, 18, 0.12);
		--cyan: #0e7fb8;
		--live: #d33a30;
	}
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font);
	font-size: 15px;
	line-height: 1.5;
	font-weight: 400;
	font-feature-settings: "tnum" 1;   /* tabular numerals — times line up */
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	padding-bottom: env(safe-area-inset-bottom);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
[hidden] { display: none !important; }

::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }