/*
 * nolanrumble.com: shared theme. Colour tokens and their light/dark mixing, type,
 * shape and motion tokens, base typography and the round icon button. Used by the
 * home page (with site.css for its layout) and every blog page (with blog.css).
 * Fonts are the platform's own UI fonts, so nothing is fetched from a font service.
 */

/* Colour tokens
 *
 * Each colour has a light (--l-*) and dark (--d-*) value, mixed by theme.js's
 * darkness: --t (continuous) for the sky, --tu (0 or 1, faded over 2.5s when it flips)
 * for text and buttons. Without color-mix() support, data-theme picks one side;
 * without JavaScript, the OS setting does.
 */

	@property --tu {
		syntax: "<number>";
		inherits: true;
		initial-value: 0;
	}

	:root[data-ui-fade] {
		transition: --tu 2.5s ease-in-out;
	}

	:root {
		--t: 0;
		--tu: 0;

		--l-text: #1d2733;              --d-text: #f1f5f9;
		--l-text-soft: #3b4756;         --d-text-soft: #cfd8e3;
		--l-glow: rgba(255, 255, 255, 0.65);  --d-glow: rgba(0, 0, 0, 0.55);
		--l-sky-top: #e9eef3;           --d-sky-top: #0b1220;
		--l-sky-bot: #cfd9e3;           --d-sky-bot: #142033;
		--l-mist: rgba(238, 243, 247, 0.8);   --d-mist: rgba(8, 13, 24, 0.7);
		--l-footer-fade: rgba(255, 255, 255, 0.45);  --d-footer-fade: rgba(0, 0, 0, 0.5);
		--l-btn-bg: rgba(255, 255, 255, 0.9);        --d-btn-bg: rgba(17, 24, 39, 0.88);
		--l-btn-bg-hover: #ffffff;      --d-btn-bg-hover: rgba(30, 41, 59, 0.98);
		--l-btn-fg: #1f2d3d;            --d-btn-fg: #e2e8f0;
		--l-btn-border: rgba(31, 45, 61, 0.14);      --d-btn-border: rgba(226, 232, 240, 0.16);
		--l-shadow: rgba(31, 45, 61, 0.14);          --d-shadow: rgba(0, 0, 0, 0.4);
		--l-ring: rgba(42, 68, 102, 0.45);           --d-ring: rgba(159, 179, 200, 0.6);
		--l-accent: #2c3e50;            --d-accent: #9fb3c8;

		/* Fallback when color-mix() is unsupported: light. */
		--text: var(--l-text);
		--text-soft: var(--l-text-soft);
		--glow: var(--l-glow);
		--sky-top: var(--l-sky-top);
		--sky-bot: var(--l-sky-bot);
		--mist: var(--l-mist);
		--footer-fade: var(--l-footer-fade);
		--btn-bg: var(--l-btn-bg);
		--btn-bg-hover: var(--l-btn-bg-hover);
		--btn-fg: var(--l-btn-fg);
		--btn-border: var(--l-btn-border);
		--shadow: var(--l-shadow);
		--ring: var(--l-ring);
		--accent: var(--l-accent);
		color-scheme: light;
	}

	:root[data-theme="dark"] {
		--text: var(--d-text);
		--text-soft: var(--d-text-soft);
		--glow: var(--d-glow);
		--sky-top: var(--d-sky-top);
		--sky-bot: var(--d-sky-bot);
		--mist: var(--d-mist);
		--footer-fade: var(--d-footer-fade);
		--btn-bg: var(--d-btn-bg);
		--btn-bg-hover: var(--d-btn-bg-hover);
		--btn-fg: var(--d-btn-fg);
		--btn-border: var(--d-btn-border);
		--shadow: var(--d-shadow);
		--ring: var(--d-ring);
		--accent: var(--d-accent);
		color-scheme: dark;
	}

	/* No JavaScript: follow the OS setting. */
	@media (prefers-color-scheme: dark) {
		:root:not([data-theme]) {
			--t: 1;
			--tu: 1;
			color-scheme: dark;
		}
	}

	@supports (color: color-mix(in srgb, red 50%, blue)) {
		html:root,
		html:root[data-theme] {
			--text: color-mix(in srgb, var(--d-text) calc(var(--tu) * 100%), var(--l-text));
			--text-soft: color-mix(in srgb, var(--d-text-soft) calc(var(--tu) * 100%), var(--l-text-soft));
			--glow: color-mix(in srgb, var(--d-glow) calc(var(--tu) * 100%), var(--l-glow));
			--sky-top: color-mix(in srgb, var(--d-sky-top) calc(var(--t) * 100%), var(--l-sky-top));
			--sky-bot: color-mix(in srgb, var(--d-sky-bot) calc(var(--t) * 100%), var(--l-sky-bot));
			--mist: color-mix(in srgb, var(--d-mist) calc(var(--tu) * 100%), var(--l-mist));
			--footer-fade: color-mix(in srgb, var(--d-footer-fade) calc(var(--tu) * 100%), var(--l-footer-fade));
			--btn-bg: color-mix(in srgb, var(--d-btn-bg) calc(var(--tu) * 100%), var(--l-btn-bg));
			--btn-bg-hover: color-mix(in srgb, var(--d-btn-bg-hover) calc(var(--tu) * 100%), var(--l-btn-bg-hover));
			--btn-fg: color-mix(in srgb, var(--d-btn-fg) calc(var(--tu) * 100%), var(--l-btn-fg));
			--btn-border: color-mix(in srgb, var(--d-btn-border) calc(var(--tu) * 100%), var(--l-btn-border));
			--shadow: color-mix(in srgb, var(--d-shadow) calc(var(--tu) * 100%), var(--l-shadow));
			--ring: color-mix(in srgb, var(--d-ring) calc(var(--tu) * 100%), var(--l-ring));
			--accent: color-mix(in srgb, var(--d-accent) calc(var(--tu) * 100%), var(--l-accent));
		}
	}

