/* GENERATED by node brand/check-drift.mjs --write in starhold-ops (STAR-166 R14). Do not edit.
   Sources: apps/storefront/src/app.css (@font-face + :root) and brand/fleet-base.css (wordmark + lockup).
   Copy this file byte for byte into a product repo, check it against brand/product-tokens.sha256,
   serve the fonts at /fonts/ and the brand/mark/ set at /mark/ (favicons at the web root).
   Markup: <a class="brand"><img class="mark" src="/mark/mark-64.png" srcset="/mark/mark-64.webp 1x, /mark/mark-128.webp 2x" width="36" height="36" alt="" aria-hidden="true"><span class="wordmark header"><span class="solid">Star</span><span class="outline">hold</span></span></a> */
@font-face {
	font-family: 'Michroma';
	src: url('/fonts/michroma-latin.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'IBM Plex Sans';
	src: url('/fonts/ibm-plex-sans-latin.woff2') format('woff2');
	font-weight: 100 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'IBM Plex Mono';
	src: url('/fonts/ibm-plex-mono-latin.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	/* ── surfaces + ink ───────────────────────────────────────────────── */
	--bg: #0b0d12;
	--bg-raised: #11141b;
	--surface: #14171f;
	--surface-2: #1b1f2a;
	--border: #2b303d;
	--border-strong: #3c4354;
	--text: #e6e9f0;
	--text-muted: #9aa3b5;

	/* ── brand accent ─────────────────────────────────────────────────────
	   Warm signal amber. Red is deliberately NOT a brand colour: a saturated
	   danger hue used decoratively collides with error semantics and reads
	   "hobby dashboard" on a near-black ground. Red survives below as --danger
	   and is used for exactly one thing — something went wrong.            */
	--accent: #ffb347;
	--accent-hover: #ffc770;
	--accent-2: #ff9d3d; /* gradient end for primary buttons; ink on it stays >=4.5 */
	--accent-ink: #14100a;
	--accent-quiet: #2b2216;

	/* ── semantic status only, never decorative ───────────────────────── */
	--danger: #ff6b6b;
	--ok: #6fdf9a;

	/* ── focus ────────────────────────────────────────────────────────── */
	--focus: #9ecbff;

	/* ── radii ────────────────────────────────────────────────────────── */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--radius-pill: 999px;

	/* ── elevation + icons (capability tiles, terminal cards) ─────────── */
	--shadow-soft: 0 1px 2px rgb(0 0 0 / 0.35), 0 8px 24px rgb(0 0 0 / 0.25);
	--shadow-lift: 0 2px 4px rgb(0 0 0 / 0.4), 0 16px 40px rgb(0 0 0 / 0.4);
	--lift: -4px; /* hover rise, applied as translateY */
	--icon: 24px;
	--glow: rgb(255 179 71 / 0.16); /* amber halo behind the closing band */
	--glow-edge: rgb(255 179 71 / 0.35);
	--chip: 48px; /* square icon chip around a 24px icon */

	/* ── type scale: 8 steps, consecutive ratios 1.12–1.29 ────────────── */
	--fs-0: 12px;
	--fs-1: 14px;
	--fs-2: 16px;
	--fs-3: 18px;
	--fs-4: 22px;
	--fs-5: 28px;
	--fs-6: 36px;
	--fs-7: 46px;
	/* hero wordmark only; fluid, deliberately outside the --fs-N ladder (A1.2).
	   "Starhold" in Michroma is ~5.46em wide, so the 56px floor needs a 354px
	   viewport (306px of text + 2 x 24px gutters) and clipped below that. The
	   min() caps the size at what fits: (100vw - 48px) / 5.6. At >= 354px the
	   clamp() is the smaller term, so phones from 360px up and every desktop
	   render exactly as before (STAR-28). */
	--fs-display: min(clamp(56px, 10vw, 112px), calc((100vw - 48px) / 5.6));
	/* outline weight for the hollow "hold" in the wordmark */
	--stroke-w: 1.5px;

	/* ── spacing: 9 steps on a 4px base ───────────────────────────────── */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 24px;
	--sp-6: 32px;
	--sp-7: 48px;
	--sp-8: 64px;
	--sp-9: 96px;

	/* ── layout ───────────────────────────────────────────────────────── */
	--measure: 68ch; /* prose line length — about 68 characters */
	--page: 1080px;
	--header-h: 60px;

	/* ── panel geometry (STAR-166 R6/R8): hull-plate chamfer, orbit-rule ticks ── */
	/* Top-right corner cut on every panel (STAR-166 F7): 14 px from 900 px up, 10 px
	   below. A step function, not a media query, because :root is copied verbatim
	   into fleet-tokens.css and only its first block travels: the calc() is huge and
	   negative under 900 px and huge and positive from 900 px, so clamp() picks an end. */
	--chamfer: clamp(10px, (100vw - 899.5px) * 1000, 14px);
	--chamfer-sm: 10px; /* the same cut on phones (<= 520 px) */
	--chip-cut: 5px; /* the smaller cut on chips and secondary buttons (F4) */
	--tick: 24px; /* orbit-rule tick pitch */
	--tick-sm: 16px; /* orbit-rule tick pitch on phones */

	/* ── type stacks: self-hosted Plex first, system after. No third-party
	   font request is made, because "self-hosted" is part of what is being
	   sold. ─────────────────────────────────────────────────────────────── */
	--font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
		Roboto, 'Helvetica Neue', Arial, sans-serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, 'Cascadia Mono', Menlo,
		Consolas, monospace;
	/* Brand face: wordmark only. Falls back to the system sans if it fails. */
	--font-display: 'Michroma', var(--font-sans);
	--font-serif: ui-serif, Georgia, 'Times New Roman', serif;
}

/* ═══ wordmark: solid "Star", hollow "hold", always store amber ═══════════ */
.wordmark {
	/* --font-display is referenced only on .wordmark (R13, check 5). */
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
}
.wordmark.header {
	font-size: var(--fs-2);
	letter-spacing: 0.02em;
}
.wordmark.hero {
	display: block;
	font-size: var(--fs-display);
	letter-spacing: -0.01em;
}
.wordmark .solid {
	color: var(--text);
}
/* STAR-166 R12: the hollow half sits tighter, so "Starhold" reads as one word
   at 390 px rather than "Star hold". */
.wordmark .outline {
	letter-spacing: -0.02em;
	margin-left: -0.03em;
}
/* Fallback first: without text-stroke, "hold" is plain amber, never invisible. */
.wordmark .outline {
	color: var(--accent);
}
@supports (-webkit-text-stroke: 1px currentColor) {
	.wordmark .outline {
		color: transparent;
		/* STAR-166 R12: about 15 % lighter than --stroke-w, no glow. */
		-webkit-text-stroke: calc(var(--stroke-w) * 0.85) var(--accent);
	}
	/* STAR-166 F7: one extra pixel on the big hero word from 1200 px up. */
	@media (min-width: 1200px) {
		.wordmark.hero .outline {
			-webkit-text-stroke-width: calc(var(--stroke-w) * 0.85 + 1px);
		}
	}
}

/* ═══ brand lockup: PNG mark + header wordmark ════════════════════════════ */
.brand {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	flex-shrink: 0;
	font-weight: 700;
	font-size: var(--fs-3);
	color: var(--text);
	letter-spacing: -0.01em;
	text-decoration: none;
}
.brand:hover {
	color: var(--text);
	text-decoration: none;
}
/* The mark: <img> of the operator's PNG (brand/mark/, served at /mark/), STAR-166. The square has
   transparent padding beside the narrow gauntlet; the negative inline margins take it back so the
   gap to the wordmark stays the lockup gap. */
.brand .mark {
	display: block;
	width: 2em;
	height: 2em;
	margin-inline: -0.3em -0.35em;
	flex-shrink: 0;
}