/*
 * Design tokens — exact values from backup/nextjs-static-site/src/styles/globals.css,
 * reproduced in docs/processwire-architecture.md Section 3. Re-verify against that source
 * if this ever goes stale.
 */
@layer tokens, base, layout, components;

@layer tokens {
	:root {
		--color-background: #ffffff;
		--color-foreground: #0f172a;

		--color-primary: #334e68;
		--color-primary-foreground: #ffffff;

		--color-secondary: #eef2f6;
		--color-secondary-foreground: #1e293b;

		--color-accent: #3b7ea1;
		--color-accent-foreground: #ffffff;

		--color-muted: #f8fafc;
		--color-muted-foreground: #475569;

		--color-border: #e2e8f0;
		--color-ring: #3b7ea1;

		--color-success: #15803d;
		--color-warning: #b45309;
		--color-destructive: #b91c1c;

		--color-card: #ffffff;
		--color-card-foreground: #0f172a;

		--radius: 0.625rem;
		--radius-sm: calc(var(--radius) - 0.25rem);
		--radius-lg: var(--radius);
		--radius-xl: calc(var(--radius) + 0.25rem);

		--content-width: 80rem;

		--accent-10: color-mix(in srgb, var(--color-accent) 10%, transparent);
		--primary-10: color-mix(in srgb, var(--color-primary) 10%, transparent);
		--primary-foreground-85: color-mix(in srgb, var(--color-primary-foreground) 85%, transparent);
		--primary-foreground-30: color-mix(in srgb, var(--color-primary-foreground) 30%, transparent);

		--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
		--font-display: 'Manrope', 'Inter', ui-sans-serif, system-ui, sans-serif;
	}

	@media (prefers-color-scheme: dark) {
		:root {
			--color-background: #0b1220;
			--color-foreground: #e2e8f0;

			--color-primary: #7ea3c4;
			--color-primary-foreground: #0b1220;

			--color-secondary: #16202f;
			--color-secondary-foreground: #e2e8f0;

			--color-accent: #63b3d1;
			--color-accent-foreground: #0b1220;

			--color-muted: #111a29;
			--color-muted-foreground: #94a3b8;

			--color-border: #22303f;
			--color-ring: #63b3d1;

			--color-success: #4ade80;
			--color-warning: #fbbf24;
			--color-destructive: #f87171;

			--color-card: #101928;
			--color-card-foreground: #e2e8f0;
		}
	}
}