/*
 * Koelet3D Design System — canonical tokens & base styles
 * Source of truth. Distilled from assets/Koelet3D Design System _standalone_.html.
 * Paste into web/public/index.html and workers/gallery/public/index.html.
 */

/* ----- Fonts (load via Google Fonts CDN, not @font-face) ----- */
/*
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Jura:wght@300;400;500;600;700&display=swap">
*/

:root {
	/* ----- Color (dark — canonical) ----- */
	--bg: #141823;
	--surface: #1D2230;
	--divider: #2A2F40;
	--logo-ink: #272C3D;
	--fg: #EDEEF2;
	--fg-soft: #B4B8C5;
	--fg-mute: #797F92;
	--accent: #e8552a;
	--accent-ink: #FFFFFF;

	/* ----- Radius ----- */
	--r-xs: 4px;
	--r-sm: 8px;
	--r-md: 12px;
	--r-lg: 18px;
	--r-pill: 999px;

	/* ----- Spacing (8px baseline) ----- */
	--space-2xs: 4px;
	--space-xs: 8px;
	--space-sm: 14px;
	--space-md: 24px;
	--space-lg: 40px;
	--space-xl: 64px;
	--space-2xl: 96px;
	--space-3xl: 140px;

	/* ----- Motion ----- */
	--ease-standard: cubic-bezier(.2, .7, .2, 1);
	--ease-hover: ease-in-out;
	--dur-standard: 400ms;
	--dur-hover: 200ms;

	/* ----- Layout ----- */
	--container-max: 1400px;
	--gutter-desktop: 40px;
	--gutter-mobile: 20px;
}

html[data-theme='light'] {
	--bg: #FAFAF8;
	--surface: #F2F1EE;
	--divider: #E6E5E1;
	--fg: #272C3D;
	--fg-soft: #4B5575;
	--fg-mute: #8A8F9E;
	/* --accent stays #747FCD across themes */
}

/* ----- Reset ----- */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html,
body {
	background: var(--bg);
	color: var(--fg);
}

body {
	font-family: 'Jura', ui-sans-serif, system-ui, -apple-system, sans-serif;
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	transition: background-color var(--dur-standard) var(--ease-standard),
		color var(--dur-standard) var(--ease-standard);
}

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

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

/* ----- Typography utilities ----- */
.d1 {
	font-family: 'Jura', sans-serif;
	font-weight: 700;
	font-size: 88px;
	line-height: 0.95;
	letter-spacing: -0.03em;
}

.d2 {
	font-family: 'Jura', sans-serif;
	font-weight: 700;
	font-size: 56px;
	line-height: 1.0;
	letter-spacing: -0.025em;
}

.h1 {
	font-family: 'Jura', sans-serif;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.h2 {
	font-family: 'Jura', sans-serif;
	font-weight: 600;
	font-size: 22px;
	line-height: 1.25;
}

.body {
	font-size: 16px;
	line-height: 1.65;
	color: var(--fg-soft);
}

.caption {
	font-size: 11px;
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--fg-mute);
}

.label {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--fg-mute);
}

.numeric {
	font-weight: 600;
	font-size: 14px;
	line-height: 1.0;
	letter-spacing: 0.04em;
	font-feature-settings: 'tnum' 1;
}

/* ----- Layout utilities ----- */
.container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--gutter-desktop);
}

@media (max-width: 720px) {
	.container {
		padding: 0 var(--gutter-mobile);
	}
}

