/**
 * Design tokens — Adapt Theme
 *
 * Single source of truth for the frontend, mirroring theme.json's editor-facing
 * settings (spec Section 8.3: "theme.json and CSS variables are linked, not
 * duplicated ... one source of truth, expressed in two places WordPress
 * requires it"). If a value changes here, the matching value in theme.json
 * changes too.
 *
 * Colour hex values, the six-entry palette (five brand colours plus White),
 * and the approved/prohibited pairings are Section 4.3. Container widths and
 * the focus ring are Section 4.6 and Section 4.3. This file defines tokens
 * only — no component rules. Components live in components.css.
 */

:root {

	/* ---- Colour palette (Section 4.3) -------------------------------- */
	--color-adapt-blue: #0B00DD;
	--color-deep-navy: #03111E;
	--color-slate: #3D4659;
	--color-light-grey: #D6DAE1;
	--color-warm-background: #FAF6F3;
	--color-white: #FFFFFF;

	/* One additional neutral, permitted for form/focus states only
	   (Section 4.3) — never used as a design colour. */
	--color-error: #B3261E;

	/* Semantic aliases. Deep Navy is the primary body-text colour
	   (Section 4.3, N3); Light Grey is never used as text. */
	--color-text: var(--color-deep-navy);
	--color-text-secondary: var(--color-slate);
	--color-background: var(--color-white);
	--color-background-alt: var(--color-warm-background);
	--color-border: var(--color-light-grey);
	--color-link: var(--color-adapt-blue);

	/* ---- Focus ring (Section 4.3) ------------------------------------- */
	--focus-ring-color: var(--color-adapt-blue);
	--focus-ring-width: 2px;
	--focus-ring-offset: 2px;

	/* ---- Typography (Section 4.4) -------------------------------------
	   Family stacks match theme.json's fontFamilies exactly. Weights are
	   restricted to the ones actually shipped in assets/fonts/. */
	--font-heading: "Plus Jakarta Sans", sans-serif;
	--font-body: Roboto, sans-serif;

	--font-weight-heading-semibold: 600;
	--font-weight-heading-bold: 700;
	--font-weight-body-regular: 400;
	--font-weight-body-medium: 500;
	--font-weight-body-bold: 700;

	--line-height-heading: 1.15;   /* Section 4.4: heading ~1.1-1.2 */
	--line-height-body: 1.55;      /* Section 4.4: body ~1.5-1.6 */

	/* Type scale — mirrors theme.json settings.typography.fontSizes.
	   No numeric scale is given by the specification (Section 4.4 states
	   the hierarchy: H1/H2/H3/Body, not sizes); this scale is a build
	   detail approved for Phase 2. */
	--font-size-body: 1rem;
	--font-size-body-large: 1.125rem;
	--font-size-h3: 1.5rem;
	--font-size-h2: 2rem;
	--font-size-h1: 2.75rem;

	/* ---- Spacing scale (Section 4.6) -----------------------------------
	   Mirrors theme.json settings.spacing.spacingSizes exactly. */
	--space-2xs: 0.25rem;
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2rem;
	--space-xl: 3rem;
	--space-2xl: 4rem;
	--space-3xl: 6rem;

	/* ---- Layout (Section 4.6) -------------------------------------------
	   Max content width ~1200-1280px; long-form reading width ~700-800px. */
	--content-max-width: 1280px;
	--content-reading-width: 750px;

	/* ---- Radius ---------------------------------------------------------
	   Not specified numerically anywhere in Section 4; a single conservative
	   default consistent with "premium through simplicity" (Section 4.6). */
	--radius-sm: 4px;
	--radius-md: 8px;
}

/* =====================================================================
 * RESPONSIVE CONTRACT (added Wave 5, 2026-08-02)
 *
 * Two breakpoints, sitewide, owner-approved:
 *
 *     768px    mobile  -> tablet
 *     1024px   tablet  -> desktop
 *
 * WHY THESE ARE LITERAL VALUES AND NOT TOKENS
 *
 * Every other design value in this file is a custom property, and a
 * reader will reasonably ask why these two are not. The answer is a CSS
 * limitation, not an inconsistency: custom properties are not permitted
 * in media query conditions. `@media (min-width: var(--bp-tablet))` does
 * not work in any browser — the var() is not substituted while the
 * condition is evaluated. The `@custom-media` rule that would fix this
 * is not baseline and would need a build step, which Section 8.8 rules
 * out ("no build step").
 *
 * So the two numbers are written literally at each use site, and this
 * block is the single place that says what they mean. If they ever
 * change, grep for "768px" and "1024px" in assets/css/.
 *
 * DIRECTION CONVENTION, so ranges never overlap or leave a 1px gap:
 *
 *   Design tokens below use MAX-WIDTH (desktop-first). :root must hold
 *   the desktop values because Section 8.3 requires this file to mirror
 *   theme.json's fontSizes, and theme.json has no responsive concept —
 *   whichever value sits in :root is the one the block editor shows.
 *   Overrides therefore step DOWN from it.
 *
 *   Components use MIN-WIDTH (mobile-first), so the smallest device
 *   parses the least CSS.
 *
 *   Boundaries are 767.98px / 1023.98px on the max-width side against
 *   768px / 1024px on the min-width side, so no viewport ever matches
 *   both or neither.
 * ===================================================================== */

/* ---- Responsive type scale (Section 4.4: "maintain readability on
   mobile") -------------------------------------------------------------

   The desktop scale above is unchanged and remains theme.json's mirror.
   These are the same scale stepped down, not a different one, and only
   the heading sizes move.

   --font-size-body never shrinks. Body copy stays at 1rem at every
   width; reducing it is the opposite of the readability this exists for.

   Measured cause, not a precaution: at 375px the hub's h1 ("Sports
   Physiotherapy Services & Injury Guides") rendered at 44px across FOUR
   lines, 202px tall — 25% of the viewport height consumed by one
   heading before any content. At 2rem the same heading is 110px. */

@media (max-width: 1023.98px) {

	:root {
		--font-size-h1: 2.25rem;
		--font-size-h2: 1.75rem;
		--font-size-h3: 1.375rem;
	}
}

@media (max-width: 767.98px) {

	:root {
		--font-size-h1: 2rem;
		--font-size-h2: 1.5rem;
		--font-size-h3: 1.25rem;
	}
}