/**
 * base.css — semantic tokens, typography classes, @font-face, global resets,
 * accessibility primitives, focus-visible refinements.
 *
 * Loaded on every page from base.njk AFTER tailwind.css (so Tailwind's @layer
 * declaration order is established first; this file's @layer base blocks merge
 * into the existing base layer).
 *
 * Extracted from src/assets/css/app.css as part of #147 PR 1 — CSS file split
 * foundation. Originally this content lived at app.css lines 207-423 (semantic
 * tokens + typography classes), 425-512 (global resets + skip-link +
 * reduced-motion guard), 875-915 (@font-face declarations), 916-1007
 * (extended typography + a11y primitives + focus-visible). Content is
 * byte-for-byte preserved from the original; this file only adds these
 * orientation comments.
 *
 * Companion files:
 *   - app.css      — Tailwind entry + @theme tokens (compiled to tailwind.css)
 *   - shared.css   — component primitives (.container, .aurora, .btn, etc.)
 *   - nav.css      — nav-specific styles (migrated from nav.njk per #147)
 *   - footer.css   — footer-specific styles (migrated from footer.njk per #147)
 *   - pages/*.css  — per-page styles (lands in PR 2 + PR 3 of #147)
 */

/* =========================================================================
	BASE LAYER — semantic tokens + typography classes
	These are NOT for utility composition; they're for hand-styling in
	components, inline styles, and custom CSS. Per the issue body
	recommendation: semantic aliases (`--bg-page`, `--fg-primary`, glass
	surfaces, semantic accents) stay as plain CSS custom properties.
	========================================================================= */

