/* ─── Color system ───────────────────────────────────────────────────────
       Mirrors exactly what @plugin "tailwind-hue-theme" injects into Tailwind.
       Change --brand-h (0–360) and every color below shifts automatically.  */
		:root {
			--brand-h: 250;

			/* Slate — very low chroma, tinted dark backgrounds */
			--color-slate-50: oklch(98% 0.004 var(--brand-h));
			--color-slate-100: oklch(94% 0.006 var(--brand-h));
			--color-slate-200: oklch(88% 0.008 var(--brand-h));
			--color-slate-300: oklch(80% 0.012 var(--brand-h));
			--color-slate-400: oklch(70% 0.016 var(--brand-h));
			--color-slate-500: oklch(58% 0.020 var(--brand-h));
			--color-slate-600: oklch(48% 0.022 var(--brand-h));
			--color-slate-700: oklch(38% 0.026 var(--brand-h));
			--color-slate-800: oklch(28% 0.030 var(--brand-h));
			--color-slate-900: oklch(20% 0.032 var(--brand-h));
			--color-slate-950: oklch(13% 0.036 var(--brand-h));

			/* Brand / Indigo — mid-high chroma, follows --brand-h directly */
			--color-indigo-50: oklch(97% 0.03 var(--brand-h));
			--color-indigo-100: oklch(94% 0.06 var(--brand-h));
			--color-indigo-200: oklch(88% 0.09 var(--brand-h));
			--color-indigo-300: oklch(80% 0.12 var(--brand-h));
			--color-indigo-400: oklch(70% 0.14 var(--brand-h));
			--color-indigo-500: oklch(60% 0.16 var(--brand-h));
			--color-indigo-600: oklch(50% 0.17 var(--brand-h));
			--color-indigo-700: oklch(42% 0.18 var(--brand-h));
			--color-indigo-800: oklch(34% 0.18 var(--brand-h));
			--color-indigo-900: oklch(26% 0.17 var(--brand-h));
			--color-indigo-950: oklch(18% 0.14 var(--brand-h));

			/* Cyan / Secondary — same chroma, offset +40° for a complementary tone */
			--color-cyan-50: oklch(97% 0.03 calc(var(--brand-h) + 40));
			--color-cyan-100: oklch(94% 0.06 calc(var(--brand-h) + 40));
			--color-cyan-200: oklch(88% 0.09 calc(var(--brand-h) + 40));
			--color-cyan-300: oklch(80% 0.12 calc(var(--brand-h) + 40));
			--color-cyan-400: oklch(70% 0.14 calc(var(--brand-h) + 40));
			--color-cyan-500: oklch(60% 0.16 calc(var(--brand-h) + 40));
			--color-cyan-600: oklch(50% 0.17 calc(var(--brand-h) + 40));
			--color-cyan-700: oklch(42% 0.18 calc(var(--brand-h) + 40));
			--color-cyan-800: oklch(34% 0.18 calc(var(--brand-h) + 40));
			--color-cyan-900: oklch(26% 0.17 calc(var(--brand-h) + 40));
			--color-cyan-950: oklch(18% 0.14 calc(var(--brand-h) + 40));
		}

		/* ─── Reset & base ─────────────────────────────────────────────────────── */
		*,
		*::before,
		*::after {
			box-sizing: border-box;
			margin: 0;
			padding: 0;
		}

		html {
			color-scheme: dark;
		}

		body {
			font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
			background: var(--color-slate-950);
			color: var(--color-slate-200);
			min-height: 100vh;
			padding: 2rem 1rem 6rem;
			transition: background 0.4s ease, color 0.4s ease;
		}

		/* ─── Layout ────────────────────────────────────────────────────────────── */
		.page {
			max-width: 56rem;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			gap: 2rem;
		}

		/* ─── Card ──────────────────────────────────────────────────────────────── */
		.card {
			background: oklch(from var(--color-slate-900) l c h / 0.7);
			background: color-mix(in oklch, var(--color-slate-900) 70%, transparent);
			border: 1px solid oklch(from var(--color-slate-700) l c h / 0.5);
			border: 1px solid color-mix(in oklch, var(--color-slate-700) 50%, transparent);
			border-radius: 1.25rem;
			padding: 1.75rem;
			backdrop-filter: blur(12px);
			/* fallback for browsers without color-mix */
			background: var(--color-slate-900);
			border-color: var(--color-slate-700);
		}

		/* ─── Hero ──────────────────────────────────────────────────────────────── */
		.hero {
			display: flex;
			flex-direction: column;
			gap: 1rem;
			padding: 2.5rem 1.75rem;
		}

		.badge {
			display: inline-flex;
			align-items: center;
			gap: 0.375rem;
			padding: 0.25rem 0.75rem;
			border-radius: 9999px;
			font-size: 0.7rem;
			font-weight: 700;
			letter-spacing: 0.08em;
			text-transform: uppercase;
			background: color-mix(in oklch, var(--color-indigo-500) 20%, transparent);
			color: var(--color-indigo-300);
			border: 1px solid color-mix(in oklch, var(--color-indigo-500) 30%, transparent);
			width: fit-content;
			/* fallback */
			background: var(--color-indigo-900);
			border-color: var(--color-indigo-700);
		}

		.hero h1 {
			font-size: clamp(2rem, 5vw, 3rem);
			font-weight: 800;
			letter-spacing: -0.02em;
			line-height: 1.1;
			color: var(--color-slate-50);
		}

		.hero h1 span.accent {
			background: linear-gradient(135deg, var(--color-indigo-400), var(--color-cyan-400));
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.hero p {
			font-size: 1.0625rem;
			color: var(--color-slate-400);
			line-height: 1.7;
			max-width: 42rem;
		}

		.hero-actions {
			display: flex;
			flex-wrap: wrap;
			gap: 0.75rem;
			padding-top: 0.5rem;
		}

		/* ─── Buttons ───────────────────────────────────────────────────────────── */
		.btn {
			display: inline-flex;
			align-items: center;
			gap: 0.5rem;
			padding: 0.625rem 1.25rem;
			border-radius: 0.75rem;
			font-size: 0.875rem;
			font-weight: 500;
			cursor: pointer;
			border: none;
			transition: opacity 0.15s, transform 0.1s;
			text-decoration: none;
		}

		.btn:hover {
			opacity: 0.85;
			transform: translateY(-1px);
		}

		.btn:active {
			transform: none;
		}

		.btn-primary {
			background: var(--color-indigo-500);
			color: #fff;
		}

		.btn-secondary {
			background: var(--color-slate-800);
			color: var(--color-slate-200);
			border: 1px solid var(--color-slate-700);
		}

		/* ─── Section title ─────────────────────────────────────────────────────── */
		.section-title {
			font-size: 1.25rem;
			font-weight: 700;
			color: var(--color-slate-100);
			margin-bottom: 1rem;
		}

		.section-sub {
			font-size: 0.875rem;
			color: var(--color-slate-500);
			margin-top: -0.75rem;
			margin-bottom: 1rem;
		}

		/* ─── Swatch grid ───────────────────────────────────────────────────────── */
		.swatch-group {
			display: flex;
			flex-direction: column;
			gap: 1.25rem;
		}

		.swatch-row {
			display: flex;
			flex-direction: column;
			gap: 0.375rem;
		}

		.swatch-label {
			font-size: 0.75rem;
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: 0.07em;
			color: var(--color-slate-500);
		}

		.swatch-strip {
			display: grid;
			grid-template-columns: repeat(11, 1fr);
			gap: 0.25rem;
			border-radius: 0.625rem;
			overflow: hidden;
		}

		.swatch {
			height: 2.5rem;
			border-radius: 0;
			transition: transform 0.15s;
			cursor: default;
		}

		.swatch:first-child {
			border-radius: 0.5rem 0 0 0.5rem;
		}

		.swatch:last-child {
			border-radius: 0 0.5rem 0.5rem 0;
		}

		/* ─── UI components demo ────────────────────────────────────────────────── */
		.components-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 1rem;
		}

		@media (max-width: 40rem) {
			.components-grid {
				grid-template-columns: 1fr;
			}

			.swatch-strip {
				grid-template-columns: repeat(11, 1fr);
			}
		}

		.component-card {
			background: var(--color-slate-900);
			border: 1px solid var(--color-slate-700);
			border-radius: 1rem;
			padding: 1.25rem;
			display: flex;
			flex-direction: column;
			gap: 0.875rem;
		}

		.component-card h3 {
			font-size: 0.8125rem;
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: 0.07em;
			color: var(--color-slate-500);
		}

		/* Alert */
		.alert {
			display: flex;
			align-items: flex-start;
			gap: 0.75rem;
			padding: 0.875rem 1rem;
			border-radius: 0.75rem;
			font-size: 0.875rem;
			line-height: 1.5;
		}

		.alert-info {
			background: color-mix(in oklch, var(--color-indigo-500) 12%, transparent);
			border: 1px solid color-mix(in oklch, var(--color-indigo-500) 25%, transparent);
			color: var(--color-indigo-200);
			/* fallback */
			background: var(--color-indigo-950);
			border-color: var(--color-indigo-800);
		}

		.alert-accent {
			background: color-mix(in oklch, var(--color-cyan-500) 12%, transparent);
			border: 1px solid color-mix(in oklch, var(--color-cyan-500) 25%, transparent);
			color: var(--color-cyan-200);
			background: var(--color-cyan-950);
			border-color: var(--color-cyan-800);
		}

		.alert-icon {
			width: 1.25rem;
			height: 1.25rem;
			flex-shrink: 0;
			margin-top: 0.05rem;
		}

		/* Input */
		.input-group {
			display: flex;
			flex-direction: column;
			gap: 0.375rem;
		}

		.input-group label {
			font-size: 0.8125rem;
			font-weight: 500;
			color: var(--color-slate-300);
		}

		.input-group input {
			background: var(--color-slate-800);
			border: 1px solid var(--color-slate-600);
			border-radius: 0.5rem;
			padding: 0.5rem 0.75rem;
			color: var(--color-slate-200);
			font-size: 0.875rem;
			font-family: inherit;
			outline: none;
			transition: border-color 0.15s, box-shadow 0.15s;
			width: 100%;
		}

		.input-group input:focus {
			border-color: var(--color-indigo-500);
			box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-indigo-500) 25%, transparent);
			box-shadow: 0 0 0 3px var(--color-indigo-900);
		}

		/* Tags */
		.tag-group {
			display: flex;
			flex-wrap: wrap;
			gap: 0.375rem;
		}

		.tag {
			display: inline-flex;
			align-items: center;
			padding: 0.25rem 0.625rem;
			border-radius: 0.375rem;
			font-size: 0.75rem;
			font-weight: 500;
		}

		.tag-solid {
			background: var(--color-indigo-600);
			color: var(--color-indigo-100);
		}

		.tag-outline {
			background: transparent;
			border: 1px solid var(--color-indigo-600);
			color: var(--color-indigo-300);
		}

		.tag-muted {
			background: var(--color-slate-800);
			color: var(--color-slate-400);
			border: 1px solid var(--color-slate-700);
		}

		.tag-secondary {
			background: var(--color-cyan-800);
			color: var(--color-cyan-200);
		}

		/* Progress bar */
		.progress-wrap {
			display: flex;
			flex-direction: column;
			gap: 0.625rem;
		}

		.progress-item {
			display: flex;
			flex-direction: column;
			gap: 0.25rem;
		}

		.progress-meta {
			display: flex;
			justify-content: space-between;
			font-size: 0.75rem;
		}

		.progress-meta span:first-child {
			color: var(--color-slate-300);
		}

		.progress-meta span:last-child {
			color: var(--color-slate-500);
		}

		.progress-track {
			height: 0.5rem;
			background: var(--color-slate-800);
			border-radius: 9999px;
			overflow: hidden;
		}

		.progress-fill {
			height: 100%;
			border-radius: 9999px;
			background: linear-gradient(90deg, var(--color-indigo-500), var(--color-cyan-400));
			transition: width 0.4s ease;
		}

		/* ─── Code block ────────────────────────────────────────────────────────── */
		.code-block {
			background: var(--color-slate-950);
			border: 1px solid var(--color-slate-800);
			border-radius: 0.75rem;
			padding: 1.25rem;
			overflow-x: auto;
			font-size: 0.8125rem;
			line-height: 1.8;
		}

		.code-block code {
			font-family: "SF Mono", "Fira Code", "Cascadia Code", Menlo, monospace;
			color: var(--color-slate-300);
		}

		.tok-comment {
			color: var(--color-slate-500);
		}

		.tok-kw {
			color: var(--color-indigo-400);
		}

		.tok-fn {
			color: var(--color-cyan-300);
		}

		.tok-str {
			color: oklch(73% 0.15 calc(var(--brand-h) + 80));
		}

		.tok-num {
			color: var(--color-cyan-400);
		}

		.tok-prop {
			color: var(--color-slate-300);
		}