/*
 * Design tokens.
 *
 * Nothing anywhere else in this theme writes a hex value, a font name, a
 * font size or a section gap. If you find one, it belongs here.
 *
 * Only two colours are real: navy and the signature red. Everything else
 * is derived from navy with color-mix(), so changing the navy in the admin
 * settings screen carries the whole scale with it.
 *
 * Red is a signature, not a state. It appears as the rule under the header
 * and the short rule under section headings. It is never a button, never a
 * link, never an active state. Error states use --color-alert, which is a
 * different red on purpose so a validation message is not read as a call to
 * action.
 */

:root {
	/* --- The two real colours ----------------------------------------- */
	--color-navy: #14213a;
	--color-red: #d81e28;

	/* --- Derived from navy -------------------------------------------- */
	--color-navy-deep: color-mix(in srgb, var(--color-navy) 82%, #000);
	--color-navy-mid: color-mix(in srgb, var(--color-navy) 72%, #ffffff);
	--color-navy-soft: color-mix(in srgb, var(--color-navy) 62%, #ffffff);
	--color-navy-wash: color-mix(in srgb, var(--color-navy) 6%, #ffffff);
	/* Navy lifted toward a clear blue: a deep parliament blue for the far
	   end of a dark gradient. Follows navy if the palette changes. */
	--color-navy-bright: color-mix(in srgb, var(--color-navy) 70%, #2f63c4);

	/* --- Surfaces and text -------------------------------------------- */
	--color-surface: #f7f4ef;
	--color-surface-alt: #ffffff;
	--color-ink: #16181d;
	--color-ink-soft: color-mix(in srgb, var(--color-ink) 68%, #ffffff);
	--color-line: color-mix(in srgb, var(--color-navy) 16%, #ffffff);
	--color-line-strong: color-mix(in srgb, var(--color-navy) 34%, #ffffff);

	/* --- Feedback ------------------------------------------------------ */
	--color-alert: #b4453f;
	--color-success: #2f6b4f;

	/* --- Typefaces ------------------------------------------------------
	 * --font-ui carries the interface: labels, meta rows, buttons, filters.
	 * --font-display carries yacht names and section headings.
	 * The admin design screen swaps these two values and nothing else.
	 */
	--font-ui: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-display: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* --- Type scale -----------------------------------------------------
	 * One base and one ratio. Every step below is calculated, so "make the
	 * text a little bigger" is a change to --text-base alone.
	 */
	--text-base: 1.0625rem; /* 17px */
	--ratio: 1.26;

	--text-xs: calc(var(--text-base) / var(--ratio) * 0.94);
	--text-sm: calc(var(--text-base) / var(--ratio));
	--text-md: var(--text-base);
	--text-lg: calc(var(--text-base) * var(--ratio));
	--text-xl: calc(var(--text-lg) * var(--ratio));
	--text-2xl: calc(var(--text-xl) * var(--ratio));
	--text-3xl: calc(var(--text-2xl) * var(--ratio));
	--text-4xl: calc(var(--text-3xl) * var(--ratio));

	/* --- Weights -------------------------------------------------------- */
	--weight-light: 300;
	--weight-label: 400;
	--weight-regular: 400;
	--weight-medium: 500;

	/* --- Tracking -------------------------------------------------------
	 * Wide tracking on small uppercase text is what makes this design feel
	 * unhurried. These values are deliberate, not decoration.
	 */
	--track-label: 0.16em;
	--track-heading: 0.05em;
	--track-button: 0.18em;
	--track-body: 0;

	/* --- Line heights ---------------------------------------------------- */
	--leading-tight: 1.15;
	--leading-snug: 1.35;
	--leading-body: 1.65;

	/* --- Spacing ---------------------------------------------------------
	 * --space-section drives the rhythm between page sections. It shrinks on
	 * narrow screens further down.
	 */
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs: 0.75rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2.5rem;
	--space-xl: 4rem;
	--space-section: 8.75rem;

	/* --- Layout ----------------------------------------------------------- */
	--width-page: 82.5rem;
	--width-text: 40rem; /* keeps body copy under about 75 characters */
	--gutter: 1.25rem;

	/* --- Chrome ------------------------------------------------------------ */
	--header-bar-height: 4.75rem;
	/* Set from the real header height by header.js, so adding or removing
	   the announcement bar never leaves content sitting under the header.
	   The value here is only the starting point before the script runs. */
	--header-height: 7.75rem;
	--header-rule: 5px;
	--header-rule-gap: 3px;
	--logo-height: 2.4rem;
	--radius: 2px;
	--border-hair: 1px;

	/* --- Motion -------------------------------------------------------------
	 * Motion answers an action: a panel opening, the header returning. There
	 * are no scroll-triggered entrances in this theme.
	 */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--speed-fast: 160ms;
	--speed: 280ms;
	--speed-slow: 520ms;

	--z-header: 100;
	--z-overlay: 200;
	--z-sheet: 210;
}

@media (max-width: 60rem) {
	:root {
		--space-section: 5rem;
		--gutter: 1rem;
		--header-bar-height: 4.6rem;
		--header-height: 4.6rem;
		--header-rule: 4px;
		--logo-height: 2.55rem;
	}
}

/* Below 360px the wider logo would crowd the menu and search buttons, so it
   steps down. The bar keeps its height, so the header measure is unchanged. */
@media (max-width: 22.4375rem) {
	:root {
		--logo-height: 2rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--speed-fast: 1ms;
		--speed: 1ms;
		--speed-slow: 1ms;
	}
}