/* Design tokens: custom properties, light/dark themes, base elements.
   Loaded first — every other stylesheet depends on these variables. */

/* SRARS — industrial clarity.
   NeXT/Apple restraint, IBM information systems and a restrained brutalist grid.

   INDEX (edit by section; keep order stable):
     1. Design tokens (custom properties, light/dark)
     2. Reset & base elements
     3. Global shell (header, nav, main, footer width)
     4. Brand & navigation
     5. Hero & PageTitle (page openings)
     6. Components: Card/CardGrid, Panel, ProseSection, Button, Tag, Metric
     7. Page-specific: contact, blog, admin
     8. Footer (identity, legal, metrics strip)
     9. Responsive breakpoints (72rem, 48rem)
    10. Motion preferences */

:root {
	--font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

	--bg: #e9e8e2;
	--bg-elevated: #f5f4ee;
	--bg-subtle: #deddd6;
	--fg: #121311;
	--fg-muted: #555850;
	--border: #1b1c19;
	--border-soft: #b9b9b1;
	--accent: #e03a22;
	--accent-contrast: #fffdf7;
	--danger: #b72518;
	--grid-line: rgb(18 19 17 / 0.07);
	--shadow: 4px 4px 0 var(--border);
	--page-width: 86rem;

	/* Always-dark panel palette: the footer, metrics strip and legal strip
	   are an instrument panel that stays dark in BOTH themes. These values
	   are fixed — do not swap them for theme tokens or override them in
	   the dark-theme blocks below. */
	--panel-bg: #121311;
	--panel-fg: #f1f0e9;
	--panel-fg-muted: #8b8d84;
	--panel-border: #2c2d29;
}

:root[data-theme="dark"] {
	--bg: #111210;
	--bg-elevated: #1a1b18;
	--bg-subtle: #24251f;
	--fg: #edede6;
	--fg-muted: #a5a69d;
	--border: #e1e1d9;
	--border-soft: #3d3f39;
	--accent: #ff563d;
	--accent-contrast: #111210;
	--danger: #ff6956;
	--grid-line: rgb(237 237 230 / 0.055);
	--shadow: 4px 4px 0 var(--border);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]):not([data-theme="dark"]) {
		--bg: #111210;
		--bg-elevated: #1a1b18;
		--bg-subtle: #24251f;
		--fg: #edede6;
		--fg-muted: #a5a69d;
		--border: #e1e1d9;
		--border-soft: #3d3f39;
		--accent: #ff563d;
		--accent-contrast: #111210;
		--danger: #ff6956;
		--grid-line: rgb(237 237 230 / 0.055);
		--shadow: 4px 4px 0 var(--border);
	}
}

:root {
	font-family: var(--font-sans);
	color: var(--fg);
	background: var(--bg);
	line-height: 1.55;
	color-scheme: light dark;
	font-synthesis: none;
	text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	min-height: 100vh;
	margin: 0;
	background-color: var(--bg);
	background-image:
		linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
	background-size: 4rem 4rem;
	color: var(--fg);
}

::selection { color: var(--accent-contrast); background: var(--accent); }

a {
	color: inherit;
	text-decoration-color: var(--accent);
	text-decoration-thickness: 1px;
	text-underline-offset: .24em;
}

a:hover { color: var(--accent); }

button, input, textarea { border-radius: 0; }