/**
 * SkyPress design system (SP6 — see docs/brand/brand-identity.md).
 * "The open sky meets the typesetter's bench" — editorial letterpress + open air.
 * Self-hosted, freely-licensed fonts; light + dark first-class.
 */
@import '@fontsource/ibm-plex-mono/400.css';
@import '@fontsource/ibm-plex-mono/500.css';

/* Overused Grotesk — self-hosted variable font (OFL-1.1, see public/fonts/). */
@font-face {
	font-family: 'Overused Grotesk';
	src:
		url('/fonts/OverusedGrotesk-VF.woff2') format('woff2-variations'),
		url('/fonts/OverusedGrotesk-VF.woff') format('woff-variations');
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Type — one grotesk for display + body, mono for labels/code */
	--font-display: 'Overused Grotesk', system-ui, sans-serif;
	--font-body: 'Overused Grotesk', system-ui, sans-serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

	/* Palette — light (warm paper, ink, altitude blue) */
	--paper: #faf6ef;
	--paper-raised: #fffdf9;
	--panel: #f1eadc;
	--ink: #1c1a16;
	--ink-soft: #46413a;
	--muted: #756d5f;
	--line: #e5ddcd;
	--line-strong: #d8cdb8;
	--sun: #e8920c;
	--sun-strong: #b85c12;
	--sun-tint: #fbe6cc;
	/* Filled-button background: a deeper sun that clears WCAG AA (≥4.5:1) with
	   white text. Bare --sun is too light for white text (~2.5:1). */
	--btn-primary: #b85c12;
	--btn-primary-hover: #9a4c0f;
	--btn-primary-fg: #fff;
	--ember: #bb5a36; /* rare warm accent (the ink/press counterweight) */

	--radius: 12px;
	--radius-sm: 8px;
	--shadow: 0 1px 2px rgba(28, 26, 22, 0.06), 0 10px 30px -12px rgba(28, 26, 22, 0.18);
	--measure: 66ch;
}

@media (prefers-color-scheme: dark) {
	:root {
		--paper: #111319;
		--paper-raised: #181b23;
		--panel: #1b1f2a;
		--ink: #ece6da;
		--ink-soft: #c3bcad;
		--muted: #938b7d;
		--line: #292d39;
		--line-strong: #353a49;
		--sun: #f4b13f;
		--sun-strong: #f7c97a;
		--sun-tint: #2a1f12;
		/* Dark mode's accents are light, so white text still needs a deeper fill. */
		--btn-primary: #aa6010;
		--btn-primary-hover: #964f0c;
		--btn-primary-fg: #fff;
		--ember: #e08a63;
		--shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 40px -16px rgba(0, 0, 0, 0.6);
	}
}

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

html {
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	color-scheme: light dark;
}

body {
	margin: 0;
	min-height: 100vh;
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 640;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--ink);
}

a {
	color: var(--sun);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}
a:hover {
	color: var(--sun-strong);
}

::selection {
	background: var(--sun-tint);
}

/* Mono "eyebrow" / kicker — the indie-press label voice */
.eyebrow {
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--muted);
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.92rem;
	letter-spacing: 0;
	padding: 0.55rem 1.15rem;
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.btn:active {
	transform: translateY(1px);
}
.btn--primary {
	background: var(--btn-primary);
	color: var(--btn-primary-fg);
}
.btn--primary:hover {
	background: var(--btn-primary-hover);
	color: var(--btn-primary-fg);
}
.btn--ghost {
	background: var(--paper-raised);
	color: var(--ink);
	border-color: var(--line-strong);
}
.btn--ghost:hover {
	border-color: var(--sun);
	color: var(--sun);
}
.btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Sky atmosphere: a soft horizon gradient for hero/empty surfaces */
.sun-wash {
	background:
		radial-gradient(120% 80% at 50% -20%, var(--sun-tint) 0%, transparent 60%),
		var(--paper);
}
