@import "tailwindcss";

/*
 * Brand theme tokens, in OKLCH. Exposed to Tailwind v4 via the @theme
 * block, so utility classes like `bg-brand`, `text-brand`, `text-fg`,
 * `bg-bg`, `bg-raised`, `text-muted` are generated at build time.
 *
 * Hue 148° is the brand green — we carry a tiny amount of it through
 * the dark neutrals so the palette feels cohesive without reading as
 * "green-tinted". Pure black/white never appears in nature and is the
 * #1 signal of a rushed dark theme. Chroma 0.012 is barely visible but
 * subconsciously ties everything together.
 *
 * The brand token itself keeps full chroma — it's used for *moments*
 * (pulsing cursor, status dots, the one accent that matters), never
 * for large fills. Large soft tints (bg-brand/5, border-brand/30) ride
 * on top of the tinted neutrals, which already carry a hint of green.
 */
@theme {
	--color-bg: oklch(0.13 0.012 148);
	--color-bg-raised: oklch(0.17 0.012 148);
	--color-fg: oklch(0.96 0.01 148);
	--color-muted: oklch(0.62 0.01 148);
	--color-brand: oklch(0.83 0.24 148);
}

:root {
	--background: var(--color-bg);
	--foreground: var(--color-fg);
	--accent: var(--color-brand);
	--muted: oklch(0.62 0.01 148 / 1);
	--border: oklch(1 0 0 / 0.1);
}

body {
	background: var(--background);
	color: var(--foreground);
}

/* Monospace code blocks */
code,
pre {
	font-family: "JetBrains Mono", "Fira Code", "SF Mono", monospace;
}

/*
 * Terminal-cursor blink used by <TerminalSpinner>. Defined at the root
 * stylesheet level so Tailwind v4's JIT can pick it up in arbitrary
 * keyframe utilities. 50/50 duty cycle to feel like a real cursor.
 */
@keyframes terminal-blink {
	0%, 49% {
		opacity: 1;
	}
	50%, 100% {
		opacity: 0;
	}
}

/*
 * One-shot staggered page reveal used by the Analytics page. Each
 * `.reveal-N` child starts a 12px below its final position, 80ms
 * after the previous one, and eases into place with ease-out-quart
 * (exponential deceleration — real objects decelerate smoothly; no
 * bounce/elastic, which feel dated per the motion guidelines).
 *
 * Wrapped in prefers-reduced-motion so keyboard/vestibular users see
 * the final layout instantly.
 */
@media (prefers-reduced-motion: no-preference) {
	.analytics-reveal [class*="reveal-"] {
		opacity: 0;
		transform: translateY(12px);
		animation: analytics-reveal-in 500ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
	}
	.analytics-reveal .reveal-1 { animation-delay: 0ms; }
	.analytics-reveal .reveal-2 { animation-delay: 80ms; }
	.analytics-reveal .reveal-3 { animation-delay: 140ms; }
	.analytics-reveal .reveal-4 { animation-delay: 200ms; }
	.analytics-reveal .reveal-5 { animation-delay: 260ms; }
	.analytics-reveal .reveal-6 { animation-delay: 320ms; }
}

@keyframes analytics-reveal-in {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Scrollbar styling */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.15);
	border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.25);
}
