/* Rivious Design Tokens */
/* Nature-inspired, Rivian-adjacent palette */

:root {
	/* ─── Primary Palette ─── */
	--color-compass: #ffb100; /* Primary accent — Rivian Compass Yellow */
	--color-trail: #2c2417; /* Primary text — deep warm brown */
	--color-sandstone: #f8f4ef; /* Page background — warm papery */
	--color-forest: #2d6a4f; /* Success — deep green */
	--color-canyon: #c44536; /* Error — red canyon */
	--color-granite: #6b7280; /* Secondary text — cool gray */
	--color-ridge: #d6d0c4; /* Borders — warm gray */

	/* ─── Extended Palette ─── */
	--color-dusk: #1a1612; /* Dark mode background */
	--color-amber: #e09f3e; /* Warnings — golden hour */
	--color-creek: #457b9d; /* Info/links — cool water */
	--color-limestone: #e8e2d8; /* Card backgrounds */
	--color-cloud: #f0ebe3; /* Alternate bg */

	/* ─── Semantic Tokens ─── */

	/* Text */
	--text-primary: var(--color-trail);
	--text-secondary: var(--color-granite);
	--text-muted: #9b9590;
	--text-inverse: var(--color-sandstone);

	/* Backgrounds */
	--bg-page: var(--color-sandstone);
	--bg-card: var(--color-limestone);
	--bg-elevated: white;
	--bg-inset: var(--color-ridge);

	/* Interactive */
	--accent: var(--color-compass);
	--accent-hover: #e6a000;
	--accent-active: #cc8f00;

	/* Feedback */
	--success: var(--color-forest);
	--warning: var(--color-amber);
	--error: var(--color-canyon);

	/* Structure */
	--border: var(--color-ridge);
	--border-subtle: rgba(44, 36, 23, 0.08);
	--divider: var(--color-ridge);

	/* ─── Typography ─── */
	--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	--font-reading: Georgia, "Times New Roman", serif;
	--font-mono: "SF Mono", Consolas, "Fira Code", monospace;

	/* Type Scale (Major Third — 1.25x) */
	--text-xs: 0.64rem; /* 10.2px — fine print */
	--text-sm: 0.8rem; /* 12.8px — labels, metadata */
	--text-base: 1rem; /* 16px — body */
	--text-md: 1.125rem; /* 18px — emphasis */
	--text-lg: 1.25rem; /* 20px — card titles */
	--text-xl: 1.563rem; /* 25px — section headings */
	--text-2xl: 1.953rem; /* 31.2px — page titles */
	--text-3xl: 2.441rem; /* 39px — hero */
	--text-4xl: 3.052rem; /* 48.8px — display */

	/* ─── Spacing (4px grid) ─── */
	--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;
	--space-24: 96px;

	/* ─── Layout ─── */
	--max-width-content: 960px;
	--max-width-page: 1280px;
	--max-width-wide: 1536px;
	--sidebar-width: 256px;
	--sidebar-collapsed: 56px;

	/* ─── Borders ─── */
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 12px;
	--radius-pill: 100px;

	/* ─── Shadows ─── */
	--shadow-sm: 0 1px 2px rgba(44, 36, 23, 0.06);
	--shadow-md: 0 4px 12px rgba(44, 36, 23, 0.08);
	--shadow-lg: 0 8px 24px rgba(44, 36, 23, 0.12);

	/* ─── Motion ─── */
	--duration-fast: 150ms;
	--duration-normal: 250ms;
	--duration-slow: 400ms;
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ─── Dark Theme ─── */
[data-theme="dark"] {
	--text-primary: var(--color-sandstone);
	--text-secondary: #9ca3af;
	--text-muted: #6b7280;
	--text-inverse: var(--color-trail);

	--bg-page: var(--color-dusk);
	--bg-card: #2a2520;
	--bg-elevated: #332d27;
	--bg-inset: #1f1b17;

	--accent: var(--color-compass);
	--accent-hover: #ffbe33;

	--border: #3d3630;
	--border-subtle: rgba(248, 244, 239, 0.06);
	--divider: #3d3630;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ─── System Preference ─── */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		--text-primary: var(--color-sandstone);
		--text-secondary: #9ca3af;
		--text-muted: #6b7280;
		--text-inverse: var(--color-trail);

		--bg-page: var(--color-dusk);
		--bg-card: #2a2520;
		--bg-elevated: #332d27;
		--bg-inset: #1f1b17;

		--accent: var(--color-compass);
		--accent-hover: #ffbe33;

		--border: #3d3630;
		--border-subtle: rgba(248, 244, 239, 0.06);
		--divider: #3d3630;

		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
		--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
		--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
	}
}

/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ─── View Transitions ─── */
@view-transition {
	navigation: auto;
}

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

body {
	margin: 0;
	font-family: var(--font-ui);
	font-size: var(--text-base);
	line-height: 1.5;
	color: var(--text-primary);
	background: var(--bg-page);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-reading);
	font-weight: 400;
	line-height: 1.2;
	margin: 0;
}

a {
	color: var(--accent);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* ─── Accessibility ─── */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}