/* ===== site-theme =====
   The one palette and typeface shared by every site under ~/Sites — the web
   counterpart of home/theme.nix: sites never name a colour or a font family,
   they read the tokens below. Change a value here, rebuild/redeploy the
   sites, and they all follow.

   Palette origin: drogerie's hand-lifted copy of xn--gckvb8fzb.com's css.

   ---------------------------------------------------------------------------
   HOW TO EDIT
   ---------------------------------------------------------------------------
   Every colour is written once, as light-dark(<light>, <dark>), so the two
   appearances of a token sit side by side and cannot drift apart.

   The main colour is the single knob --accent-base. Put any colour there
   (e.g. #e8689e for pink) and both appearances follow:
     - dark  uses it exactly as written;
     - light keeps its hue and chroma but pins the lightness to --accent-light-l,
       because a colour bright enough for a dark page is unreadable on a light
       one. 0.52 clears WCAG 4.5:1 on --bg for every hue (checked from red
       through blue); raise it for a lighter accent, lower it for more contrast.
   If you pick something dark (L below ~0.6 in oklch), the dark appearance is
   the one that suffers — check it.

   Light/dark follows the system. A site forces one by setting
   `color-scheme: light` or `color-scheme: dark` on an element; every token
   under it resolves accordingly. Needs a 2024+ browser (light-dark() and
   relative colour syntax).
   --------------------------------------------------------------------------- */

:root {
	color-scheme: light dark;

	/* ---- the knobs ---- */
	--accent-base: #e7a15a;
	--accent-light-l: 0.52;

	--font-mono: "Iosevka", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	/* body text; point at a proportional stack to stop setting prose in mono */
	--font-body: var(--font-mono);

	--radius: 0.5rem;

	/* ---- neutrals ----                light      dark   */
	--bg:            light-dark(#f8f8f8, #0f1214);
	--surface:       light-dark(#f8f8f8, #0f1214);  /* inputs, cards on bg */
	--sunken:        light-dark(#ebebeb, #040505);  /* wells, code blocks  */
	/* cards holding text: sunken is near-black in dark, which made grey
	   labels on it read as dim holes, so panels lift above bg instead */
	--panel:         light-dark(#ebebeb, #1a1e22);
	--border:        light-dark(#dddddd, #1a1f23);  /* hairlines           */
	--border-strong: light-dark(#aaaaaa, #333333);  /* controls, tables    */
	--text:          light-dark(#0f1214, #e6e2d6);
	--subtle:        light-dark(#666666, #aaaaaa);  /* secondary text      */
	/* the source had #7f7f7f in both: on light 3.8:1, and on dark below 4.5:1
	   once it sits on --panel; each nudged until small print clears 4.5:1 */
	--muted:         light-dark(#6a6a6a, #8a8a8a);  /* captions, meta      */

	/* ---- accent, derived — edit --accent-base above, not these ---- */
	--accent: light-dark(
		oklch(from var(--accent-base) var(--accent-light-l) c h),
		var(--accent-base));
	--accent-ring: color-mix(in srgb, var(--accent) 25%, transparent);
	/* a fill behind text: :target, hover, callout boxes */
	--accent-tint: color-mix(in oklab, var(--accent) 16%, var(--bg));
}

/* Older browsers drop the relative colour above and would lose the accent
   entirely; give them the base colour instead. */
@supports not (color: oklch(from red l c h)) {
	:root { --accent: var(--accent-base); }
}

/* ---- typeface ----
   Self-hosted, subset to Latin + Latin Extended-A (Czech) + punctuation by
   `make fonts`; a character outside the subset falls back to the next family
   in --font-mono rather than showing tofu. */
@font-face {
	font-family: "Iosevka";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/iosevka-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Iosevka";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/iosevka-400-italic.woff2") format("woff2");
}
@font-face {
	font-family: "Iosevka";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/iosevka-700-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Iosevka";
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/iosevka-700-italic.woff2") format("woff2");
}