/*
 * Deku — deku.bacaxnot.com
 *
 * The token block below is the only place a colour is written down, and every
 * value in it is copied verbatim from apps/native/src/theme/colors.ts, which
 * is the source of truth for colour in this repo. The site and the app are the
 * same product, so they are painted from the same palette: the shadcn
 * `aria-rhea` preset on a zinc base with a blue primary, already converted
 * from oklch() to sRGB there.
 *
 * Dark is the default — it is the ground the app's splash screen is painted
 * on — and light is an override under prefers-color-scheme, mirroring how
 * useTheme() falls back to dark when the OS reports nothing.
 *
 * Spacing, radius and type sizes mirror apps/native/src/theme/theme.ts: the
 * 4px grid, the preset's radius scale derived from --radius: 0.625rem, and
 * Tailwind's type scale.
 */

:root {
	color-scheme: dark light;

	/* Colour — dark, from `palettes.dark`. */
	--background: #09090b;
	--foreground: #fafafa;
	--card: #18181b;
	--card-foreground: #fafafa;
	--primary: #193cb8;
	--primary-foreground: #eff6ff;
	--primary-loud: #2b7fff;
	--secondary: #27272a;
	--secondary-foreground: #fafafa;
	--muted: #27272a;
	--muted-foreground: #9f9fa9;
	--accent: #27272a;
	--accent-foreground: #fafafa;
	--destructive: #ff6467;
	--success: #35c26d;
	--border: rgba(255, 255, 255, 0.1);
	--input: rgba(255, 255, 255, 0.15);
	--ring: #71717b;
	--chart-1: #8ec5ff;
	--chart-2: #2b7fff;
	--chart-3: #155dfc;
	--chart-4: #1447e6;
	--chart-5: #193cb8;
	/* `hairline.dark` — a 6% veil of the text colour, for insets in cards. */
	--hairline: rgba(250, 250, 250, 0.06);

	/*
	 * The three steps of the split mark, drawn from the chart ramp. The ramp is
	 * one hue at five lightnesses, so it reads as a family of one brand colour
	 * rather than a bag of skittles (the same reasoning as `avatarTints`).
	 * Which three steps are used is theme-dependent: the ramp crosses the 3:1
	 * non-text contrast line at a different place on each ground, so dark takes
	 * the light end and light takes the dark end.
	 */
	--split-1: var(--chart-1);
	--split-2: var(--chart-2);
	--split-3: var(--chart-3);

	/*
	 * The page ground. The app layers page -> card -> inset; here the reading
	 * surface is the *card* and the one recessed panel is drawn with
	 * `background`, which is exactly how colors.ts describes an inset. It is
	 * also what keeps `muted-foreground` at 4.83:1 in light rather than the
	 * 4.39:1 it would be on the tinted page colour.
	 */
	--page: var(--card);
	--inset: var(--background);

	/* Spacing — the 4px grid, Tailwind's steps. */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;

	/* Radius — the preset's scale, derived from --radius: 0.625rem. */
	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-lg: 10px;
	--radius-xl: 14px;
	--radius-2xl: 18px;
	--radius-card: 24px;
	--radius-full: 9999px;

	/* The design's card padding: `[--card-spacing:18px]` on the web. */
	--card-spacing: 18px;

	/*
	 * Type. theme.ts stops at 4xl (36px) because that is the largest size a
	 * screen needed; 5xl continues the same Tailwind scale for the wordmark.
	 */
	--text-2xs: 0.625rem;
	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;
	--text-3xl: 1.875rem;
	--text-4xl: 2.25rem;
	--text-5xl: 3rem;

	--weight-normal: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;

	/*
	 * No webfont. apps/native/src/theme/fonts.ts ships no font files on
	 * purpose — the preset is set in a grotesque cut very close to SF Pro,
	 * which the platform already gives us, correctly hinted and optically
	 * sized. The site matches rather than introducing a download.
	 */
	--font-body:
		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
		Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

	--measure: 42rem;
}

@media (prefers-color-scheme: light) {
	:root {
		/* Colour — light, from `palettes.light`. */
		--background: #f4f4f5;
		--foreground: #09090b;
		--card: #ffffff;
		--card-foreground: #09090b;
		--primary: #1447e6;
		--primary-foreground: #eff6ff;
		--primary-loud: #155dfc;
		--secondary: #f4f4f5;
		--secondary-foreground: #18181b;
		--muted: #f4f4f5;
		--muted-foreground: #71717b;
		--accent: #f4f4f5;
		--accent-foreground: #18181b;
		--destructive: #e7000b;
		--success: #008236;
		--border: #e4e4e7;
		--input: #e4e4e7;
		--ring: #9f9fa9;
		/* The chart ramp is identical in both schemes. */
		--hairline: rgba(9, 9, 11, 0.06);

		--split-1: var(--chart-3);
		--split-2: var(--chart-4);
		--split-3: var(--chart-5);
	}
}

