/* Mappa UI — Design Tokens
 * Source: mappa-ai/mappa-ui (src/app/globals.css)
 * All tokens authored in OKLCH. Hex fallbacks on swatch cards.
 */

:root {
	/* Brand — signature Mappa yellow */
	--brand-dark: oklch(0.5988 0.1226 93.09);
	--brand-medium: oklch(0.8769 0.179577 93.1299);
	--brand-light: oklch(0.9156 0.1462 96.74);
	--brand-lighter: oklch(0.9697 0.0551 97.26);

	/* Action — product chrome + primary CTAs (near-black) */
	--action-dark: oklch(0.1591 0 0);
	--action-medium: oklch(0.2645 0 0);
	--action-light: oklch(0.5555 0 0);
	--action-lighter: oklch(0.9249 0 0);

	/* Success */
	--success-dark: oklch(0.3245 0.0809 137.09);
	--success-medium: oklch(0.5197 0.1377 137.09);
	--success-light: oklch(0.868 0.1141 135.72);
	--success-lighter: oklch(0.9465 0.0466 135.45);

	/* Error */
	--error-dark: oklch(0.3887 0.1255 25.19);
	--error-medium: oklch(0.5154 0.173 25.7);
	--error-light: oklch(0.7593 0.0929 19.45);
	--error-lighter: oklch(0.9519 0.0163 17.44);

	/* Warning */
	--warning-dark: oklch(0.6792 0.144058 73.8364);
	--warning-medium: oklch(0.8342 0.1594 79.51);
	--warning-light: oklch(0.9108 0.0935 84.12);
	--warning-lighter: oklch(0.9622 0.0384 83.83);

	/* Neutral */
	--neutral-darker: oklch(0.1591 0 0);
	--neutral-dark: oklch(0.2645 0 0);
	--neutral-medium: oklch(0.65 0 0);
	--neutral-light: oklch(0.9249 0 0);
	--neutral-lighter: oklch(0.9851 0 0);
	--neutral-lightest: oklch(1 0 0);

	/* Background */
	--background-dark: oklch(0.2645 0 0);
	--background-medium: oklch(0.9612 0 0);
	--background-light: oklch(0.9851 0 0);
	--background-lighter: oklch(1 0 0);

	/* Semantic aliases (light theme default) */
	--background: var(--background-light);
	--foreground: var(--neutral-dark);
	--card: var(--background-lighter);
	--card-foreground: var(--neutral-dark);
	--popover: var(--background-lighter);
	--popover-foreground: var(--neutral-dark);
	--primary: var(--neutral-dark);
	--primary-foreground: var(--background-lighter);
	--secondary: var(--background-lighter);
	--secondary-foreground: var(--neutral-dark);
	--muted: var(--neutral-light);
	--muted-foreground: var(--neutral-medium);
	--accent: var(--neutral-light);
	--accent-foreground: var(--neutral-dark);
	--destructive: var(--error-medium);
	--destructive-foreground: var(--background-lighter);
	--border: var(--neutral-light);
	--input: var(--neutral-light);
	--ring: var(--neutral-light);
	--overlay: oklch(0 0 0 / 0.5);

	/* Radius — base 10px, scales ±4 */
	--radius: 0.625rem;
	--radius-sm: calc(var(--radius) - 4px);
	--radius-md: calc(var(--radius) - 2px);
	--radius-lg: var(--radius);
	--radius-xl: calc(var(--radius) + 4px);

	/* Shadows — soft, single-source */
	--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
	--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
	--shadow-sm:
		0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
	--shadow: var(--shadow-sm);
	--shadow-md:
		0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
	--shadow-lg:
		0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
	--shadow-xl:
		0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
	--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);

	/* Type — Geist is the single family (sans, serif, mono all point here) */
	--font-sans: Geist, ui-sans-serif, system-ui, sans-serif;
	--font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Breakpoints (reference) */
	--bp-xs: 28rem;
	--bp-sm: 40rem;
	--bp-md: 48rem;
	--bp-lg: 64rem;
	--bp-xl: 80rem;
	--bp-2xl: 96rem;
}

/* ----- Typography utilities ----- */
.hero-title {
	font: 600 48px / 110% var(--font-sans);
	letter-spacing: -0.02em;
}
.display-large {
	font: 600 36px / 120% var(--font-sans);
	letter-spacing: -0.02em;
}
.display-medium {
	font: 600 24px / 110% var(--font-sans);
	letter-spacing: -0.02em;
}
.display-small {
	font: 600 24px / 120% var(--font-sans);
	letter-spacing: -0.02em;
}
.heading-large {
	font: 600 20px / 110% var(--font-sans);
	letter-spacing: -0.02em;
}
.heading-medium {
	font: 600 18px / 145% var(--font-sans);
	letter-spacing: -0.005em;
}
.heading-small {
	font: 600 16px / 145% var(--font-sans);
	letter-spacing: -0.005em;
}
.subheading {
	font: 500 14px / 120% var(--font-sans);
}
.body {
	font: 400 14px / 150% var(--font-sans);
}
.body-small {
	font: 400 13px / 18px var(--font-sans);
}
.caption {
	font: 400 12px / 120% var(--font-sans);
}

@media (min-width: 48rem) {
	.hero-title {
		font-size: 64px;
	}
	.display-large {
		font-size: 48px;
	}
	.display-medium {
		font-size: 36px;
	}
	.display-small {
		font-size: 32px;
	}
	.heading-large {
		font-size: 24px;
	}
	.heading-medium {
		font-size: 20px;
	}
	.heading-small {
		font-size: 18px;
	}
	.subheading {
		font-size: 16px;
	}
	.body-small {
		font-size: 14px;
	}
	.caption {
		font-size: 13px;
	}
}

/* ----- Base ----- */
*,
*::before,
*::after {
	box-sizing: border-box;
}
html,
body {
	margin: 0;
	padding: 0;
}
body {
	font-family: var(--font-sans);
	background: var(--background);
	color: var(--foreground);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
::selection {
	background: var(--brand-medium);
	color: var(--foreground);
}
code {
	font-family: var(--font-mono);
}