/**
 * 438 Main — Design tokens
 * ---------------------------------------------------------------------------
 * The single source of truth for colour, type, space, motion and edges.
 * Nothing else in the theme should contain a raw hex value, a magic pixel
 * number, or a bespoke easing curve.
 *
 * Fluid values use clamp() with vw-based middles so the design breathes between
 * 360px and 1600px without a stack of breakpoints. The min/max ends are chosen
 * so text never drops below comfortable reading size on a phone and never grows
 * beyond an elegant measure on a large display.
 */

:root {
	/* ---------------------------------------------------------------------
	 * Colour — warm neutrals, one deep green, no gold-on-black.
	 * ------------------------------------------------------------------ */
	--c-ink:            #242522;  /* Charcoal — body text, hairlines          */
	--c-forest:         #29372f;  /* Deep Forest — dark sections, primary CTA */
	--c-forest-deep:    #1e2922;  /* Closing CTA ground                       */
	--c-ivory:          #f4f1eb;  /* Warm Ivory — alternating section ground  */
	--c-white:          #faf9f6;  /* Soft White — default page ground         */
	--c-grey:           #aaa69d;  /* Warm Grey — muted UI, dividers           */
	--c-sand:           #d8d2c6;  /* Sand — location band, media placeholders */

	/* Functional colour, derived so a palette change propagates. */
	--c-text:           var(--c-ink);
	--c-text-muted:     #5c5f57;                    /* 5.4:1 on Soft White   */
	--c-text-on-dark:   rgba(255, 255, 255, 0.92);
	--c-text-on-dark-muted: rgba(255, 255, 255, 0.74); /* 6.1:1 on Forest    */
	--c-bg:             var(--c-white);
	--c-line:           rgba(36, 37, 34, 0.14);
	--c-line-strong:    rgba(36, 37, 34, 0.28);
	--c-line-on-dark:   rgba(255, 255, 255, 0.22);

	/* Status colour. Never the only signal — always paired with text. */
	--c-available:      #3f6b4c;  /* 4.9:1 on Soft White                     */
	--c-pending:        #8a6a2f;  /* 4.6:1 on Soft White                     */
	--c-occupied:       #6d6a63;
	--c-focus:          #1c5f8f;  /* High-contrast focus ring, non-brand      */

	/* ---------------------------------------------------------------------
	 * Typography
	 * ------------------------------------------------------------------ */
	--font-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype",
		Palatino, Georgia, "Times New Roman", serif;
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Helvetica, Arial, sans-serif;

	/* Display scale — tight, editorial. */
	--fs-display-xl: clamp(3.25rem, 9.5vw, 7rem);     /* hero headline       */
	--fs-display-l:  clamp(2.75rem, 6.4vw, 5.25rem);  /* section headline    */
	--fs-display-m:  clamp(2.25rem, 4.6vw, 3.75rem);  /* sub-section         */
	--fs-display-s:  clamp(1.5rem, 2.4vw, 1.9rem);    /* card title          */

	/* Body scale. */
	--fs-lead:  clamp(1.0625rem, 0.55vw + 0.95rem, 1.25rem);
	--fs-body:  1rem;
	--fs-small: 0.875rem;
	--fs-micro: 0.75rem;
	--fs-eyebrow: 0.6875rem;

	--lh-display: 0.94;
	--lh-tight:   1.15;
	--lh-body:    1.7;

	--ls-display: -0.035em;
	--ls-eyebrow: 0.2em;
	--ls-button:  0.08em;

	/* Optical measure limits — the real guardrail on readability. */
	--measure-lead: 34ch;
	--measure-body: 62ch;

	/* ---------------------------------------------------------------------
	 * Space — a 4px-derived scale plus fluid section rhythm.
	 * ------------------------------------------------------------------ */
	--sp-1:  0.25rem;
	--sp-2:  0.5rem;
	--sp-3:  0.75rem;
	--sp-4:  1rem;
	--sp-5:  1.5rem;
	--sp-6:  2rem;
	--sp-7:  3rem;
	--sp-8:  4rem;
	--sp-9:  6rem;
	--sp-10: 8rem;

	/* Vertical rhythm between full-width sections. Generous by design. */
	--section-y:       clamp(4.5rem, 10vw, 9.5rem);
	--section-y-large: clamp(6rem, 13vw, 12rem);

	/* Horizontal page gutter. */
	--gutter:      clamp(1.25rem, 4.5vw, 4.5rem);
	--shell-max:   1440px;
	--shell-text:  760px;

	/* Grid gaps. */
	--gap-tight: clamp(0.75rem, 1.4vw, 1.25rem);
	--gap:       clamp(1.5rem, 3.4vw, 3.5rem);
	--gap-wide:  clamp(2.5rem, 5.5vw, 5rem);

	/* ---------------------------------------------------------------------
	 * Edges
	 * ------------------------------------------------------------------ */
	--radius-pill: 999px;
	--radius-sm:   2px;
	--radius-md:   3px;
	--hairline:    1px;

	/* ---------------------------------------------------------------------
	 * Motion — one vocabulary, used everywhere.
	 * Durations stay inside the 200–600ms band from the brief.
	 * ------------------------------------------------------------------ */
	--ease-out:   cubic-bezier(0.22, 0.72, 0.24, 1);   /* entrances          */
	--ease-in-out: cubic-bezier(0.6, 0.02, 0.32, 1);   /* state changes      */
	--ease-soft:  cubic-bezier(0.33, 1, 0.68, 1);      /* long, gentle drift */

	--dur-fast:   180ms;
	--dur-base:   280ms;
	--dur-slow:   520ms;
	--dur-reveal: 760ms;

	/* Stagger step between sibling reveals. */
	--stagger: 70ms;

	/* Header height, read by JS scroll offsets and sticky positions. */
	--header-h: 76px;

	/* Layering. Declared once so nothing ever needs z-index: 9999. */
	--z-base:    1;
	--z-media:   2;
	--z-content: 3;
	--z-header:  50;
	--z-drawer:  60;
	--z-skip:    100;
	--z-lightbox: 110;
}

@media (min-width: 1024px) {
	:root {
		--header-h: 88px;
	}
}

/* ---------------------------------------------------------------------------
 * Tone contexts.
 * Applying a tone remaps the semantic colour tokens, so every component inside
 * adapts automatically — no `.section--forest .btn` overrides anywhere.
 * ------------------------------------------------------------------------ */
.tone-light {
	--c-bg: var(--c-white);
	--c-text: var(--c-ink);
	--c-text-muted: #5c5f57;
	--c-line: rgba(36, 37, 34, 0.14);
	--c-line-strong: rgba(36, 37, 34, 0.28);
}

.tone-dark {
	--c-bg: var(--c-forest);
	--c-text: var(--c-text-on-dark);
	--c-text-muted: var(--c-text-on-dark-muted);
	--c-line: var(--c-line-on-dark);
	--c-line-strong: rgba(255, 255, 255, 0.38);
	--c-available: #8fc7a0;   /* 7.4:1 on Deep Forest */
	--c-pending: #d9bc84;
	--c-focus: #a8d8ff;
}