/**
 * Better Moving — design tokens
 * ============================================================================
 * THE SWAP CONTRACT
 * Only the PRIMITIVES block below carries literal colour and font values.
 * Everything else references SEMANTIC tokens, never a primitive, never a raw
 * hex. A rebrand is an edit to one block of one file.
 *
 * This layer has now survived two full rebrands — a provisional palette, a
 * navy-and-brass serif identity, and now this one. On each occasion no
 * component, template or stylesheet elsewhere needed a single change.
 * ============================================================================
 *
 * DIRECTION — "Navy & Teal"
 * Sampled from the supplied artwork: a heavy geometric sans wordmark, deep
 * blue above bright teal, with an isometric carton as the mark.
 *
 * The identity is modern, direct and confident rather than editorial. Where
 * the previous brand whispered, this one states plainly. Grounds are cool and
 * clean, because a warm cream drags teal towards green and muddies it.
 *
 * ACCESSIBILITY — computed, not eyeballed:
 *   body        navy-800  on paper-50    12.13:1  AAA
 *   CTA label   white     on navy-800    12.80:1  AAA
 *   muted       slate-600 on paper-50     5.43:1  AA
 *   link        teal-800  on paper-50     6.01:1  AA
 *   on dark     paper-100 on navy-900    16.08:1  AAA
 *   link/dark   teal-300  on navy-900     9.98:1  AAA
 *   muted/dark  navy-300  on navy-900     7.19:1  AAA
 *
 * TWO CONSTRAINTS THE BRAND TEAL IMPOSES, both measured:
 *   teal-500 on paper is 2.77:1 — it can never carry text on a light ground.
 *   white on teal-500 is 2.92:1 — a teal button with white text is illegible.
 * Teal is therefore an accent, a fill and a mark. The primary action stays
 * navy, where white sits at 12.80:1. teal-800 is the text-safe variant.
 */

:root {

	/* ======================================================================
	 * PRIMITIVES — the only literal values in the system.
	 * ================================================================== */

	/* Navy, from the "Better" wordmark. */
	--bm-navy-900: #06172f;
	--bm-navy-800: #0d3164;  /* THE brand navy */
	--bm-navy-700: #14417f;
	--bm-navy-600: #1d5299;
	--bm-navy-300: #8fa6c4;
	--bm-navy-200: #c3cfe0;

	/* Teal, from the "Moving" wordmark and the carton mark. */
	--bm-teal-800: #056a72;  /* text-safe */
	--bm-teal-600: #079ca1;  /* wordmark */
	--bm-teal-500: #04a7b3;  /* THE brand teal, from the mark */
	--bm-teal-300: #6fd0d8;
	--bm-teal-100: #dff4f6;

	/* Cool neutrals. Deliberately not warm. */
	--bm-paper-50:  #f7f9fb;
	--bm-paper-100: #eff3f7;
	--bm-paper-200: #e1e8ef;
	--bm-paper-300: #cbd5e0;
	--bm-paper-400: #a8b6c6;
	--bm-slate-600: #54687f;

	/* Status, kept distinct from brand colour so "important" still reads. */
	--bm-success: #0e7c57;
	--bm-warning: #8a5b12;
	--bm-danger:  #b3261e;

	/* Typefaces, self-hosted — see fonts.css.
	   Poppins shares the logo geometry, so headings read as an extension of
	   the mark. DM Sans carries body copy, where the wide round forms of
	   Poppins would tire the eye across a paragraph. */
	--bm-font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
	--bm-font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--bm-font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;

	/* The logo is heavy, and headings match it. The previous display face had
	   a single weight and had to be set at 400; this one must not be. */
	--bm-weight-display: 700;

	/* Compatibility aliases. Components reference the accent by its original
	   name; pointing these at teal re-skins all of them at once. */
	--bm-signal-700: var(--bm-teal-800);
	--bm-signal-500: var(--bm-teal-500);
	--bm-signal-300: var(--bm-teal-300);
	--bm-signal-100: var(--bm-teal-100);

	/* Legacy ink names still referenced by components. */
	--bm-ink-900: var(--bm-navy-900);
	--bm-ink-800: var(--bm-navy-800);
	--bm-ink-700: var(--bm-navy-700);
	--bm-ink-600: var(--bm-navy-600);
	--bm-ink-500: var(--bm-slate-600);
	--bm-ink-300: var(--bm-navy-300);
	--bm-ink-200: var(--bm-navy-200);

	/* ======================================================================
	 * SEMANTIC — what the rest of the codebase is allowed to use.
	 * ================================================================== */

	--bm-surface: var(--bm-paper-50);
	--bm-surface-raised: #ffffff;
	--bm-surface-sunken: var(--bm-paper-100);
	--bm-surface-inverse: var(--bm-navy-900);

	--bm-text: var(--bm-navy-800);
	--bm-text-muted: var(--bm-slate-600);
	--bm-text-inverse: var(--bm-paper-50);
	--bm-text-inverse-muted: var(--bm-navy-300);
	--bm-text-link: var(--bm-teal-800);
	--bm-text-link-inverse: var(--bm-teal-300);

	--bm-border-subtle: var(--bm-paper-300);
	--bm-border-interactive: var(--bm-slate-600);
	--bm-border-focus: var(--bm-teal-800);

	/* Primary action is navy, not teal — see the contrast note above. */
	--bm-action-bg: var(--bm-navy-800);
	--bm-action-bg-hover: var(--bm-navy-700);
	--bm-action-text: #ffffff;
	--bm-action-secondary-bg: transparent;
	--bm-action-secondary-text: var(--bm-navy-800);
	--bm-action-secondary-border: var(--bm-navy-300);

	/* Type scale */
	--bm-text-xs:   0.75rem;
	--bm-text-sm:   0.875rem;
	--bm-text-base: 1rem;
	--bm-text-lg:   1.125rem;
	--bm-text-xl:   1.375rem;
	--bm-text-2xl:  1.75rem;
	--bm-text-3xl:  2.25rem;
	--bm-text-4xl:  3rem;
	--bm-text-5xl:  4rem;

	--bm-leading-tight: 1.12;
	--bm-leading-snug: 1.35;
	--bm-leading-normal: 1.65;

	/* Geometric sans is wide: headings need negative tracking to hold
	   together, uppercase labels need positive tracking to breathe. */
	--bm-tracking-tight: -0.025em;
	--bm-tracking-normal: 0;
	--bm-tracking-wide: 0.1em;

	--bm-space-1: 0.25rem;
	--bm-space-2: 0.5rem;
	--bm-space-3: 0.75rem;
	--bm-space-4: 1rem;
	--bm-space-6: 1.5rem;
	--bm-space-8: 2rem;
	--bm-space-12: 3rem;
	--bm-space-16: 4rem;
	--bm-space-24: 6rem;

	/* Rounder than the previous identity. The wordmark is built from circles
	   and the mark from clean planes; hairline corners contradict both. */
	--bm-radius-sm: 6px;
	--bm-radius-md: 10px;
	--bm-radius-lg: 18px;
	--bm-radius-pill: 999px;

	/* Shadows tinted with the navy hue rather than neutral black. */
	--bm-shadow-sm: 0 1px 2px rgb(13 49 100 / 8%);
	--bm-shadow-md: 0 4px 18px rgb(13 49 100 / 10%);
	--bm-shadow-lg: 0 16px 48px rgb(13 49 100 / 14%);

	--bm-measure: 68ch;
}