/* Derived colours: surfaces for blog content, from the button colours. */

	:root {
		--surface: var(--btn-bg);
		--surface-hover: var(--btn-bg-hover);
		--rule: var(--btn-border);
		--code-bg: var(--surface);
	}

	@supports (color: color-mix(in srgb, red 50%, blue)) {
		:root {
			--code-bg: color-mix(in srgb, var(--text) 6%, var(--surface));
		}
	}

/* Type, shape, elevation and motion tokens */

	:root {
		--font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
			"Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
		--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
			"Liberation Mono", "DejaVu Sans Mono", monospace;
		--fs-base: 15pt;
		--fs-h1: 4.35em;
		--fs-h1-sm: 2.5em;
		--fs-lead: 1.25em;
		--fs-small: 0.8em;
		--lh: 1.75em;
		--tracking: -0.01em;
		--tracking-tight: -0.035em;

		--btn-size: 4.375em;
		--btn-cell: 5.35em;
		--btn-icon: 1.75em;
		--btn-size-sm: 40px;
		--btn-icon-sm: 20px;
		--radius-round: 100%;
		--radius: 0.5em;
		--blur: 6px;
		--measure: 68ch;
		--gutter: 16px;

		--shadow-rest: 0 2px 8px;
		--shadow-lift: 0 8px 22px;
		--ring-width: 3px;
		--ease: 0.2s ease-in-out;
	}

	@media screen and (max-width: 1680px) {
		:root { --fs-base: 13pt; }
	}

	@media screen and (max-width: 1280px) {
		:root { --fs-base: 12pt; }
	}

	@media screen and (max-width: 736px) {
		:root { --fs-base: 11pt; }
	}

/* Base */

	*, *:before, *:after {
		box-sizing: border-box;
	}

	body {
		background: var(--sky-bot);
		color: var(--text);
		/* The platform's UI font first: each was designed for on-screen reading. */
		font-family: var(--font-ui);
		font-size: var(--fs-base);
		font-weight: 400;
		letter-spacing: var(--tracking);
		line-height: var(--lh);
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		-webkit-text-size-adjust: 100%;
	}

	a {
		color: inherit;
		text-decoration: none;
	}

	@media screen and (max-width: 736px) {
		body {
			min-width: 320px;
		}
	}

