/**
 * Instinctive Health design tokens — the shared contract.
 *
 * THIS FILE IS THE SOURCE OF UNIFORMITY ACROSS THE FAMILY. It must be byte-for-
 * byte identical on mgppaz.com, fhmcaz.com, and elmirageer.com. Do not fork it
 * per site. A site-specific need goes in the child theme's brand.css as an
 * override, and if the same override appears on two sites it belongs here.
 *
 * 🔴 THE "MODERN" PALETTE, 2026-09-14. The client: *"handoff is source of
 * truth for all branding calls."* These values come from the Claude Design
 * handoff packet issued for every site in the family. They replace a palette
 * that had been measured from the pre-rebuild sites — which was the right
 * basis then and is superseded now.
 *
 *   WAS (measured from the old sites)    NOW (the handoff)
 *   #C0212F primary red                  #BE1E2D
 *   #B32733 secondary red                #A31A27
 *   #8E1823 deep red                     #871521
 *   #F4D7DA red wash                     #FBEAEC
 *   #110204 near-black                   #2B2A29
 *   #595A5C body grey                    #4C4A48
 *   Rethink Sans throughout              Manrope display / Source Sans 3 body
 *
 * CONTRAST, MEASURED before this was committed — every colour against all
 * three backgrounds it is actually painted on, rather than against white with
 * a qualifier underneath. Two sessions computed these independently, from
 * different repos, and agreed to the hundredth.
 *
 *   token                      white   ground   tint
 *   --ih-brand      #BE1E2D     6.15    6.00    5.30
 *   --ih-brand-alt  #A31A27     7.68    7.49    6.61
 *   --ih-brand-deep #871521     9.72    9.49    8.37
 *   --ih-ink        #2B2A29    14.33   13.98   12.34
 *   --ih-slate      #4C4A48     8.82    8.61    7.60
 *   --ih-muted      #6C6966     5.45    5.32    4.70
 *
 * "ground" is --ih-grey-100 (#FDFCFB); "tint" is --ih-brand-tint (#FBEAEC).
 * Everything passes AA. Nothing is AAA for body text any more — the old ink
 * was 19.7:1 against this 14.33:1 — and that softening is the handoff's
 * deliberate choice rather than drift.
 *
 * 🟢 THIS RETIRES A LIVE DEFECT rather than inheriting one. The previous
 * palette put `--ih-brand` on `--ih-brand-tint` at **4.45:1, failing AA**, and
 * survived only by a standing rule that text on tint must use
 * `--ih-brand-deep`. That was found the hard way: `.btn--ghost` rendered at
 * 4.45 on `.notice` — a miss by five hundredths, on a colour whose own
 * documentation advertised 6.0:1, because the "against white" qualifier sat
 * one line above a list of bare numbers. The equivalent pair is now 5.30 and
 * passes, so the rule becomes a preference instead of a load-bearing
 * workaround. The three-column table above exists so that qualifier can never
 * be skipped again.
 *
 * ⚠️ THE BINDING CONSTRAINT MOVED, and this is the line to read before
 * changing any value above. The tightest pair is now **--ih-muted on the tint
 * at 4.70**, with --ih-muted on the ground behind it at 5.32. Small print on a
 * tinted panel is where this palette breaks first: lighten that grey or warm
 * the ground and you cross 4.5 before anything else complains.
 */

