@import 'tailwindcss';

@font-face {
	font-family: 'Geist';
	src: url('/fonts/Geist[wght].ttf') format('truetype-variations');
	font-weight: 100 900;
	font-display: swap;
}

@custom-variant dark (&:where(.dark, .dark *));

@theme {
	--font-geist: 'Geist', 'sans-serif';
}

:root {
	--color-primary: #f97316;
	--color-primary-strong: #ea580c;
	--color-primary-soft: #fff7ed;
	--color-surface: #ffffff;
	--color-surface-muted: #f5f5f5;
	--color-border: #e4e4e7;
	--color-text-primary: #1f2937;
	--color-text-secondary: #475569;
	--shadow-soft: 0 18px 40px -18px rgba(15, 23, 42, 0.35);
}

.dark {
	color-scheme: dark;
	--color-primary: #fb923c;
	--color-primary-strong: #f97316;
	--color-primary-soft: rgba(251, 146, 60, 0.12);
	--color-surface: #111111;
	--color-surface-muted: #18181b;
	--color-border: #27272a;
	--color-text-primary: #f4f4f5;
	--color-text-secondary: #a1a1aa;
	--shadow-soft: 0 24px 48px -24px rgba(0, 0, 0, 0.7);
}

@layer base {
	* {
		box-sizing: border-box;
	}

	html,
	body {
		height: 100%;
		overflow: scroll;
	}

	body {
		margin: 0;
		background-color: var(--color-surface-muted);
		color: var(--color-text-primary);
		font-family: var(--font-geist);
		-webkit-font-smoothing: antialiased;
	}

	.dark body {
		background-color: var(--color-surface-muted);
		color: var(--color-text-primary);
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		color: var(--color-text-primary);
		font-weight: 600;
	}

	p,
	span,
	label {
		color: var(--color-text-secondary);
	}

	a {
		color: inherit;
		text-decoration: none;
	}

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