/* Icon button: a solid round button that lifts on hover. Icons come from
   assets/icons/icons.svg (<svg><use href="...#name"/></svg>) and take the text
   colour; an inline icon that sets its own fill="none" (stroke icons) keeps it.
   .icon-btn--sm is the 40px size used for floating controls such as the theme
   toggle; its sizes are in px, so it doesn't grow on hover like the em-sized one. */

	.icon-btn {
		align-items: center;
		backdrop-filter: blur(var(--blur));
		-webkit-backdrop-filter: blur(var(--blur));
		background-color: var(--btn-bg);
		border: solid 1px var(--btn-border);
		border-radius: var(--radius-round);
		box-shadow: var(--shadow-rest) var(--shadow);
		color: var(--btn-fg);
		cursor: pointer;
		display: inline-flex;
		fill: currentColor;
		height: var(--btn-size);
		justify-content: center;
		padding: 0;
		transition: background-color var(--ease), box-shadow var(--ease), color var(--ease), transform var(--ease), font-size var(--ease);
		width: var(--btn-size);
		-webkit-tap-highlight-color: transparent;
	}

		.icon-btn svg {
			height: var(--btn-icon);
			width: var(--btn-icon);
		}

	/* State rules keep one specificity (:where adds none) and the original order, so
	   a pressed button settles and the focus ring still shows while it's pressed.
	   Only the em-sized button changes font-size and has a pressed state; the small
	   one keeps its hover lift while pressed, as the theme toggle always has. */
	.icon-btn:hover,
	.icon-btn:focus-visible {
		background-color: var(--btn-bg-hover);
		box-shadow: var(--shadow-lift) var(--shadow);
		color: var(--accent);
		transform: translateY(-2px);
	}

	.icon-btn:where(:not(.icon-btn--sm)):hover,
	.icon-btn:where(:not(.icon-btn--sm)):focus-visible {
		font-size: 1.1em;
	}

	.icon-btn:where(:not(.icon-btn--sm)):active {
		background-color: var(--btn-bg-hover);
		box-shadow: var(--shadow-rest) var(--shadow);
		color: var(--accent);
		font-size: 0.95em;
		transform: translateY(0);
	}

	.icon-btn:focus {
		outline: none;
	}

	.icon-btn:focus-visible {
		box-shadow: var(--shadow-lift) var(--shadow), 0 0 0 var(--ring-width) var(--ring);
	}

	.icon-btn--sm {
		height: var(--btn-size-sm);
		transition: background-color var(--ease), box-shadow var(--ease), color var(--ease), transform var(--ease);
		width: var(--btn-size-sm);
	}

		.icon-btn--sm svg {
			height: var(--btn-icon-sm);
			width: var(--btn-icon-sm);
		}

	@media screen and (max-width: 736px) {
		.icon-btn:where(:not(.icon-btn--sm)):hover,
		.icon-btn:where(:not(.icon-btn--sm)):focus-visible,
		.icon-btn:where(:not(.icon-btn--sm)):active {
			font-size: 1em;
		}
	}

/* Theme mode icons: the home page toggle and the blog options panel cycle time of
   day -> light -> dark and show the current mode. */

	#theme-toggle svg, .options-theme svg {
		display: none;
	}

	:root[data-mode="time"] #theme-toggle .icon-time,
	:root[data-mode="light"] #theme-toggle .icon-sun,
	:root[data-mode="dark"] #theme-toggle .icon-moon,
	:root[data-mode="time"] .options-theme .icon-time,
	:root[data-mode="light"] .options-theme .icon-sun,
	:root[data-mode="dark"] .options-theme .icon-moon {
		display: block;
	}

	@media (prefers-reduced-motion: reduce) {
		.icon-btn {
			transition: none;
		}
	}