@layer base {
	:root {
		/* Semantic surfaces — backgrounds */
		--bg-page: var(--color-ink-1000);
		--bg-surface: var(--color-ink-950);
		--bg-raised: var(--color-ink-900);
		--bg-card: var(--color-ink-800);
		--bg-card-hover: var(--color-ink-700);
		--bg-overlay: rgba(4, 6, 14, 0.72);

		/* Glass — translucent surfaces. Pair with backdrop-filter: blur(...) */
		--glass-thin: rgba(255, 255, 255, 0.04);
		--glass: rgba(255, 255, 255, 0.06);
		--glass-strong: rgba(255, 255, 255, 0.1);
		--glass-blue: rgba(31, 86, 245, 0.12);
		--glass-cyan: rgba(95, 236, 253, 0.1);

		/* Semantic foregrounds */
		--fg-primary: var(--color-ink-100);
		--fg-secondary: var(--color-ink-200);
		--fg-tertiary: var(--color-ink-300);
		--fg-muted: var(--color-ink-400);
		--fg-on-blue: #ffffff;
		--fg-on-amber: #1a1100;

		/* Borders */
		--border-subtle: rgba(255, 255, 255, 0.06);
		--border-default: rgba(255, 255, 255, 0.1);
		--border-strong: rgba(255, 255, 255, 0.18);
		--border-brand: rgba(95, 236, 253, 0.4);

		/* Semantic accents — purpose-named pointers to the palette.
			--accent-spark and --accent-data are the brand's two-accent
			semantic duality (added #164): cyan signals "you can do something
			here" (interaction, action, hover, link, primary CTA, active
			state); amber signals "here is structured information about this
			thing" (industry tag, tech stack chip, outcome metric label,
			categorical metadata). Cultural precedent: Mass Effect's Paragon
			(blue) / Renegade (orange) UI duality + the omni-tool HUD
			aesthetic. The Animated Hero kit + Acura BAP audit-tools SVG
			already used this palette in spirit; #164 promotes it to a
			first-class semantic token across the shipped site. */
		--accent-primary: var(--color-blue-500);
		--accent-spark: var(--color-cyan-300);
		--accent-data: var(--color-amber-400);
		--accent-warm: var(--color-amber-400);
		--accent-volt: var(--color-volt-400);

		/* Semantic feedback colors — non-palette aliases */
		--warning: var(--color-amber-400);
		--info: var(--color-cyan-300);

		/* All shadow tokens live here (not in @theme) because Tailwind v4's
			shadow namespace contract is unclear and verified-unreliable for
			our use case. Both single-segment (--shadow-sm) and multi-segment
			(--shadow-glow-cyan) names silently dropped from compiled output
			during the #29 port. Plain :root custom properties always emit;
			reference as `box-shadow: var(--shadow-sm)` from custom CSS, or
			hand-write a utility class when needed in Sprint 2 / WS3. */
		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6);
		--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.4);
		--shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.65), 0 4px 12px rgba(0, 0, 0, 0.5);
		--shadow-xl: 0 40px 120px rgba(0, 0, 0, 0.75);
		--shadow-glow-blue:
			0 0 0 1px rgba(31, 86, 245, 0.55), 0 0 22px rgba(31, 86, 245, 0.55), 0 14px 44px -8px rgba(31, 86, 245, 0.85);
		--shadow-glow-cyan:
			0 0 0 1px rgba(95, 236, 253, 0.45), 0 0 22px rgba(95, 236, 253, 0.5), 0 14px 52px -6px rgba(95, 236, 253, 0.55);
		--shadow-glow-amber:
			0 0 0 1px rgba(245, 158, 11, 0.45), 0 0 14px rgba(245, 158, 11, 0.45), 0 12px 44px -8px rgba(245, 158, 11, 0.55);
		--shadow-glow-volt: 0 0 28px rgba(204, 255, 0, 0.1);
		--shadow-inset-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.06);

		/* ─────────────────────────────────────────────────────────────────
			STATUS TOKENS — in-development case-study variant
			Semantic aliases on the existing volt-400 scale so the
			live-status intent is explicit at the call site. Used by the
			.innov8-csid-* (in-development-case-study) CSS block at the
			bottom of this file. Volt-400 is reserved across the site
			for "this is active right now" energy — the alias layer lets
			us repaint the status palette later (e.g. dial volt to a
			cyan if the brand evolves) without grepping every status
			selector. See:
				src/_includes/layouts/in-development-case-study.njk
				docs/branding/design-system/preview/In-Development
					Case Study - Layout Wireframes.html
			───────────────────────────────────────────────────────────────── */
		--color-status-active: var(--color-volt-400); /* #ccff00 */
		--color-status-active-soft: rgba(204, 255, 0, 0.06); /* pill body + chip body */
		--color-status-active-border: rgba(204, 255, 0, 0.28); /* pill border + active-card border */
		--color-status-active-ring: rgba(204, 255, 0, 0.6); /* pulse ring stroke */
	}

	/* ─────────────────────────────────────────────────────────────────────
		SEMANTIC TYPOGRAPHY CLASSES
		Hand-applied classes for headlines, leads, captions, etc. Tailwind
		utilities can still compose on top of these (margin, color overrides)
		but the family + size + spacing + line-height baseline lives here.
		───────────────────────────────────────────────────────────────────── */

	.t-hero,
	.t-h1,
	.t-h2,
	.t-h3,
	.t-h4 {
		font-family: var(--font-display);
		color: var(--fg-primary);
		font-weight: 600;
		letter-spacing: var(--tracking-tight);
		line-height: var(--leading-tight);
		text-wrap: balance;
	}

	.t-hero {
		font-size: var(--text-hero);
		font-weight: 700;
		letter-spacing: -0.035em;
	}

	.t-h1 {
		font-size: var(--text-h1);
	}

	.t-h2 {
		font-size: var(--text-h2);
	}

	.t-h3 {
		font-size: var(--text-h3);
		letter-spacing: var(--tracking-snug);
		line-height: var(--leading-snug);
	}

	.t-h4 {
		font-size: var(--text-h4);
		letter-spacing: var(--tracking-snug);
		line-height: var(--leading-snug);
	}

	.t-h5 {
		font-family: var(--font-display);
		font-size: var(--text-h5);
		font-weight: 600;
		letter-spacing: var(--tracking-snug);
		line-height: var(--leading-snug);
		color: var(--fg-primary);
	}

	.t-lead {
		font-family: var(--font-sans);
		font-size: var(--text-body-lg);
		font-weight: 400;
		line-height: var(--leading-base);
		color: var(--fg-secondary);
		text-wrap: pretty;
	}

	.t-body {
		font-family: var(--font-sans);
		font-size: var(--text-body);
		font-weight: 400;
		line-height: var(--leading-base);
		color: var(--fg-secondary);
		text-wrap: pretty;
	}

	.t-body-sm {
		font-family: var(--font-sans);
		font-size: var(--text-body-sm);
		font-weight: 400;
		line-height: var(--leading-base);
		color: var(--fg-tertiary);
	}

	.t-caption {
		font-family: var(--font-sans);
		font-size: var(--text-caption);
		font-weight: 500;
		color: var(--fg-tertiary);
	}

	.t-overline {
		font-family: var(--font-mono);
		font-size: var(--text-overline);
		font-weight: 500;
		letter-spacing: var(--tracking-mega);
		text-transform: uppercase;
		color: var(--accent-spark);
	}

	.t-mono {
		font-family: var(--font-mono);
		font-size: var(--text-body-sm);
		font-weight: 400;
		letter-spacing: 0;
		color: var(--fg-secondary);
	}

	.t-code {
		font-family: var(--font-mono);
		font-size: 13px;
		color: var(--color-cyan-300);
		background: var(--glass-thin);
		border: 1px solid var(--border-subtle);
		padding: 1px 6px;
		border-radius: var(--radius-xs);
	}

	/* Subtle base for the page itself — applies font-smoothing + page bg */
	.t-page-base {
		font-family: var(--font-sans);
		font-size: var(--text-body);
		font-feature-settings: var(--font-open-type-features);
		font-variation-settings: var(--font-variation-axes);
		line-height: var(--leading-base);
		color: var(--fg-primary);
		background: var(--bg-page);
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
	}
}
/* =========================================================================
	ADDITIONS BELOW PORT THE KIT'S SITE.CSS COMPONENT CLASSES
	Source: docs/branding/design-system/ui_kits/marketing/site.css (frozen
	marketing kit, WS0 batch 1). Nunjucks partials in src/_includes/partials/
	reference these classes (.container, .status-pill, .eyebrow,
	.link-underline, .btn / .btn-chip / .btn-chip-cta). Future component work
	in Sprint 2/3 will add more (.btn-primary, .btn-amber, .glass card, etc.).

	The global-reset additions inside @layer base above lock in the brand
	baseline (background, font-smoothing, scroll-behavior) + the
	accessibility primitives (.skip-link, prefers-reduced-motion guard) every
	page inherits via base.njk.
========================================================================= */