:root {
	/* ---- Brand ---- */
	--ih-brand: #be1e2d;
	--ih-brand-alt: #a31a27;
	--ih-brand-deep: #871521;
	--ih-brand-tint: #fbeaec;

	/* ---- Neutrals ---- */
	--ih-ink: #2b2a29;
	--ih-slate: #4c4a48;
	--ih-muted: #6c6966;
	--ih-grey-100: #fdfcfb;
	--ih-grey-200: #f7f3f1;
	--ih-grey-300: #efeae8;

	/*
	 * A border that has to be SEEN rather than merely separate.
	 * `--ih-grey-300` is the divider grey and is nearly invisible as an
	 * outline on white — right for a rule between two rows, wrong for the
	 * edge of a control somebody is meant to click. The handoff uses this
	 * darker grey for exactly two things: the outline-pill border ("border
	 * 1.5px #d9d2cf") and the top rule on the CMS comparison stat card.
	 */
	--ih-grey-400: #d9d2cf;
	--ih-white: #ffffff;

	/* ---- Semantic ---- */
	--ih-text: var(--ih-ink);
	--ih-text-muted: var(--ih-slate);
	--ih-surface: var(--ih-white);
	--ih-surface-alt: var(--ih-grey-100);
	--ih-surface-sunk: var(--ih-grey-200);
	--ih-border: var(--ih-grey-300);
	--ih-accent: var(--ih-brand);
	--ih-accent-hover: var(--ih-brand-deep);

	/**
	 * Optional per-facility accent.
	 *
	 * Defaults to the shared brand red, which is the intended state: the family
	 * looks like one organisation. A child theme may override --ih-facility in
	 * brand.css if a site ever needs wayfinding of its own. Uniform by default,
	 * one knob if that changes.
	 */
	--ih-facility: var(--ih-brand);

	/*
	 * Focus ring. Never remove.
	 *
	 * ⚠️ THE OLD ONE-LINER HERE CLAIMED "high contrast against both white and
	 * brand red" AND THAT WAS NEVER TRUE. Measured: 8.00:1 on white, 7.80:1 on
	 * the ground — and **1.30:1 on the brand red**, which is invisible. It was
	 * 1.33:1 against the previous red, so the re-theme did not introduce it.
	 *
	 * What actually saves it is `outline-offset: 2px` in base.css: the ring is
	 * drawn OUTSIDE the element, on the page background, never on the button
	 * fill. The colour is fine; the claim about why was wrong. If anyone ever
	 * removes that offset, this token stops working on every red control at
	 * once and the comment would have told them it was safe.
	 */
	--ih-focus: #0b4f9e;
	--ih-focus-width: 3px;

	/**
	 * Typography — Manrope for display, Source Sans 3 for body. Self-hosted in
	 * assets/fonts/, @font-face in base.css.
	 *
	 * From the handoff, 2026-09-14, replacing Rethink Sans. The previous note
	 * is worth keeping in outline because it explains why the swap is cheap:
	 * Rethink Sans was itself chosen in 2026-09-12 to match what fhmcaz.com's
	 * stylesheet was already overriding Elementor with, displacing a declared
	 * Roboto that shipped NO font files and therefore only ever rendered for
	 * visitors who happened to have it installed. This family has changed its
	 * declared typeface twice; only once has it shipped the binaries.
	 *
	 * 🔴 THE TWO TOKENS NOW NAME DIFFERENT FAMILIES, which they never have
	 * before. The old note explained that both were deliberately the same face
	 * because "a serif there would change the voice rather than preserve it".
	 * That reasoning is intact — Manrope is also a sans — but hierarchy no
	 * longer comes from weight and size alone, so a component that wants
	 * display treatment must actually say `var(--ih-font-display)`. Anything
	 * that previously relied on the two being interchangeable will now render
	 * in the body face and look subtly wrong rather than break.
	 *
	 * Three files for two faces, and the count is not obvious: both are
	 * VARIABLE, so one file carries a whole weight axis — but a weight axis
	 * does NOT include italic. Slant is a separate axis served as a separate
	 * face, so Source Sans 3 needs an upright and an italic. Manrope ships
	 * upright only and nothing sets headings in italic.
	 */
	--ih-font-sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--ih-font-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

	/* Fluid type scale — clamp() so there are no per-breakpoint font sizes */
	--ih-text-sm: 0.875rem;

	/*
	 * Card body copy — 15px, its own step between `sm` (14px) and `base`
	 * (17px), because the handoff sets all three separately: "base 17px/28px;
	 * card body 15px/25px; small 13–14.5px".
	 *
	 * Not a rounding of either neighbour. A card is a scannable unit with a
	 * heading two steps above it: at `base` the excerpt competes with its own
	 * title, at `sm` it reads as a caption. The paired leading matters as much
	 * as the size — 25/15 is 1.667, looser than the 1.65 body ratio, because a
	 * short measure inside a card needs the extra leading to stay scannable.
	 */
	--ih-text-card: 0.9375rem;
	--ih-leading-card: 1.667;
	--ih-text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
	--ih-text-lg: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
	--ih-text-xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
	--ih-text-2xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
	--ih-text-3xl: clamp(2.125rem, 1.7rem + 2.1vw, 3.5rem);

	--ih-leading-tight: 1.15;
	--ih-leading-snug: 1.35;
	--ih-leading-normal: 1.65;

	--ih-weight-normal: 400;
	--ih-weight-medium: 500;

	/*
	 * 600, which the handoff uses constantly and this scale had no value for:
	 * the navigation links, the utility bar's status line and its phone links
	 * are all "font-weight: 600" in the drawings. They had been rounded to
	 * 500, the nearest token, which renders a step lighter than every
	 * prototype.
	 */
	--ih-weight-semibold: 600;
	--ih-weight-bold: 700;

	/*
	 * Display weight, used by headings. Separate from --ih-weight-bold because
	 * 700 is what BODY copy means by bold (a <strong> inside a paragraph) and
	 * 800 is what a heading means by it. One value for each meaning, so
	 * changing one does not silently change the other.
	 */
	--ih-weight-display: 800;

	/* ---- Spacing (4px base) ---- */
	--ih-space-1: 0.25rem;
	--ih-space-2: 0.5rem;
	--ih-space-3: 0.75rem;
	--ih-space-4: 1rem;
	--ih-space-5: 1.5rem;
	--ih-space-6: 2rem;
	--ih-space-7: 3rem;
	--ih-space-8: 4rem;
	--ih-space-9: 6rem;

	/* ---- Layout ---- */
	--ih-container: 1180px;
	--ih-container-narrow: 760px;
	/*
	 * 🔴 THE PACKET'S OWN FIGURE, IN px: "side padding clamp(20px,5vw,64px)",
	 * and every prototype carries `padding: 0 clamp(20px, 5vw, 64px)`. This
	 * was `clamp(1rem, 4vw, 2.5rem)` — narrower at both ends, and in `rem`.
	 *
	 * ⚠️ THE UNIT MATTERS MORE THAN THE NUMBERS, because this is the padding
	 * on `.container`, which is to say on every section of every page. In
	 * `rem` it scales with text and the clamp's MINIMUM is what binds on a
	 * phone: at 200% text `1rem` becomes 32px, so a 320px screen loses 64px
	 * to gutters before anything is drawn. The packet's 20px minimum does not
	 * move, and costs 40px.
	 *
	 * Reported by the Mercy Grace session, which measured the same token
	 * wrapping every section on every page of their site. Same reasoning as
	 * the chrome padding at the top of components.css: text must scale,
	 * structural padding must not, and here the packet's unit and the
	 * accessible unit are again the same one.
	 */
	--ih-gutter: clamp(20px, 5vw, 64px);

	/*
	 * The reading measure for long-form prose. Interior pages render in the
	 * FULL container since 2026-09-13 (the client: pages were "squeezed into
	 * the middle"), so this token is what keeps a paragraph readable inside
	 * it — applied per text child in base.css while visual components span.
	 *
	 * 🔴 `rem`, NOT `ch`, AND THE FIRST DEPLOY PROVED WHY. As `70ch` on
	 * `.entry-content > *`, the unit resolved against EACH CHILD'S OWN FONT:
	 * paragraphs capped at 714px, the blockquote at 840px, and every h2 at
	 * 1624px — three different "one measure" edges on the first page
	 * measured, which is the exact two-edges defect this token exists to
	 * prevent, reintroduced by the unit. A custom property's font-relative
	 * units resolve at the point of USE, not where the token is declared.
	 * 45rem ≈ the intended 70ch of body text, resolves identically on every
	 * child, and still scales with a reader's enlarged root font size.
	 *
	 * 🔴 KEPT AGAINST THE HANDOFF, ON THE CLIENT'S EXPLICIT INSTRUCTION —
	 * "go ahead with the re-theme, keep the reading measure", 2026-09-14.
	 *
	 * The handoff packet says the opposite in as many words: "Never
	 * artificially narrow headings or paragraphs (no ch-based max-widths —
	 * text uses container width)." Since the same client also said the handoff
	 * is the source of truth for branding calls, a later reader will find the
	 * two instructions in conflict and may "correct" this back. They should
	 * not. The specific instruction was given about this token, after seeing
	 * the packet, and it is the narrower of the two.
	 *
	 * The reason it was asked for: a 1180px line of 17px text runs past 140
	 * characters, and comfortable reading is 45-75. This is also NOT the
	 * setting that caused the "squeezed into the middle" complaint — that was
	 * the whole container being narrowed, fixed by letting visual components
	 * span while only prose keeps a measure. Widening this token would not
	 * undo that fix; it would only lengthen the lines.
	 */
	--ih-measure: 45rem;

	/* ---- Form ---- */
	--ih-radius-sm: 4px;
	--ih-radius: 8px;
	--ih-radius-lg: 20px;
	--ih-radius-pill: 999px;

	/*
	 * The icon-chip radius, 12px, from the handoff ("icon chips: 40–44px
	 * square, 11–12px radius").
	 *
	 * A named token rather than reusing --ih-radius (8px, too tight at 44px
	 * and reads as a rounded box) or --ih-radius-lg (20px, which at 44px is
	 * most of the way to a circle and loses the squareness the handoff asks
	 * for). Neither existing step is this value, and a literal repeated across
	 * every chip is how a scale drifts.
	 */
	--ih-radius-chip: 12px;

	/*
	 * A border drawn ON the red tint. The handoff names it separately from the
	 * fill because --ih-border (#EFEAE8, a warm grey) disappears against
	 * #FBEAEC — the two are close enough in luminance that a 1px line between
	 * them is invisible at normal viewing distance.
	 */
	--ih-brand-tint-border: #f6d5d9;

	--ih-shadow-sm: 0 2px 6px rgba(32, 30, 29, 0.04);
	--ih-shadow: 0 6px 18px rgba(32, 30, 29, 0.05);
	/*
	 * A card floating ON a photograph, which is a different problem from a
	 * card sitting on the page. `--ih-shadow` is 5% alpha and disappears over
	 * an image; `--ih-shadow-lg` is the 30% popup elevation and reads as a
	 * modal. The handoff gives the hero's "Open 24/7" chip a value between
	 * them, and this is it.
	 */
	--ih-shadow-float: 0 12px 32px rgba(32, 30, 29, 0.18);

	/*
	 * The hover lift, from the handoff's "Hover lift" section (added to the
	 * packet 2026-09-14): "hover transform: translateY(-4px) + box-shadow:
	 * 0 16px 34px rgba(32,30,29,0.13)".
	 *
	 * Distinct from `--ih-shadow-lg`, which the card hover had been borrowing.
	 * That is the 30%-alpha popup elevation and it made a hovered card read as
	 * a modal; this is 13%, a lift rather than a layer change.
	 */
	--ih-shadow-hover: 0 16px 34px rgba(32, 30, 29, 0.13);

	--ih-shadow-lg: 0 24px 64px rgba(32, 30, 29, 0.3);

	/*
	 * The hovered card, added by the handoff's 2026-09-14 revision. That
	 * revision changed exactly one thing across every page: every white card
	 * gained a 4px lift and this shadow.
	 *
	 * ⚠️ NOT `--ih-shadow-lg`, which is what the card hover used before and is
	 * nearly three times the opacity at 0.30. That token belongs to things
	 * that float ABOVE the page — the dropdown, the corner notice — and
	 * borrowing it here made a hovered card look like it had detached. This
	 * one is a lift, not a layer change.
	 */
	--ih-shadow-hover: 0 16px 34px rgba(32, 30, 29, 0.13);

	/* The handoff's lift distance, shared by every card-like component. */
	--ih-lift: -4px;

	/*
	 * The primary call-to-action carries a red-tinted shadow rather than a
	 * neutral one, so the button reads as lifted off the page rather than
	 * merely dark underneath. Separate token because every other elevation in
	 * the system is neutral and should stay that way.
	 */
	--ih-shadow-cta: 0 10px 24px rgba(190, 30, 45, 0.28);

	/*
	 * A small element floating ON a photograph — the hero's "Open 24/7/365"
	 * chip. Nothing covered this middle elevation: `--ih-shadow` at 5% simply
	 * vanishes over an image, and `--ih-shadow-lg` at 30% is the popup's
	 * elevation and reads as a dialog that has landed on the hero.
	 */
	--ih-shadow-float: 0 12px 32px rgba(32, 30, 29, 0.18);

	/* ---- Motion (routed through here so reduced-motion can zero it) ---- */
	--ih-duration: 180ms;
	--ih-ease: cubic-bezier(0.2, 0, 0.2, 1);

	/* Minimum touch target (WCAG 2.5.5) */
	--ih-touch: 44px;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--ih-duration: 0ms;
	}
}