:root {
	/* Fonts */
	--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
		"Courier New", monospace;

	/* Typography scale (rem) */
	--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;
	--text-6xl: 3.75rem;
	--text-7xl: 4.5rem;
	--text-8xl: 6rem;

	/* Line-height + tracking */
	--leading-tight: 1.25;
	--leading-snug: 1.375;
	--leading-relaxed: 1.625;
	--tracking-tight: -0.025em;
	--tracking-wide: 0.025em;
	--tracking-wider: 0.05em;
	--tracking-widest: 0.1em;

	/* Spacing */
	--spacing: 0.25rem;

	/* Radius */
	--radius-xs: 0.125rem;
	--radius-sm: 0.25rem;
	--radius-md: 0.375rem;
	--radius-lg: 0.5rem;
	--radius-xl: 0.75rem;
	--radius-2xl: 1rem;
	--radius-3xl: 1.5rem;

	/* Brand primary — Tailwind `primary` / `ring` (same hue as emerald-500) */
	--primary-oklch: oklch(69.6% 0.17 162.48);
	--primary-hover-oklch: oklch(58% 0.16 162.48);
	--primary-fg-oklch: oklch(100% 0 0);
	--primary-muted-oklch: oklch(94% 0.06 162.48);
	--primary-subtle-oklch: oklch(96.5% 0.04 162.48);
	--ring-oklch: oklch(55% 0.14 162.48);

	/* Neutrals: achromatic whites/grays (background, cards, sidebar, auth — primary only on accents) */
	--bg-oklch: oklch(97% 0 0);
	--surface-oklch: oklch(100% 0 0);
	--surface-2-oklch: oklch(96.5% 0 0);
	--surface-elevated-oklch: oklch(100% 0 0);
	--text-oklch: oklch(22% 0 0);
	--text-muted-oklch: oklch(48% 0 0);
	--border-oklch: oklch(91% 0 0);
	--border-strong-oklch: oklch(83% 0 0);

	/* Feedback (RGB — Tailwind danger utilities) */
	--danger: 220 38 38;
	--danger-foreground: 255 255 255;
	--danger-muted: 254 242 242;
	--danger-border: 252 165 165;

	/* Elevation — neutral (any primary works) */
	--elevation-xs: 0 1px 2px rgb(0 0 0 / 0.05);
	--elevation-sm: 0 1px 3px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.04);
	--elevation-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
	--elevation-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);
	--elevation-xl: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.05);
	--elevation-primary: 0 4px 14px color-mix(in oklch, var(--primary-oklch) 35%, transparent);

	color-scheme: light;
}

[data-theme="dark"] {
	/* Brand still follows --primary-oklch (swap primary freely) */
	--primary-oklch: oklch(72% 0.14 162.48);
	--primary-hover-oklch: oklch(78% 0.11 162.48);
	--primary-fg-oklch: oklch(14% 0 0);
	--primary-muted-oklch: oklch(26% 0.05 162.48);
	--primary-subtle-oklch: oklch(22% 0.04 162.48);
	--ring-oklch: oklch(70% 0.12 162.48);

	/* Neutrals: achromatic so any primary works (no green cast on chrome) */
	--bg-oklch: oklch(14.5% 0 0);
	--surface-oklch: oklch(18.5% 0 0);
	--surface-2-oklch: oklch(22.5% 0 0);
	--surface-elevated-oklch: oklch(27% 0 0);
	--text-oklch: oklch(96% 0 0);
	--text-muted-oklch: oklch(68% 0 0);
	--border-oklch: oklch(34% 0 0);
	--border-strong-oklch: oklch(44% 0 0);

	--danger: 248 113 113;
	--danger-foreground: 24 22 32;
	--danger-muted: 60 32 38;
	--danger-border: 127 55 67;

	--elevation-xs: 0 1px 2px rgb(0 0 0 / 0.35);
	--elevation-sm: 0 1px 3px rgb(0 0 0 / 0.4), 0 1px 2px rgb(0 0 0 / 0.3);
	--elevation-md: 0 4px 6px -1px rgb(0 0 0 / 0.45), 0 2px 4px -2px rgb(0 0 0 / 0.35);
	--elevation-lg: 0 10px 15px -3px rgb(0 0 0 / 0.45), 0 4px 6px -4px rgb(0 0 0 / 0.35);
	--elevation-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4);
	--elevation-primary: 0 4px 20px color-mix(in oklch, var(--primary-oklch) 28%, transparent);

	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		--primary-oklch: oklch(72% 0.14 162.48);
		--primary-hover-oklch: oklch(78% 0.11 162.48);
		--primary-fg-oklch: oklch(14% 0 0);
		--primary-muted-oklch: oklch(26% 0.05 162.48);
		--primary-subtle-oklch: oklch(22% 0.04 162.48);
		--ring-oklch: oklch(70% 0.12 162.48);

		--bg-oklch: oklch(14.5% 0 0);
		--surface-oklch: oklch(18.5% 0 0);
		--surface-2-oklch: oklch(22.5% 0 0);
		--surface-elevated-oklch: oklch(27% 0 0);
		--text-oklch: oklch(96% 0 0);
		--text-muted-oklch: oklch(68% 0 0);
		--border-oklch: oklch(34% 0 0);
		--border-strong-oklch: oklch(44% 0 0);

		--danger: 248 113 113;
		--danger-foreground: 24 22 32;
		--danger-muted: 60 32 38;
		--danger-border: 127 55 67;

		--elevation-xs: 0 1px 2px rgb(0 0 0 / 0.35);
		--elevation-sm: 0 1px 3px rgb(0 0 0 / 0.4), 0 1px 2px rgb(0 0 0 / 0.3);
		--elevation-md: 0 4px 6px -1px rgb(0 0 0 / 0.45), 0 2px 4px -2px rgb(0 0 0 / 0.35);
		--elevation-lg: 0 10px 15px -3px rgb(0 0 0 / 0.45), 0 4px 6px -4px rgb(0 0 0 / 0.35);
		--elevation-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4);
		--elevation-primary: 0 4px 20px color-mix(in oklch, var(--primary-oklch) 28%, transparent);

		color-scheme: dark;
	}
}

