/*
 * tokens.css — the shared design system for /lab/, /auth/, /ai/ and /service/music/.
 *
 * ---------------------------------------------------------------------------
 * SECOND REVISION, 2026-09-27 — the palette is now *transcribed*, not chosen.
 * ---------------------------------------------------------------------------
 *
 * The first revision hand-picked colours that happened to match the upstream
 * Sukka *mirror*. That was wrong: this site's homepage is not the mirror. Its
 * theme overrides the mirror's dark palette on purpose, and the first revision
 * was carrying the mirror's blue-grey (#181c27 / #252d38) where the homepage
 * shows pure black.
 *
 * So the palette in section 1 is copied value for value out of the blog's own
 * theme, with one deliberate change — see the next paragraph:
 *
 *   C:\xampp\htdocs\wordpress\wp-content\themes\peppapig\assets\css\peppapig.css
 *     -> section 1, `:root[data-theme="dark"]` and the matching light block
 *     -> `:root { --radius: 20px; --radius-sm: 12px }`
 *
 * WHY THE --pp- PREFIX. The homepage names its variables --bg, --main, --t,
 * --border, --radius. Section 1 cannot use those names verbatim, because at
 * least one page already owns two of them: /service/music/'s static/style.css
 * opens with an adapter block
 *
 *     :root { --bg: var(--lab-bg); --border: var(--lab-border); ... }
 *
 * and it loads AFTER this file. Had section 1 declared a bare --bg, the cascade
 * would have picked the later --bg: var(--lab-bg), making the pair
 * --bg <-> --lab-bg a CYCLE — which CSS resolves by invalidating both, dropping
 * `background: var(--lab-bg)` and leaving that page with no background at all.
 * One prefix removes the whole class of problem, on this page and any future one.
 *
 * So: "the lab pages look like the homepage" is true by construction. There is
 * one place a colour is written (section 1) and the --lab-* names the six pages
 * already use are aliases onto it (section 2). To re-sync after a homepage
 * change, copy section 1 again and prefix each name with --pp-.
 *
 * ---------------------------------------------------------------------------
 * THE ONE THING THAT IS NOT A STRAIGHT ALIAS
 * ---------------------------------------------------------------------------
 *
 * In dark mode the homepage paints its background and its card surface the SAME
 * black, and lets the eye find surfaces with a 1px --border hairline instead of
 * a fill. Its own comment says why: "every surface is now black ... Paint both
 * #000 and the cards vanish - there is nothing left for the eye to find the
 * edges with."
 *
 * That works here for free, because every card on every lab page already
 * carries `border: 1px solid var(--lab-border)`. Measured after the change:
 * card fill against page background is contrast 1.00 in dark, and the hairline
 * is 1.48 - which is exactly the homepage's own arrangement, not a regression.
 *
 *   DO NOT "fix" the flatness by lifting --lab-surface off black.
 *   If a new surface looks unbounded, give IT a --lab-border hairline.
 *
 * ---------------------------------------------------------------------------
 * WHERE THE HOMEPAGE HAS NO COUNTERPART (see section 3)
 * ---------------------------------------------------------------------------
 *   1. --lab-ok / -warn / -bad / -info and their -soft fills
 *      The mirror has no semantic palette at all. Kept from revision 1; they
 *      are the only colours here that the homepage cannot vouch for.
 *   2. --lab-accent-soft / --lab-accent-line
 *      The homepage has --link but no tint/line derived from it. Written out
 *      as literal rgba per theme rather than color-mix(), so they can never
 *      fall through to transparent.
 *   3. --lab-border-strong
 *      The homepage has one line weight. Derived with color-mix() over a
 *      solid fallback, so a browser without color-mix() keeps a working value.
 *   4. --lab-text-2 / --lab-text-3
 *      The homepage has three text levels (--t, --t-s, --t-l), not four.
 *      --lab-text-2 takes --t-l; --lab-text-3 is a derived fourth step.
 *   5. --lab-font-sans / --lab-font-mono
 *      The homepage declares no font stack of its own (measured: exactly one
 *      `font-family: inherit` in its five inline style blocks). Kept from
 *      revision 1.
 */

/* ===========================================================================
 * 1. PALETTE — the homepage's, value for value. Do not hand-edit; re-copy.
 *    (--pp- prefix: see the header. Only the names differ, never the values.)
 * =========================================================================== */

/* Light is the default. With no data-theme at all — script blocked, or a
 * crawler — the homepage's own rule falls back to the mirror's light palette,
 * and so do we. There is deliberately no `:root[data-theme="light"]` block:
 * :root already carries these, and :root[data-theme="dark"] outranks it on
 * specificity (0,2,0 against 0,1,0). */