/* ---------------------------------------------------------------- reset -- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--page);
	color: var(--foreground);
	font-family: var(--font-body);
	font-size: var(--text-lg);
	font-weight: var(--weight-normal);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--primary-loud);
	color: var(--primary-foreground);
}

/*
 * The focus ring is `primary-loud`, not the `ring` token: `ring` is #9f9fa9 in
 * light, which is 2.6:1 on the card and so misses the 3:1 a focus indicator
 * needs. `primary-loud` is 5.2:1 in light and 5.3:1 in dark.
 */
:focus-visible {
	outline: 2px solid var(--primary-loud);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------- layout -- */

/*
 * `padding-inline`, not the `padding` shorthand: the shorthand would reset the
 * block padding that `.hero`, `main section` and `.colophon` set, and it wins
 * on specificity against a type selector.
 */
.page {
	width: 100%;
	max-width: var(--measure);
	margin: 0 auto;
	padding-inline: var(--space-6);
}

.skip {
	position: absolute;
	left: -9999px;
	top: var(--space-4);
	padding: var(--space-2) var(--space-4);
	background: var(--inset);
	color: var(--foreground);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	font-size: var(--text-sm);
	text-decoration: none;
}

.skip:focus {
	left: var(--space-4);
	z-index: 1;
}

.hero {
	padding-top: var(--space-16);
	padding-bottom: var(--space-12);
}

main section {
	padding-bottom: var(--space-16);
}

.colophon {
	border-top: 1px solid var(--border);
	padding-top: var(--space-8);
	padding-bottom: var(--space-16);
}

@media (min-width: 40rem) {
	.hero {
		padding-top: var(--space-20);
	}

	main section {
		padding-bottom: var(--space-20);
	}
}

/* ----------------------------------------------------------------- type -- */

h1,
h2 {
	margin: 0;
	font-weight: var(--weight-bold);
	line-height: 1.15;
	letter-spacing: -0.02em;
}

h1 {
	font-size: clamp(var(--text-4xl), 11vw, var(--text-5xl));
	letter-spacing: -0.035em;
}

h2 {
	font-size: var(--text-2xl);
	letter-spacing: -0.015em;
}

p {
	margin: 0;
}

p + p,
ul + p {
	margin-top: var(--space-5);
}

h2 + p {
	margin-top: var(--space-4);
}

strong {
	font-weight: var(--weight-semibold);
}

em {
	font-style: italic;
}

/* The kanji, set beside the wordmark and again as the eyebrow above it. */
.glyph {
	font-weight: var(--weight-medium);
	letter-spacing: 0.06em;
}

.eyebrow {
	margin-bottom: var(--space-3);
	color: var(--muted-foreground);
	font-size: var(--text-sm);
	line-height: 1;
}

.lede {
	margin-top: var(--space-6);
	font-size: var(--text-xl);
	line-height: 1.45;
	letter-spacing: -0.01em;
}

.tension {
	margin-top: var(--space-4);
	color: var(--muted-foreground);
	font-size: var(--text-base);
	line-height: 1.55;
}

.note {
	margin-top: var(--space-5);
	color: var(--muted-foreground);
	font-size: var(--text-base);
}

/* ----------------------------------------------------------- the mark -- */

/*
 * The one visual idea on the page: an expense, divided unevenly. It is the
 * whole product in one glyph, and the same three bars are the favicon and the
 * share image. It is not repeated anywhere else.
 */
.mark {
	display: block;
	width: 100%;
	height: auto;
	margin-top: var(--space-10);
}

.mark-1 {
	fill: var(--split-1);
}

.mark-2 {
	fill: var(--split-2);
}

.mark-3 {
	fill: var(--split-3);
}

/* --------------------------------------------------------------- pieces -- */

/* The one recessed surface, drawn with `background` over the card ground. */
.callout {
	margin-top: var(--space-6);
	padding: var(--card-spacing);
	background: var(--inset);
	border: 1px solid var(--hairline);
	border-left: 3px solid var(--primary-loud);
	border-radius: var(--radius-lg);
	font-size: var(--text-base);
}

.callout strong {
	color: var(--foreground);
}

.modes {
	margin: var(--space-5) 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.modes li {
	padding: var(--space-1) var(--space-3);
	background: var(--secondary);
	color: var(--secondary-foreground);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	line-height: 1.5;
}

.colophon p {
	color: var(--muted-foreground);
	font-size: var(--text-sm);
}

a {
	color: var(--primary-loud);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color 120ms ease;
}

a:hover {
	color: var(--foreground);
}

/*
 * The link colour fade is the only motion on the page — there is no animation,
 * no scroll effect and no transform anywhere — so honouring reduced motion is
 * one rule rather than the usual blanket `!important` override.
 */
@media (prefers-reduced-motion: reduce) {
	a {
		transition: none;
	}
}