/**
 * Viajali 2026 — Design tokens
 * Source: ui-ux-pro-max (News Editorial + brand teal refinement)
 *
 * @package Viajali_2026
 */

:root {
	/* Brand */
	--color-brand: #1ab0ca;
	--color-brand-dark: #52adc6;
	--color-brand-light: #e8f6fa;
	--color-brand-contrast: #0a5f72;

	/* Neutrals — editorial palette */
	--color-bg: #fafafa;
	--color-surface: #ffffff;
	--color-text: #18181b;
	--color-text-muted: #52525b;
	--color-text-subtle: #71717a;
	--color-border: #e4e4e7;
	--color-border-strong: #d4d4d8;

	/* Accent — warm travel CTA (WCAG on white) */
	--color-accent: #c2410c;
	--color-accent-hover: #9a3412;

	/* Typography — Newsreader + Roboto */
	--font-heading: "Newsreader", Georgia, "Times New Roman", serif;
	--font-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono: ui-monospace, "Cascadia Code", monospace;

	--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;

	--leading-tight: 1.25;
	--leading-normal: 1.6;
	--leading-relaxed: 1.75;

	/* Spacing scale */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;

	/* Layout */
	--container-max: 1200px;
	--content-max: 45rem; /* ~720px, 65–75 chars */
	--header-height: 4rem;

	/* Radius & shadow */
	--radius-sm: 0.375rem;
	--radius-md: 0.5rem;
	--radius-lg: 0.75rem;
	--shadow-sm: 0 1px 2px rgb(24 24 27 / 0.06);
	--shadow-md: 0 4px 12px rgb(24 24 27 / 0.08);
	--shadow-header: 0 1px 0 var(--color-border);

	/* Motion */
	--transition-fast: 150ms ease;
	--transition-base: 200ms ease;
	--transition-slow: 300ms ease;

	/* Focus — WCAG visible ring */
	--focus-ring: 0 0 0 3px rgb(26 176 202 / 0.45);

	/* Z-index */
	--z-header: 50;
	--z-nav: 40;
	--z-overlay: 30;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-bg: #0f0f10;
		--color-surface: #18181b;
		--color-text: #fafafa;
		--color-text-muted: #a1a1aa;
		--color-text-subtle: #71717a;
		--color-border: #27272a;
		--color-border-strong: #3f3f46;
		--color-brand-light: #0d3d47;
		--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
		--shadow-md: 0 4px 12px rgb(0 0 0 / 0.4);
		--shadow-header: 0 1px 0 var(--color-border);
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--transition-fast: 0ms;
		--transition-base: 0ms;
		--transition-slow: 0ms;
	}
}