/**
 * Jawharet Jeddah — static design tokens (spacing, layout, fallbacks).
 * Published colors/fonts load afterward via jawharet-design-tokens inline CSS.
 */

:root {
	/* Legacy color aliases (resolve from --jw-* when design system is active) */
	--color-navy: var(--jw-color-heading, #142d3e);
	--color-deep-navy: var(--jw-color-heading, #142d3e);
	--color-teal: var(--jw-color-primary, #087e8b);
	--color-teal-dark: var(--jw-color-accent, #066670);
	--color-aqua-soft: #eaf4f5;
	--color-off-white: var(--jw-color-background, #f6f8fa);
	--color-white: var(--jw-color-surface, #ffffff);
	--color-text: var(--jw-color-text, #1a2e3b);
	--color-text-muted: #5a6b76;
	--color-border: var(--jw-color-border, #d8e3e8);

	/* Typography fallbacks (fluid scale overrides via jawharet-design-tokens) */
	--font-family-base: var(--jw-font-body, "Cairo", "Segoe UI", "Tahoma", "Arial", sans-serif);
	--font-family-heading: var(--jw-font-heading, "Cairo", "Segoe UI", "Tahoma", "Arial", sans-serif);
	--font-size-xs: 0.8125rem;
	--font-size-sm: 0.875rem;
	--font-size-base: 1rem;
	--font-size-md: 1.125rem;
	--font-size-lg: 1.375rem;
	--font-size-xl: 1.75rem;
	--font-size-2xl: 2.25rem;
	--line-height-tight: 1.25;
	--line-height-base: 1.6;
	--line-height-relaxed: 1.75;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	/* Spacing */
	--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;

	/* Layout */
	--container-max: 75rem;
	--reading-max: 75rem; /* 1200px single-article column on desktop */
	--container-padding: var(--space-4);
	--header-height: 4.5rem;

	/* Radii & shadows */
	--radius-sm: 0.375rem;
	--radius-md: 0.625rem;
	--radius-lg: 1rem;
	--radius-pill: 999px;
	--shadow-sm: 0 1px 2px rgb(20 45 62 / 0.06);
	--shadow-md: 0 8px 24px rgb(20 45 62 / 0.1);
	--shadow-header: 0 2px 12px rgb(20 45 62 / 0.08);

	/* Motion */
	--transition-fast: 150ms ease;
	--transition-base: 220ms ease;

	/* Breakpoints (reference — use in media queries) */
	/* sm: 480px, md: 768px, lg: 1024px, xl: 1280px, design-mobile: 390px, design-desktop: 1440px */
}

@media (min-width: 768px) {
	:root {
		--container-padding: var(--space-6);
		--header-height: 5rem;
	}
}