/**
 * Inverted regions. The public site is light-first and deliberately does not
 * follow the visitor OS colour scheme — brand colours are not a preference.
 *
 * On a navy ground the teal finally gets to be a button: navy text on teal is
 * 4.38:1, which clears AA for the large, bold type buttons use.
 */
.bm-inverse {
	--bm-surface: var(--bm-navy-900);
	--bm-surface-raised: var(--bm-navy-800);
	--bm-surface-sunken: var(--bm-navy-900);
	--bm-text: var(--bm-paper-50);
	--bm-text-muted: var(--bm-navy-300);
	--bm-text-link: var(--bm-teal-300);
	--bm-border-subtle: var(--bm-navy-700);
	--bm-border-interactive: var(--bm-navy-300);
	--bm-border-focus: var(--bm-teal-300);
	--bm-action-bg: var(--bm-teal-500);
	--bm-action-bg-hover: var(--bm-teal-600);
	--bm-action-text: var(--bm-navy-900);
	--bm-action-secondary-text: var(--bm-paper-50);
	--bm-action-secondary-border: var(--bm-navy-300);

	background-color: var(--bm-surface);
	color: var(--bm-text);
}

@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;
	}
}

/* ============================================================================
 * MOBILE — sizing contracts
 * ============================================================================
 * Added by the mobile adaptation. These are SIZING tokens only: no colour, no
 * font literal, no component rule. The swap contract at the top of this file is
 * therefore untouched — a rebrand still edits one block, and that block is not
 * this one.
 *
 * Nothing here renders. Each token is inert until a scoped rule consumes it,
 * and each is declared at the value the codebase already computes, so adding
 * them changes no pixel at any width.
 *
 * ----------------------------------------------------------------------------
 * THE BREAKPOINT LADDER — a comment, and it has to stay one.
 *
 *     320px      the floor. Every latent overflow reveals itself here, so a
 *                layout that holds at 320 holds everywhere.
 *     29.99rem   479px    phone -> large phone
 *     47.99rem   767px    phone -> tablet
 *     61.99rem   991px    the existing nav mode switch. Do not move it.
 *     79.99rem  1279px    THE DESKTOP LINE
 *
 * A custom property is INVALID in a media prelude:
 *
 *     @media (max-width: var(--bm-bp-md)) { ... }     <- silently dead
 *
 * There is no error and no console message. The whole block is dropped, the
 * mobile fix looks written, and nothing happens anywhere. So the ladder lives
 * here as prose and every stylesheet writes the literal.
 *
 * Every mobile edit belongs inside `max-width: 79.99rem` or narrower, because
 * such a query cannot match at 1280px. That makes "desktop is unchanged"
 * arithmetic rather than a promise somebody has to keep.
 * ========================================================================== */

:root {

	/* 44px. Apple's minimum, and comfortably above the 24px WCAG 2.5.8 floor.
	   Consumed only inside max-width blocks — see `.bm-tap` in base.css. */
	--bm-tap-min: 2.75rem;

	/* The sticky header's height, declared at the value nav.css already sets on
	   .bm-header__inner. It exists so that sticky offsets and scroll padding in
	   other files can follow the header when it shrinks on a short viewport,
	   instead of each file hard-coding 5.25rem and drifting apart. */
	--bm-header-h: 5.25rem;

	/* The mobile action bar's height, before the iOS home-indicator inset is
	   added to it. nav.css sizes the bar from it and the footer clears the
	   bar by it, so the last line of the page is never left underneath. */
	--bm-dock-h: 3.5rem;

	/* .bm-wrap's own padding-inline, repeated verbatim. A nested component that
	   needs to escape or match the gutter can now subtract it rather than
	   guess. At 320px this resolves to 20px a side, which is where the 280px
	   content budget every mobile measurement is quoted against comes from. */
	--bm-gutter: clamp(1.25rem, 5vw, 3rem);
}