/* Skulltag design tokens
 *
 * Single source of truth for color, typography and layout primitives.
 * Extracted from the V2 mockups. Differences from the mockup:
 *   - 16.5px body drift collapsed to 16px (per the plan).
 *   - Google Fonts removed; fonts are self-hosted as WOFF2 (see @font-face).
 */

@font-face {
	font-family: 'Chakra Petch';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/chakra-petch.woff2') format('woff2');
}
@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/barlow.woff2') format('woff2');
}
@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/jetbrains-mono.woff2') format('woff2');
}

:root {
	--bg:        oklch(0.155 0.012 55);
	--bg-2:      oklch(0.185 0.013 52);
	--panel:     oklch(0.215 0.014 52);
	--panel-2:   oklch(0.245 0.015 50);
	--line:      oklch(0.32 0.018 50);
	--line-soft: oklch(0.28 0.016 52);
	--ink:       oklch(0.93 0.012 80);
	--ink-2:     oklch(0.74 0.016 70);
	--ink-3:     oklch(0.58 0.018 65);
	--rust:      oklch(0.635 0.175 45);
	--rust-hi:   oklch(0.72 0.18 52);
	--rust-deep: oklch(0.48 0.13 42);
	--steel:     oklch(0.74 0.06 215);
	--ok:        oklch(0.72 0.15 150);
	--warn:      oklch(0.78 0.15 85);

	--r:      4px;
	--maxw:   1240px;
	--hdr:    64px;
	--shadow: 0 18px 50px -22px rgba(0,0,0,.85);

	--font-d: 'Chakra Petch', sans-serif;
	--font-b: 'Barlow', sans-serif;
	--font-m: 'JetBrains Mono', monospace;
}

*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-b);
	font-size: 16px;
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: .4;
	background:
		radial-gradient(120% 80% at 50% -10%, oklch(0.22 0.03 45 / .5), transparent 60%),
		repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 2px, transparent 2px 4px);
	mix-blend-mode: overlay;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; }
a     { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
	font-family: var(--font-d);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.01em;
}

.mono { font-family: var(--font-m); }

.ilink {
	color: var(--rust-hi);
	border-bottom: 1px solid oklch(0.72 0.18 52 / .35);
	transition: border-color .15s;
}
.ilink:hover { border-color: var(--rust-hi); }

.kicker {
	font-family: var(--font-m);
	font-size: 12px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--rust);
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 500;
}
.kicker::before { content: ""; width: 22px; height: 2px; background: var(--rust); }

.btn {
	font-family: var(--font-d);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .02em;
	padding: 9px 18px;
	border-radius: var(--r);
	cursor: pointer;
	border: 1px solid transparent;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	transition: transform .12s, box-shadow .15s, background .15s;
	white-space: nowrap;
}
.btn-primary {
	background: linear-gradient(160deg, var(--rust-hi), var(--rust));
	color: #1a0f08;
	box-shadow: 0 6px 18px -8px var(--rust);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -8px var(--rust); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--rust); color: var(--rust-hi); }
.btn .arr { transition: transform .15s; }
.btn:hover .arr { transform: translateX(3px); }