/*
 * Custom CSS for what Tailwind utilities can't express, plus the colour tokens
 * the Tailwind theme resolves against (see assets/js/tailwind-config.js).
 *
 * The site is dark. There is one palette and no switch.
 *
 * Every entry is an "R G B" triple rather than a hex value so Tailwind can wrap
 * it as rgb(var(--c-x) / <alpha-value>) and opacity modifiers keep working.
 * Colours live here rather than in the Tailwind config so the whole palette can
 * be retuned in one file — including the markup site.js and hunt-admin.js build
 * at runtime, which never mentions a colour of its own.
 *
 * The names are inherited from the original light theme and describe ROLE, not
 * literal colour: `snow` is the card surface, `ink` is body text, `cloud` is the
 * recessed surface. Read them that way — `snow` is near-black here.
 */

:root {
	/* Tells the browser to paint native widgets (scrollbars, number spinners,
	   checkboxes, autofill) dark. Without it they render light and stand out. */
	color-scheme: dark;

	/* Violet is lifted two steps from the original #6161ff: that value is too
	   low-contrast against a near-black canvas to carry the action colour. */
	--c-brand: 129 129 255;
	--c-brandhi: 154 154 255;
	--c-ultra: 185 140 255;
	--c-cyan: 92 212 255;

	/* Neutral greys — R, G and B are equal, so the surfaces carry no colour
	   cast at all. (An earlier pass tinted these toward blue; the tint showed
	   up as a cold wash across every card and border.) */
	--c-ink: 235 235 235;      /* body text */
	--c-slate: 169 169 169;    /* secondary text */
	--c-iron: 138 138 138;     /* tertiary text */
	--c-fog: 89 89 89;         /* disabled / placeholder */
	--c-mist: 58 58 58;
	--c-pebble: 48 48 48;      /* borders */
	--c-cloud: 30 30 30;       /* recessed surface */
	--c-snow: 24 24 24;        /* card surface */

	--c-kick: 83 252 24;

	/*
	 * Card / stat-tile surfaces.
	 *
	 * The decorative ones are neutral greys at slightly different levels, so
	 * tiles still separate from each other and from the card behind them
	 * without introducing a colour cast.
	 *
	 * mint and peony stay coloured on purpose: they are the only two that carry
	 * meaning rather than decoration — a hunt in profit vs a hunt down — and
	 * greying them would throw that information away.
	 */
	--c-sky: 34 34 34;
	--c-aqua: 37 37 37;
	--c-periwinkle: 40 40 40;
	--c-lavender: 44 44 44;

	--c-mint: 28 62 36;        /* in profit */
	--c-peony: 72 32 32;       /* down */

	/* Page canvas, a step below the card surface. The wash is plain white at
	   low alpha rather than a colour, so it lifts the corners without putting
	   a tint back on the page. */
	--canvas: #131313;
	--wash-1: rgba(255, 255, 255, 0.035);
	--wash-2: rgba(255, 255, 255, 0.02);

	/* No drop shadows anywhere. Surfaces are separated by their own level and by
	   border-pebble, which is enough on a dark canvas — a shadow under a
	   near-black card mostly reads as smudge. The shadow-card/shadow-lift
	   utilities were removed from the config too, so `shadow-*` is not
	   available to reach for by accident. */

	--selection: rgba(255, 255, 255, 0.22);
}

html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--canvas);
	/* Soft violet-tinted wash so the canvas isn't flat */
	background-image:
		radial-gradient(60rem 40rem at 80% -10%, var(--wash-1), transparent 60%),
		radial-gradient(50rem 40rem at -10% 10%, var(--wash-2), transparent 60%);
	background-attachment: fixed;
	/* Switching theme should not look like a page reload. */
	transition: background-color 0.2s ease;
}

/* Hero gradient text — pink → orange (monday.com warmth) */
.gradient-text {
	background-image: linear-gradient(90deg, #fe81e4, #fda900);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Brand prism dot used in the wordmark */
.prism-dot {
	background-image: conic-gradient(from 270deg, #8181ff, #3ac9ff, #bcfe90, #fda900, #fe81e4, #8181ff);
}

/* Uppercase mono-ish eyebrow label */
.kicker {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* Underline-on-hover links */
.link-underline {
	position: relative;
}
.link-underline::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	height: 1.5px;
	width: 0;
	background: currentColor;
	transition: width 0.25s ease;
}
.link-underline:hover::after {
	width: 100%;
}

/* Scroll reveal */
.reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in {
	opacity: 1;
	transform: none;
}

/*
 * Form controls are painted by the browser rather than by our classes, so they
 * need the surface colour explicitly — otherwise dark mode leaves white input
 * boxes behind. color-scheme above handles the native widgets (the number
 * spinners, the checkbox).
 */
input,
select,
textarea,
button {
	color: inherit;
}
input::placeholder,
textarea::placeholder {
	color: rgb(var(--c-iron));
	opacity: 1;
}
input[type='number'],
input[type='text'],
input[type='search'],
textarea,
select {
	background-color: rgb(var(--c-snow));
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	body {
		transition: none;
	}
}

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