/* ----- Components: Button ----- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	border-radius: var(--r-pill);
	font-family: 'Jura', sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	cursor: pointer;
	border: 1px solid transparent;
	transition:
		background var(--dur-hover) var(--ease-hover),
		color var(--dur-hover) var(--ease-hover),
		border-color var(--dur-hover) var(--ease-hover),
		transform var(--dur-hover) var(--ease-hover);
}

.btn.primary {
	background: var(--accent);
	color: var(--accent-ink);
}
.btn.primary:hover {
	background: var(--fg);
	color: var(--logo-ink);
}

.btn.outline {
	background: transparent;
	color: var(--accent);
	border-color: var(--accent);
}
.btn.outline:hover {
	background: var(--accent);
	color: var(--accent-ink);
}

.btn.ghost {
	background: transparent;
	color: var(--fg);
}
.btn.ghost:hover {
	color: var(--accent);
}

.btn.disabled {
	background: var(--surface);
	color: var(--fg-mute);
	border-color: var(--divider);
	cursor: not-allowed;
}

/* ----- Components: Arrow button (carousel) ----- */
.arrowBtn {
	width: 56px;
	height: 56px;
	border-radius: var(--r-pill);
	border: 1.5px solid var(--accent);
	background: transparent;
	color: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition:
		background var(--dur-hover) var(--ease-hover),
		color var(--dur-hover) var(--ease-hover),
		border-color var(--dur-hover) var(--ease-hover),
		transform var(--dur-hover) var(--ease-hover);
}
.arrowBtn:hover {
	background: var(--fg);
	color: var(--logo-ink);
	border-color: var(--fg);
	transform: scale(1.06);
}

/* ----- Components: Pill / tag ----- */
.pill {
	display: inline-block;
	padding: 5px 12px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	border-radius: var(--r-pill);
	border: 1px solid var(--divider);
	color: var(--fg-soft);
}
.pill.solid {
	background: var(--accent);
	color: var(--accent-ink);
	border-color: var(--accent);
}
.pill.muted {
	background: var(--surface);
	color: var(--fg-mute);
}

/* ----- Components: Card surfaces ----- */
.card {
	border: 1px solid var(--divider);
	background: var(--surface);
	border-radius: var(--r-md);
	padding: 28px;
}

.card-outline {
	border: 1px solid var(--divider);
	background: transparent;
	border-radius: var(--r-md);
	padding: 22px;
}

/* ----- Components: Tier card (featured) ----- */
.tier-card {
	position: relative;
	max-width: 360px;
	border: 1px solid var(--accent);
	background: var(--surface); /* fallback */
	background: color-mix(in oklab, var(--accent) 8%, var(--bg));
	border-radius: var(--r-md);
	padding: 26px;
}
.tier-card .pop {
	position: absolute;
	top: -12px;
	left: 18px;
	background: var(--accent);
	color: var(--accent-ink);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: var(--r-pill);
}
.tier-card h3 {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 8px 0 22px;
}
.tier-card .price {
	font-size: 44px;
	font-weight: 700;
	letter-spacing: -0.04em;
}
.tier-card .perm {
	font-size: 13px;
	color: var(--fg-mute);
	margin-left: 4px;
}
.tier-card ul {
	list-style: none;
	margin: 22px 0 0;
}
.tier-card li {
	display: flex;
	gap: 10px;
	font-size: 13.5px;
	margin-top: 10px;
}
.tier-card li::before {
	content: '';
	width: 6px;
	height: 6px;
	margin-top: 8px;
	border-radius: var(--r-pill);
	background: var(--accent);
	flex-shrink: 0;
}

/* ----- Components: Nav header ----- */
.nav-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 24px;
	border: 1px solid var(--divider);
	background: var(--bg);
	border-radius: var(--r-md);
}
.nav-header .logo-mark {
	width: 32px;
	height: 32px;
	padding: 3px;
	background: var(--surface);
	border-radius: var(--r-sm);
}
.nav-header a {
	color: var(--fg-soft);
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding-bottom: 4px;
	border-bottom: 1px solid transparent;
	transition: color var(--dur-hover) var(--ease-hover),
		border-color var(--dur-hover) var(--ease-hover);
}
.nav-header a.active,
.nav-header a:hover {
	color: var(--accent);
	border-color: var(--accent);
}

/* ----- Section spacing ----- */
.section {
	padding: var(--space-2xl) 0;
}
@media (max-width: 720px) {
	.section {
		padding: var(--space-xl) 0;
	}
}

/* ----- Fade-up scroll-in (for IntersectionObserver) ----- */
.fade-up {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.9s var(--ease-standard),
		transform 0.9s var(--ease-standard);
}
.fade-up.in {
	opacity: 1;
	transform: none;
}