@layer base {
	/* ─────────────────────────────────────────────────────────────────────
		GLOBAL RESETS + ACCESSIBILITY PRIMITIVES
		Ported from the kit's site.css reset block + extended with .skip-link
		and the prefers-reduced-motion guard for the brand's aurora / pulse
		animations. Tailwind v4's Preflight covers most of the reset surface;
		the overrides below lock in the brand-specific baseline.
	───────────────────────────────────────────────────────────────────── */

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

	html,
	body {
		margin: 0;
		padding: 0;
		background: var(--bg-page);
		color: var(--fg-primary);
		font-family: var(--font-sans);
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
		scroll-behavior: smooth;
	}

	img {
		display: block;
		max-width: 100%;
	}

	button {
		font-family: inherit;
		cursor: pointer;
	}

	/* Skip-link target — visually hidden until focused. First focusable
		element on every layout via base.njk; lets keyboard users jump
		straight to <main> without tabbing through nav links. */
	.skip-link {
		position: absolute;
		left: 12px;
		top: -40px;
		padding: 8px 14px;
		background: var(--color-cyan-300);
		color: var(--color-ink-1000);
		font-family: var(--font-mono);
		font-size: var(--text-body-sm);
		font-weight: 600;
		border-radius: var(--radius-sm);
		text-decoration: none;
		transition: top 220ms var(--ease-out);
		z-index: 100;
	}

	.skip-link:focus-visible {
		top: 12px;
		outline: 2px solid var(--color-cyan-300);
		outline-offset: 2px;
	}

	/* Honor reduced-motion users — kill the brand's aurora / pulse /
		 fade-up decorative motion + nav scroll-shrink transition. */
	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
		}
	}
}
/* =========================================================================
		#30 — SELF-HOSTED VARIABLE FONTS
		Inter (workhorse), Orbitron (display), JetBrains Mono (mono / overlines).
		Subset to latin + latin-1 supplement + common punctuation/symbols via
		outputs/subset-fonts.py (fontTools + brotli). WOFF2 sizes:
			- inter-variable.woff2          96KB   (was 854KB raw TTF)
			- orbitron-variable.woff2       14KB   (was  38KB)
			- jetbrains-mono-variable.woff2 41KB   (was 185KB)
		Total ~151KB for all three. `font-display: swap` avoids FOIT.

		Note on @font-face placement: these are NOT in @layer base because
		@layer rules around @font-face have a known specificity quirk —
		declarations outside any @layer have higher precedence than layered
		ones for font-face resolution. Top-level declarations match what
		modern frameworks (Vite, Next.js) emit + what browsers expect.
	========================================================================= */