html {
	font-family: var(--font-sans);
	background-color: var(--bg-oklch);
}

body {
	font-family: var(--font-sans);
	color: var(--text-oklch);
	background-color: var(--bg-oklch);
	background-image: radial-gradient(
		ellipse 100% 60% at 50% -15%,
		color-mix(in oklch, oklch(85% 0 0) 18%, transparent),
		transparent 52%
	);
	background-attachment: fixed;
	min-height: 100vh;
}

[data-theme="dark"] body {
	background-image: radial-gradient(
		ellipse 90% 55% at 50% -10%,
		color-mix(in oklch, oklch(26% 0 0) 22%, transparent),
		transparent 50%
	);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) body {
		background-image: radial-gradient(
			ellipse 90% 55% at 50% -10%,
			color-mix(in oklch, oklch(26% 0 0) 22%, transparent),
			transparent 50%
		);
	}
}

/* Environment notices — explicit CSS so layout/color work even if Tailwind utilities are missing from the build */
.env-floating-banner {
	position: fixed;
	bottom: max(1rem, env(safe-area-inset-bottom, 0px));
	right: max(1rem, env(safe-area-inset-right, 0px));
	left: auto;
	top: auto;
	z-index: 200;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	max-width: min(calc(100vw - 2rem), 20rem);
	border-radius: 0.75rem;
	padding: 0.625rem 0.75rem;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.025em;
	line-height: 1.375;
	box-shadow:
		0 10px 15px -3px rgb(0 0 0 / 0.1),
		0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.env-floating-banner--staging {
	background-color: #fde047;
	color: #0f172a;
	border: 1px solid rgb(202 138 4 / 0.5);
}

.env-floating-banner--test {
	background-color: #dc2626;
	color: #ffffff;
	border: 1px solid rgb(185 28 28 / 0.8);
}

.env-floating-banner__label {
	min-width: 0;
	flex: 1 1 auto;
}

.env-floating-banner__dismiss {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.375rem;
	padding: 0.25rem;
	margin: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	line-height: 0;
}

.env-floating-banner--staging .env-floating-banner__dismiss {
	color: rgb(15 23 42 / 0.9);
}

.env-floating-banner--staging .env-floating-banner__dismiss:hover {
	background-color: rgb(15 23 42 / 0.1);
}

.env-floating-banner--staging .env-floating-banner__dismiss:focus-visible {
	outline: 2px solid rgb(15 23 42 / 0.35);
	outline-offset: 1px;
}

.env-floating-banner--test .env-floating-banner__dismiss {
	color: rgb(255 255 255 / 0.9);
}

.env-floating-banner--test .env-floating-banner__dismiss:hover {
	background-color: rgb(255 255 255 / 0.15);
}

.env-floating-banner--test .env-floating-banner__dismiss:focus-visible {
	outline: 2px solid rgb(255 255 255 / 0.5);
	outline-offset: 1px;
}

/* Responsive shell helpers (avoid relying on Tailwind responsive extraction) */
.desktop-sidebar {
	display: none;
}

.mobile-sidebar-root {
	display: block;
}

.main-with-sidebar {
	margin-left: 0;
}

@media (width >= 64rem) {
	.desktop-sidebar {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		height: 100dvh;
		width: 16rem;
	}

	.mobile-sidebar-root {
		display: none;
	}

	.main-with-sidebar {
		margin-left: 16rem;
	}
}