/*
 * Design tokens.
 *
 * Custom properties only. Every colour, size, space and radius the theme uses is
 * declared here and nowhere else. No raw hex values outside this file.
 * Palette sampled from the client's logo and checked for WCAG AA (see BRIEF.md).
 */

:root {
	/* Colour ------------------------------------------------------------- */
	--mh-terracotta: #9C5448;        /* Primary: CTA fill, accents. */
	--mh-terracotta-hover: #7E4238;
	--mh-leaf: #647A6E;              /* Secondary: eyebrows, dividers, decor. */
	--mh-leaf-deep: #4E6357;
	--mh-slate: #3C4848;            /* Headings, dark bands. */
	--mh-teal: #2F6B75;             /* Test accent: icon marks, step circles, secondary buttons, text links. 4.67:1 on sand, 5.01:1 on cream. */
	--mh-blush: #DA9286F2;          /* Former footer background (Oct 2026). Light: white text on it is about 2.5:1. */
	--mh-rust: #9F3C2C;             /* Former footer tagline. */
	--mh-jade: #A8CDC0;             /* Footer background, the client's choice (copy round 4). Slate on it 5.50:1, teal 3.49:1, white 1.73:1. */
	--mh-ink: #1A1A1A;              /* Body copy. */
	--mh-cream: #F2E8E4;           /* Page background. */
	--mh-sand: #EDE0D9;            /* Alternating section background. */
	--mh-shell: #F7F3F0;          /* Cards, form fields. */
	--mh-white: #FFFFFF;
	--mh-border: #E0D2CA;

	/* Semantic aliases so components read by role, not by colour name. */
	--mh-bg: var(--mh-cream);
	--mh-bg-alt: var(--mh-sand);
	--mh-surface: var(--mh-shell);
	--mh-text: var(--mh-ink);
	--mh-heading: var(--mh-slate);
	--mh-accent: var(--mh-terracotta);
	--mh-on-dark: var(--mh-white);
	--mh-on-dark-muted: var(--mh-sand);   /* Secondary text on slate, 7.35:1. */

	/*
	 * Footer. Every footer colour goes through these, so trying another footer
	 * is a change of values here only, no template edits. Jade with dark slate
	 * text: 5.50:1 for all text, links, tagline and the focus ring. The headings
	 * ("Meny", "Kontakt") are body size, too small to count as large text, so
	 * they are slate too, not the 3.49:1 teal. Nothing is dimmed.
	 *
	 * Previous versions, to switch back:
	 *   Dark teal (to Oct 2026): bg var(--mh-teal); text, heading, link,
	 *     tagline and focus var(--mh-white); muted and divider var(--mh-sand).
	 *   Blush (Oct 2026): bg var(--mh-blush); text, heading, link and focus
	 *     var(--mh-white); muted and divider var(--mh-sand); tagline var(--mh-rust).
	 */
	--mh-footer-bg: var(--mh-jade);
	--mh-footer-text: var(--mh-slate);
	--mh-footer-heading: var(--mh-slate);
	--mh-footer-link: var(--mh-slate);
	--mh-footer-muted: var(--mh-slate);
	--mh-footer-tagline: var(--mh-slate);
	--mh-footer-divider: var(--mh-slate);
	--mh-footer-focus: var(--mh-slate);

	/* Type families ------------------------------------------------------ */
	--mh-font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
	--mh-font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

	--mh-weight-regular: 400;
	--mh-weight-semibold: 600;

	/* Fluid type scale (~1.25 near body, wider jumps for display) -------- */
	--mh-fs-eyebrow: clamp(0.72rem, 0.68rem + 0.2vw, 0.78rem);
	--mh-fs-small: 0.875rem;
	--mh-fs-micro: 0.625rem;        /* Placeholder captions in tight slots only. */
	--mh-fs-body: clamp(1.0625rem, 1.02rem + 0.22vw, 1.125rem);
	--mh-fs-lead: clamp(1.1875rem, 1.08rem + 0.55vw, 1.375rem);
	--mh-fs-h4: clamp(1.25rem, 1.14rem + 0.55vw, 1.5rem);
	--mh-fs-h3: clamp(1.5rem, 1.3rem + 0.98vw, 1.953rem);
	--mh-fs-h2: clamp(1.9rem, 1.53rem + 1.85vw, 2.75rem);
	--mh-fs-h1: clamp(2.5rem, 1.8rem + 3.2vw, 4rem);
	/* Service page h1. Smaller at phone width than --mh-fs-h1, so the longest
	   single word in a service name ("småbarnsföräldrar") fits 375px unbroken. */
	--mh-fs-h1-service: clamp(2rem, 1.5rem + 2.6vw, 3.5rem);

	--mh-lh-body: 1.7;
	--mh-lh-heading: 1.14;
	--mh-tracking-eyebrow: 0.12em;

	/* Spacing scale (4/8 base, in rem) ----------------------------------- */
	--mh-space-2xs: 0.25rem;
	--mh-space-xs: 0.5rem;
	--mh-space-sm: 0.75rem;
	--mh-space-md: 1rem;
	--mh-space-lg: 1.5rem;
	--mh-space-xl: 2rem;
	--mh-space-2xl: 3rem;
	--mh-space-3xl: clamp(4rem, 2.8rem + 6vw, 6rem);   /* Section rhythm. */
	--mh-space-section-tight: clamp(2.5rem, 1.9rem + 2.4vw, 3.5rem); /* Section rhythm on service pages, whose sections are short. */
	--mh-space-4xl: clamp(5rem, 3.2rem + 9vw, 8rem);   /* Hero. */

	/* Layout ------------------------------------------------------------- */
	--mh-container: 72rem;
	--mh-container-narrow: 52rem;
	--mh-container-header: 90rem;   /* Header only: logo, 6-7 menu items and the CTA need the room. */
	--mh-logo-height: 4rem;         /* 64px, the cap in the Logotyp field help. */
	--mh-logo-footer-height: 8.75rem; /* 140px, the footer lockup's cap. */
	--mh-hero-avatar: 7rem;         /* 112px, the round hero portrait on phones. */
	--mh-header-height: calc(var(--mh-logo-height) + 2 * var(--mh-space-sm));
	--mh-measure: 65ch;
	--mh-gutter: clamp(1.25rem, 0.9rem + 1.8vw, 2.5rem);

	/* Radii -------------------------------------------------------------- */
	--mh-radius-sm: 6px;
	--mh-radius: 12px;
	--mh-radius-lg: 20px;
	--mh-radius-pill: 999px;

	/* Elevation (soft, low-opacity slate) -------------------------------- */
	--mh-shadow: 0 1px 2px rgba(60, 72, 72, 0.04), 0 8px 24px rgba(60, 72, 72, 0.08);
	--mh-shadow-lg: 0 2px 4px rgba(60, 72, 72, 0.05), 0 18px 48px rgba(60, 72, 72, 0.12);
	--mh-shadow-header: 0 1px 0 rgba(60, 72, 72, 0.06), 0 6px 18px rgba(60, 72, 72, 0.07);

	/* Motion ------------------------------------------------------------- */
	--mh-transition: 180ms ease;

	/* Focus ring --------------------------------------------------------- */
	--mh-focus: var(--mh-terracotta);
	--mh-focus-width: 3px;
	--mh-focus-offset: 3px;
}