/* SPDX-License-Identifier: FSL-1.1-MIT */

/* Runbooks design tokens: dark-first.
   Palette seeded from the mallard: head green #3D6756 (brand), wing slate #363341
   (surfaces), neck lavender #ACAFC4 (text), speculum #7B8CAB (links/info), chest
   oxblood #54140A (danger); the bill amber #E0A94C is derived for warn. Status is
   never the brand accent. */

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

:root {
	color-scheme: dark;

	--bg: #17161d;
	--surface: #201f29;
	--surface-2: #272633;
	--nav-bg: #121118;
	--nav-text: #d7d9e3;
	--nav-muted: #80849a;
	--nav-border: rgba(172, 175, 196, 0.14);
	--nav-hover: rgba(172, 175, 196, 0.07);
	--nav-active-bg: rgba(123, 140, 171, 0.18);
	--nav-active-text: #c6cfe2;

	--accent: #3d6756;
	--accent-strong: #6aa88d;
	--accent-lt: rgba(61, 103, 86, 0.32);
	--on-accent: #eef4f0;
	--link: #9fb0cf;
	--success: #5fa887;
	--warn: #e0a94c;
	--danger: #e0705a;

	--text: #e9eaf1;
	--muted: #9a9db2;
	--border: rgba(172, 175, 196, 0.14);
	--border-strong: rgba(172, 175, 196, 0.26);
	--row-hover: #24232e;
	--row-sel: rgba(61, 103, 86, 0.22);

	/* Code surfaces stay dark in both themes, so their colours are constants:
	   never theme roles, or a light-theme token renders dark-on-dark. */
	--code-bg: #111;
	--code-border: #2a2a2a;
	--code-text: #e5e5e5;
	--code-var-filled: #6aa88d;
	--code-var-secret: #888;

	--radius: 6px;
	--shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
	--tip-bg: #2a2933;
	--tip-text: #e9eaf1;
	--tip-border: rgba(106, 168, 141, 0.3);

	/* Spacing scale: `hair` is the sub-scale gap/hairline below space-1. */
	--space-hair: 2px;
	--space-0: 0px;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;

	/* Structural sizes */
	--size-app-header: 56px;
	--size-app-rail: 56px; /* the persistent thin left strip */
	--size-app-sidebar: 220px; /* the summoned sidebar drawer */
	--size-detail-min: 380px;
	--size-detail-max: 480px;
	--notes-width: 460px; /* the notes overlay's width; JS overrides it when dragged */

	/* Component sizing */
	--ctrl-pad-y: 7px; /* vertical padding that sets interactive control height: btn, input, select */
	--size-step-num: 26px; /* the step-number badge; the collapsed-step indent derives from it */

	/* Type: Atkinson Hyperlegible Next (UI) + Mono (commands) */
	--font-sans: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, -apple-system, sans-serif;
	--font-mono: "Atkinson Hyperlegible Mono", ui-monospace, monospace;
	/* The shade glyphs (░▒▓) are not in Atkinson; a tiny pinned subset keeps the
	   brand mark and the bookshelf identical everywhere instead of the OS
	   fallback. See public/fonts/noto-sans-mono-shades.woff2. */
	--font-shade: "Shade Mono", "Atkinson Hyperlegible Mono", ui-monospace, monospace;
	/* Light-on-dark strokes read thinner, so code sits above regular; the
	   appearance preference switches this to 500. */
	--mono-weight: 450;

	/* Type scale: compact/dense. The S/M/L reading-size preference sets
	   --text-scale, which moves the whole scale and nothing else (spacing and
	   structural sizes stay put). */
	--text-scale: 1;
	--text-2xs: calc(12px * var(--text-scale));
	--text-xs: calc(14px * var(--text-scale));
	--text-sm: calc(15px * var(--text-scale));
	--text-base: calc(16px * var(--text-scale));
	--text-md: calc(18px * var(--text-scale));
	--text-lg: calc(21px * var(--text-scale));
	--text-xl: calc(25px * var(--text-scale));
	--text-2xl: calc(32px * var(--text-scale));
	/* The prose measure: long-form text caps here; tables and code keep the column. */
	--measure: 72ch;

	/* Line heights */
	--leading-tight: 1.25;
	--leading-snug: 1.375;
	--leading-normal: 1.5;

	/* Radius scale: squared off: this is an operator tool, not a consumer app. */
	--radius-sm: 4px;
	--radius-md: 6px; /* same as --radius */
	--radius-lg: 8px;

	/* Shadow scale */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.35);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.35);

	/* Motion */
	--duration-fast: 120ms;
	--duration-base: 200ms;
	--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

html[data-theme="light"] {
	color-scheme: light;

	--bg: #f2f1f6;
	--surface: #ffffff;
	--surface-2: #f7f6fa;
	--nav-bg: #ebeaf1;
	--nav-text: #2e2d38;
	--nav-muted: #6f728a;
	--nav-border: rgba(54, 51, 65, 0.14);
	--nav-hover: rgba(54, 51, 65, 0.05);
	--nav-active-bg: rgba(123, 140, 171, 0.16);
	--nav-active-text: #33405a;

	--accent: #2f5546;
	--accent-strong: #345c4c;
	--accent-lt: rgba(61, 103, 86, 0.14);
	--on-accent: #f4f8f5;
	--link: #4c5f80;
	--success: #2f6b52;
	--warn: #976a1c;
	--danger: #a8402c;

	--text: #23222c;
	--muted: #5f6273;
	--border: rgba(54, 51, 65, 0.14);
	--border-strong: rgba(54, 51, 65, 0.24);
	--row-hover: #f4f3f8;
	--row-sel: rgba(47, 85, 70, 0.1);

	--shadow: 0 1px 3px rgba(35, 34, 44, 0.1), 0 1px 2px rgba(35, 34, 44, 0.06);
	--tip-bg: #23222c;
	--tip-text: #f2f1f6;
	--tip-border: rgba(52, 92, 76, 0.3);

	--shadow-sm: 0 1px 2px rgba(35, 34, 44, 0.08);
	--shadow-md: 0 4px 12px rgba(35, 34, 44, 0.12), 0 2px 4px rgba(35, 34, 44, 0.07);
	--shadow-lg: 0 8px 24px rgba(35, 34, 44, 0.16), 0 4px 8px rgba(35, 34, 44, 0.08);
}

/* Code-weight preference (appearance control) */
html[data-code-weight="bold"] {
	--mono-weight: 600;
}

/* Reading-size preference (appearance control) */
html[data-text-size="small"] {
	--text-scale: 0.9;
}
html[data-text-size="large"] {
	--text-scale: 1.15;
}

body {
	font-family: var(--font-sans);
	background: var(--bg);
	color: var(--text);
	font-size: 1em;
}

/* Compact density for 1366–1439px: everything is slightly smaller to reclaim space */
@media (max-width: 1439px) {
	:root {
		--size-app-sidebar: 196px;
		--size-app-header: 48px;
		--size-detail-min: 340px;
		--text-2xs: 11px;
		--text-xs: 13px;
		--text-sm: 14px;
		--text-base: 15px;
		--text-md: 17px;
		--text-lg: 19px;
		--text-xl: 22px;
		--text-2xl: 28px;
	}
}