/* tokens.css — design tokens for Valley Transportation v4 */

:root {
	/* Brand */
	--v-primary: #F5A623;
	--v-primary-rgb: 245, 166, 35;
	--v-accent: #E63946;
	--v-accent-rgb: 230, 57, 70;
	--v-bg: #0A0E17;
	--v-bg-rgb: 10, 14, 23;

	/* Surfaces */
	--v-surface-1: #11161F;
	--v-surface-2: #1A2030;
	--v-surface-3: rgba(255, 255, 255, 0.04);
	--v-surface-elev: rgba(20, 28, 50, 0.7);

	/* Borders & lines */
	--v-border: rgba(255, 255, 255, 0.08);
	--v-border-strong: rgba(255, 255, 255, 0.16);
	--v-divider: rgba(255, 255, 255, 0.05);

	/* Text */
	--v-text: #F4F6FA;
	--v-text-dim: #C7CEDC;
	--v-muted: #8892A6;
	--v-faint: #5A6580;

	/* Semantic */
	--v-success: #22C55E;
	--v-warning: #F59E0B;
	--v-danger: #EF4444;

	/* Typography */
	--v-font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
	--v-font-body: "Inter", system-ui, -apple-system, sans-serif;
	--v-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

	/* Type scale (clamped) */
	--v-h1: clamp(2.75rem, 7vw, 6rem);
	--v-h2: clamp(2rem, 4.5vw, 3.75rem);
	--v-h3: clamp(1.5rem, 2.2vw, 2rem);
	--v-h4: clamp(1.15rem, 1.5vw, 1.35rem);
	--v-body: clamp(1rem, 1.05vw, 1.08rem);
	--v-small: 0.85rem;
	--v-micro: 0.72rem;

	/* Layout */
	--v-max: 1280px;
	--v-max-wide: 1440px;
	--v-gutter: clamp(1rem, 3vw, 2rem);

	/* Radius */
	--v-r-sm: 8px;
	--v-r-md: 14px;
	--v-r-lg: 20px;
	--v-r-xl: 28px;
	--v-r-pill: 999px;

	/* Spacing scale */
	--v-space-1: 0.5rem;
	--v-space-2: 0.85rem;
	--v-space-3: 1.25rem;
	--v-space-4: 2rem;
	--v-space-5: 3.25rem;
	--v-space-6: 5rem;
	--v-space-7: 7.5rem;

	/* Shadows */
	--v-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.25);
	--v-shadow-md: 0 16px 40px rgba(0, 0, 0, 0.35);
	--v-shadow-lg: 0 32px 80px rgba(0, 0, 0, 0.5);
	--v-shadow-glow: 0 12px 48px rgba(var(--v-primary-rgb), 0.35);

	/* Motion */
	--v-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--v-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
	--v-ease-in: cubic-bezier(0.55, 0, 1, 0.45);

	/* Z-index */
	--v-z-base: 1;
	--v-z-overlay: 100;
	--v-z-header: 1000;
	--v-z-drawer: 1100;
	--v-z-loader: 9999;

	/* Layout heights */
	--v-header-h: 76px;
}

@media (max-width: 768px) {
	:root {
		--v-header-h: 64px;
		--v-space-6: 3.5rem;
		--v-space-7: 5rem;
	}
}