/*
 * HerzART design tokens — ported 1:1 from the design system (globals.css of the
 * Next.js prototype). Colours in oklch. Use these variables everywhere; no
 * ad-hoc hex/px.
 */

:root {
	/* Fonts */
	--ha-font-display: "Newsreader", Georgia, "Times New Roman", serif;
	--ha-font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Core colours */
	--ha-background: oklch(0.993 0.0022 85);
	--ha-foreground: oklch(0.22 0.006 55);
	--ha-surface: oklch(0.973 0.011 68);
	--ha-card: oklch(0.989 0.003 84);

	--ha-primary: oklch(0.468 0.03 55.527);          /* muted clay brown */
	--ha-primary-foreground: oklch(0.985 0.004 78);
	--ha-primary-hover: oklch(0.4 0.028 55.527);

	--ha-secondary: oklch(0.973 0.011 68);
	--ha-muted: oklch(0.958 0.005 82);
	--ha-muted-foreground: oklch(0.44 0.012 58);
	--ha-accent: oklch(0.61 0.038 128);              /* soft sage */
	--ha-accent-foreground: oklch(0.985 0.004 78);
	--ha-destructive: oklch(0.55 0.15 30);

	--ha-border: oklch(0.914 0.005 82);
	--ha-input: oklch(0.914 0.005 82);
	--ha-ring: oklch(0.468 0.03 55.527);

	/* Radii */
	--ha-radius: 0.625rem;
	--ha-radius-sm: calc(var(--ha-radius) - 6px);
	--ha-radius-lg: calc(var(--ha-radius) + 6px);
	--ha-radius-pill: 999px;

	/* Type scale (fluid) */
	--ha-text-display: clamp(2.5rem, 6vw, 4.5rem);
	--ha-text-h1: clamp(2rem, 4vw, 3rem);
	--ha-text-h2: clamp(1.6rem, 3vw, 2.25rem);
	--ha-text-h3: clamp(1.3rem, 2vw, 1.6rem);
	--ha-text-h4: 1.15rem;
	--ha-text-lead: clamp(1.1rem, 1.5vw, 1.3rem);
	--ha-text-base: 1.0625rem;
	--ha-text-sm: 1rem;
	--ha-text-xs: 0.9375rem;

	/* Container widths shared with the original design prototype */
	--container-prose: 44rem;
	--container-content: 75rem;
	--container-wide: 82.5rem; /* 1320px */

	/* Shadows */
	--ha-shadow-sm: 0 1px 2px oklch(0.235 0.008 58 / 0.06);
	--ha-shadow-md: 0 4px 16px oklch(0.235 0.008 58 / 0.08);
	--ha-shadow-lg: 0 12px 40px oklch(0.235 0.008 58 / 0.1);

	/* Motion */
	--ha-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--ha-dur-base: 220ms;
	--ha-dur-slow: 760ms;
}

/*
 * Base typography — measured, so it sets the brand voice without fighting
 * Divi's layout. Section-specific type rules live in style.css.
 */
body {
	font-family: var(--ha-font-body);
	color: var(--ha-foreground);
	background-color: var(--ha-background);
}

h1, h2, h3, h4, h5, h6,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3, .et_pb_module h4 {
	font-family: var(--ha-font-display);
	color: var(--ha-foreground);
	text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}