:root {
	color-scheme: light;
	--pp-bg: #f2f5f8;
	--pp-main: #fff;
	--pp-alt: #e6e8ee;
	--pp-border: #e3e6eb;
	--pp-hover-bg: #eceef2;
	--pp-tag: #eceef2;
	--pp-c-bg: #f4f5f7;
	--pp-code: #405363;
	--pp-t: #37475a;
	--pp-t-l: rgb(100.2094240838,118.9986910995,139.0405759162);
	--pp-t-s: rgb(47.1804878049,60.8780487805,77.6195121951);
	--pp-title: rgb(70.5,91.5,109.5);
	--pp-logo: #000;
	--pp-link: #1f6dda;
	--pp-link-hover: #2674e0;
	--pp-fab: #fff;
	--pp-shadow: 0 4px 10px rgba(0,2,4,.06), 0 0 1px rgba(0,2,4,.11);
	--pp-github: #24292e;
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--pp-bg: #000;
	--pp-main: #000;
	--pp-alt: #2b2b2b;
	--pp-border: #2b2b2b;
	--pp-hover-bg: #161616;
	--pp-tag: #000;
	--pp-c-bg: #000;
	--pp-code: #c3c7cb;
	--pp-t: hsla(0,0%,100%,.86);
	--pp-t-l: hsla(0,0%,100%,.66);
	--pp-t-s: hsla(0,0%,100%,.9);
	--pp-title: hsla(0,0%,100%,.92);
	--pp-logo: #fff;
	--pp-link: #0284c7;
	--pp-link-hover: hsl(204,71%,57.7%);
	--pp-fab: #000;
	--pp-shadow: none;
	--pp-github: #000;
}

/* The homepage's corners. Same in both themes, so they live in :root. */
:root {
	--pp-radius: 20px;
	--pp-radius-sm: 12px;
}

/* ===========================================================================
 * 2. --lab-* — the names the six pages already use, pointing at section 1.
 * =========================================================================== */

:root {
	/* surfaces */
	--lab-bg:			var(--pp-bg);		/* page */
	--lab-surface:		var(--pp-main);		/* cards, header/footer bars */
	--lab-surface-2:	var(--pp-hover-bg);	/* inputs, code, table-row hover */
	--lab-base:			var(--pp-alt);		/* the stronger fill: nav/button hover */

	/* hairlines — in dark mode these ARE the card boundary, see the header */
	--lab-border:		var(--pp-border);
	--lab-border-strong: var(--pp-border);	/* solid fallback for the mix below */
	--lab-border-strong: color-mix(in srgb, var(--pp-border) 78%, var(--pp-logo));

	/* text, strongest to dimmest */
	--lab-text-strong:	var(--pp-t-s);
	--lab-text:			var(--pp-t);
	--lab-text-2:		var(--pp-t-l);
	--lab-text-3:		var(--pp-t-l);		/* fallback for the mix below */
	--lab-text-3:		color-mix(in srgb, var(--pp-t-l) 72%, var(--pp-bg));

	/* accent */
	--lab-accent:		var(--pp-link);
	--lab-accent-solid:	var(--pp-link);		/* filled buttons; pages set color:#fff */

	/* shape */
	--lab-radius:		var(--pp-radius);
	--lab-radius-sm:	var(--pp-radius-sm);
	--lab-radius-pill:	999px;

	/* depth — none in dark mode, exactly like the homepage */
	--lab-shadow:		var(--pp-shadow);
	--lab-shadow-lift:	var(--pp-shadow);

	/* rhythm and type — these four were already measured off the homepage's
	 * nav (padding:15px 12px + height:27px = 57px, transition .1s ease-in-out,
	 * line-height 22.5px) and its 1184px column, so they are unchanged. */
	--lab-rhythm:		22.5px;
	--lab-header-h:		57px;
	--lab-container:	1184px;
	--lab-sidebar:		196px;
	--lab-gutter:		max(20px, calc((100vw - var(--lab-container)) / 2 + var(--lab-rhythm)));
	--lab-ease:			100ms ease-in-out;

	--lab-font-sans:	-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto,
						"PingFang SC", "Hiragino Sans GB", "Source Han Sans SC",
						"Noto Sans CJK SC", "Noto Sans SC", "Microsoft YaHei",
						"Helvetica Neue", Helvetica, Arial, sans-serif;
	--lab-font-mono:	ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", Menlo,
						Consolas, "Liberation Mono", monospace;
}

/* ===========================================================================
 * 3. What the homepage cannot supply.
 * =========================================================================== */

/* 3a. The accent's tint and line, written as literal rgba per theme so they can
 *     never fall through to transparent. Values are revision 1's, which already
 *     matched the homepage's #1f6dda (light) and #0284c7 (dark) links. */
:root {
	--lab-accent-soft:	rgba(31,109,218,.12);
	--lab-accent-line:	rgba(31,109,218,.45);
}

:root[data-theme="dark"] {
	--lab-accent-soft:	rgba(2,132,199,.12);
	--lab-accent-line:	rgba(2,132,199,.45);
}

/* 3b. Semantic colours. The mirror has none, so these are the only palette
 *     values here the homepage does not vouch for. Revision 1's values, which
 *     are legible on the homepage's black in dark mode. */
:root {
	--lab-ok:			#1a7f37;	--lab-ok-soft:		rgba(26,127,55,.09);
	--lab-warn:			#9a6700;	--lab-warn-soft:	rgba(154,103,0,.09);
	--lab-bad:			#cf222e;	--lab-bad-soft:		rgba(207,34,46,.09);
	--lab-info:			#0969da;	--lab-info-soft:	rgba(9,105,218,.09);
}

:root[data-theme="dark"] {
	--lab-ok:			#3fb950;	--lab-ok-soft:		rgba(63,185,80,.10);
	--lab-warn:			#d29922;	--lab-warn-soft:	rgba(210,153,34,.10);
	--lab-bad:			#f85149;	--lab-bad-soft:		rgba(248,81,73,.10);
	--lab-info:			#58a6ff;	--lab-info-soft:	rgba(88,166,255,.10);
}