@font-face {
	font-family: 'Inter';
	src: url('/assets/fonts/inter-variable.woff2') format('woff2-variations');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Orbitron';
	src: url('/assets/fonts/orbitron-variable.woff2') format('woff2-variations');
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'JetBrains Mono';
	src: url('/assets/fonts/jetbrains-mono-variable.woff2') format('woff2-variations');
	font-weight: 100 800;
	font-style: normal;
	font-display: swap;
}

/* =========================================================================
	#35 — EXTENDED TYPOGRAPHY + ACCESSIBILITY PRIMITIVES
	The earlier @layer base block (lines ~215-280) shipped the global reset
	+ .skip-link + reduced-motion guard. This block adds the remaining
	typography + a11y primitives the design-system + #35 acceptance call out:
	default heading + body text-wrap behavior, tabular-nums utility,
	visually-hidden / sr-only helper, focus-visible refinements with the
	brand glow, forced-colors mode support for Windows High Contrast.
	========================================================================= */

@layer base {
	/* Default body text-wrap — "pretty" prevents awkward orphans in
		paragraphs (browser-level support: 2024+, graceful fallback to no-wrap
		on older engines). Headings get text-wrap: balance via .t-hero/.t-h1
		typography classes earlier in this file; we also default base h1-h4
		tags to balance for any raw markdown content that doesn't apply
		the .t-* classes. */
	p {
		text-wrap: pretty;
	}

	h1,
	h2,
	h3,
	h4 {
		text-wrap: balance;
	}

	/* ─────────────────────────────────────────────────────────────────────
		ACCESSIBILITY UTILITIES
		───────────────────────────────────────────────────────────────────── */

	/* Visually hidden but accessible to screen readers. Standard pattern
		from a11y-project — clipped to a 1px square, position absolute, etc.
		Use for SR-only labels (e.g. "Open menu" on hamburger button when
		the button uses only an icon). */
	.visually-hidden,
	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border-width: 0;
	}

	/* Show on focus — useful for "Skip to main content" patterns where
		the link is otherwise visually hidden. Compose as
		`.visually-hidden.focusable` and the element reveals on keyboard
		focus. */
	.visually-hidden.focusable:focus,
	.visually-hidden.focusable:focus-visible {
		position: static;
		width: auto;
		height: auto;
		padding: inherit;
		margin: inherit;
		overflow: visible;
		clip: auto;
		white-space: inherit;
	}

	/* Tabular numerals — locks digit widths so columns of numbers align.
		 Use on case-study stats tables, footer copyright timestamps, etc. */
	.tabular-nums {
		font-variant-numeric: tabular-nums;
	}

	/* Default focus-visible refinement — design-system spec is
		cyan-300 outline + glow-cyan shadow. Applies to any focusable
		element that doesn't explicitly override (most don't). Tab through
		the page and every focusable element gets the cyan ring. */
	*:focus-visible {
		outline: 2px solid var(--color-cyan-300);
		outline-offset: 3px;
		border-radius: var(--radius-xs);
	}

	/* Forced-colors mode (Windows High Contrast) — keep focus rings
		visible even when the user has overridden the brand palette with
		their own contrast scheme. `Highlight` is the system-defined
		focus color in forced-colors. */
	@media (forced-colors: active) {
		*:focus-visible {
			outline: 3px solid Highlight;
			outline-offset: 3px;
		}
	}
}