/**
 * Design tokens — single source of truth for color, spacing, container
 * and radius values. See docs/DESIGN_SYSTEM.md.
 */

:root {
	/* Color — brand primitives (D-023) */
	--color-green-900: #123f38;
	--color-orange-600: #e85c2a;
	--color-cream-100: #f7f3ec;
	--color-beige-200: #efdccb;
	--color-white: #ffffff;

	/* Color — semantic roles. Use these for UI and text; photos, the aurora
	   glows and artwork keep their own colours. */
	--color-text: var(--color-green-900);
	--color-text-muted: #4b6a61;
	--color-accent: var(--color-orange-600);
	--color-accent-text: color-mix(in srgb, var(--color-orange-600) 72%, #000); /* small accent text/links, ≥ 4.5:1 on cream and glass */
	/* Primary button surface under white text (D-037): the smallest
	   darkening of the brand orange that reaches ≥ 4.5:1 (#c84f24, 4.6:1);
	   hover/focus one step darker (#b54821, 5.4:1). */
	--color-action: color-mix(in srgb, var(--color-orange-600) 86%, #000);
	--color-action-hover: color-mix(in srgb, var(--color-orange-600) 78%, #000);
	--color-background: var(--color-cream-100);
	--color-surface-warm: #fcf3e6;
	--color-on-image: #faf7f0; /* light controls/labels drawn on photos */

	/* Hairlines — three levels, all derived from the primary green. */
	--color-rule-soft: color-mix(in srgb, var(--color-green-900) 7%, transparent);
	--color-rule: color-mix(in srgb, var(--color-green-900) 12%, transparent);
	--color-rule-strong: color-mix(in srgb, var(--color-green-900) 20%, transparent);

	/* Aurora (CSS-only glows on cream): offer sections, homepage (D-025). */
	--aurora-sage: rgba(150, 178, 140, 0.22);
	--aurora-sage-soft: rgba(150, 178, 140, 0.16);
	--aurora-apricot: rgba(244, 176, 128, 0.13);

	/* Glass over photos: offers quick overview, homepage panels (D-025). */
	--glass-surface: rgba(250, 247, 240, 0.62);
	--glass-surface-solid: rgba(250, 247, 240, 0.92); /* without backdrop-filter */
	--glass-surface-text: rgba(250, 247, 240, 0.78); /* panels carrying small text (homepage) */
	--glass-blur: blur(14px) saturate(1.15);
	--glass-edge: rgba(255, 255, 255, 0.6);

	/* Typography (D-023): Georgia headings, locally hosted IBM Plex Sans
	   for body/UI (assets/css/fonts.css), native sans as fallback. */
	--font-heading: Georgia, "Times New Roman", serif;
	--font-body: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Section titles on the homepage (≈52px at 1440px). */
	--font-size-section-title: clamp(2rem, 2.5vw + 1rem, 3.5rem);

	/* Spacing scale */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 80px;
	--space-10: 96px;

	/* Container */
	--container-max-width: 1280px;
	--container-padding: 16px;

	/* Radius */
	--radius-sm: 2px; /* crisp editorial controls (hero CTA) */
	--radius-card: 12px;
	--radius-pill: 999px;
}

@media (min-width: 768px) {
	:root {
		--container-padding: 24px;
	}
}

@media (min-width: 1024px) {
	:root {
		--container-padding: 32px;
	}
}