/*
  The theme: every colour, spacing step, radius and type size the application uses is declared
  here as a custom property, and nowhere else. Stylesheets — including the scoped `.razor.css`
  files, which see these because custom properties inherit through the shadow-free scoping Blazor
  uses — refer to the properties and never to a literal value. See ADR-0027.

  Adding a literal `#rrggbb` or a bare `rem` to another stylesheet is the thing that makes a
  theme untouchable later, so if a value is missing from this file, add it here first.
*/

:root {
	/*
	  Tells the browser both schemes are supported, so form controls, scrollbars and the default
	  canvas follow the user's choice rather than staying light under a dark palette.
	*/
	color-scheme: light dark;

	--colour-canvas: #fbfbfa;
	--colour-surface: #ffffff;
	--colour-header: #14413c;
	--colour-header-text: #eef4f2;
	/*
	  Secondary text on the header. Set by contrast rather than by taste: it reaches 5.84:1
	  against --colour-header, where WCAG AA wants 4.5:1 for text this size. Dimming
	  --colour-header-text with `opacity` instead is what this token replaces — that composites
	  to 4.26:1 in this scheme and fails, while passing in the dark one, so the bug is invisible
	  to anyone whose machine prefers dark. Re-measure both schemes if either value moves.
	*/
	--colour-header-text-muted: #a8bfb9;
	--colour-header-hover: #1d5850;
	--colour-text: #1b1c1b;
	--colour-text-muted: #5f6763;
	--colour-accent: #1d7a6c;
	--colour-accent-text: #ffffff;
	--colour-border: #dcdedb;
	/*
	  Decoration only — dividers, card edges, badge outlines. Never a control's own boundary: this
	  reads 1.35:1 against --colour-surface, nowhere near WCAG 1.4.11's 3:1 minimum for a UI
	  component's own boundary. A text input, select or textarea reads --colour-control-border below
	  instead (task 167, ADR-0087).
	*/
	/*
	  The visual boundary of a text input, select or textarea — split from --colour-border above
	  rather than darkening it (ADR-0087), because reaching 3:1 by darkening the shared token would
	  also darken every hairline divider and card edge that has no such requirement. 3.30:1 against
	  --colour-surface here — a hair above the 3:1 floor rather than the palette's darkest grey, so a
	  form field's edge is legible without reading as heavier than the rest of the "quiet,
	  undecorated" surface it sits on. See ADR-0087 for the alternative and why it was not the one
	  taken.
	*/
	--colour-control-border: #8c8e8c;
	/*
	  Form validation and refusal text, read against --colour-canvas or --colour-surface — 6.32:1 in
	  this scheme, comfortably above WCAG AA's 4.5:1 for text this size. Not derived from
	  --colour-accent or any other token: an error has to read as an error at a glance, which a tint
	  of the brand colour would not give it.
	*/
	--colour-danger: #b3261e;

	/*
	  The drawer sits on --colour-surface, not --colour-canvas, so it needs its own hover fill
	  rather than reusing --colour-canvas: the two are close enough (16.51:1 vs 17.09:1 against
	  --colour-text) that a hover state built from --colour-canvas would barely read as one.
	  15.04:1 against --colour-text — comfortably AA, and distinct enough from --colour-surface to
	  see. Used for the drawer toggle's hover/focus fill today; any future control resting on
	  --colour-surface should reuse it rather than inventing a second hover tint.
	*/
	--colour-surface-hover: #eef1f0;
	/*
	  The dimming scrim behind an overlay — used by every OverlayBackdrop instance (task 193, ADR-0116):
	  the drawer's own on narrow viewports, and every modal-task panel's, through the one shared
	  component (task 180, ADR-0102 first introduced it for PlaceFormPanel alone) — and the toggle's
	  elevation shadow. Neither sits behind text, so neither is a WCAG contrast pair — a shadow and a
	  scrim are decoration and focus-drawing, not content. Declared here rather than inline because
	  ADR-0027 singles out `rgba()` as the violation most likely to slip in unnoticed: a token names the
	  intent, an inline value would not. Any future overlay that needs to dim what is behind it should
	  reuse this rather than declaring a second scrim token, the same convention --colour-surface-hover
	  already states for a hover fill.
	*/
	--colour-backdrop: rgba(10, 12, 12, 0.45);
	--colour-shadow: rgba(20, 22, 26, 0.18);
	/*
	  Applied alongside --colour-backdrop wherever a scrim dims the page (task 193, ADR-0116) — the
	  same "reuse the one token" convention --colour-backdrop's own comment states, so a future overlay
	  reaches for this rather than a second, near-duplicate blur radius. Not scheme-dependent: how much
	  the background blurs is a property of the effect, not of light versus dark, so this is declared
	  once here rather than repeated in the dark block below.
	*/
	--backdrop-blur: 4px;

	--space-small: 0.5rem;
	--space-medium: 1rem;
	--space-large: 2rem;

	--radius: 4px;

	--font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-size-body: 1rem;
	--font-size-small: 0.9rem;
	--font-size-brand: 1.25rem;
	--font-size-heading: 1.75rem;

	--layout-max-width: 60rem;
	/* The drawer's own width, capped so it never forces horizontal scroll on a narrow viewport. */
	--drawer-width: min(20rem, 85vw);
	/* Touch-target minimum (44px) for the drawer toggle, the one control that floats free of any
	   list or form and so has no neighbour to inherit sizing from. */
	--control-size: 2.75rem;
	/* Space to leave clear of the fixed toggle: its own box plus a margin on each side. Shared by
	   the drawer's top padding and .page-content's (app.css), so the one thing that must clear the
	   toggle in both places is written once. */
	--content-clearance: calc(var(--control-size) + var(--space-medium) * 2);

	/*
	  Stacking order for a drawer that floats over a map, per ADR-0059. Leaflet manages its own
	  panes internally — tiles at 200 up to popups at 700, and its default controls (zoom,
	  attribution) at 1000 — none of which is expressed as a custom property, because it is
	  Leaflet's internal implementation rather than this application's. These three start above all
	  of it, so nothing Leaflet draws can ever sit on top of the drawer chrome by accident.
	  --z-overlay and --z-dialog are not consumed by any component yet; they exist so the first
	  toast or modal takes a place in the order instead of a guessed number.
	*/
	--z-drawer: 1200;
	--z-overlay: 1300;
	--z-dialog: 1400;
}

/*
  The dark palette rebinds the same properties and nothing else. That it can is the whole point of
  the layer: if a rule elsewhere ever needs a dark-mode variant of its own, a value has escaped
  into that rule and belongs back up here.
*/
@media (prefers-color-scheme: dark) {
	:root {
		--colour-canvas: #14161a;
		--colour-surface: #1c1f24;
		--colour-header: #0d2b28;
		--colour-header-text: #e4ecea;
		/* 5.94:1 against this scheme's --colour-header; see the note beside the light value. */
		--colour-header-text-muted: #8ea8a2;
		--colour-header-hover: #153c37;
		--colour-text: #e8eaec;
		--colour-text-muted: #a2aaa8;
		--colour-accent: #52b7a6;
		--colour-accent-text: #10201d;
		--colour-border: #2f343a;
		/* Decoration only here too — see the note beside the light value. */
		/*
		  3.33:1 against this scheme's --colour-surface. The dark scheme's own --colour-border starts
		  marginally worse than light's (1.32:1 against 1.35:1), so this is not the same shift applied
		  twice — recomputed independently against --colour-surface (#1c1f24).
		*/
		--colour-control-border: #66717e;
		/* 10.67:1 against this scheme's --colour-canvas; see the note beside the light value. */
		--colour-danger: #ffb4ab;
		/* 11.83:1 against --colour-text; see the note beside the light value. */
		--colour-surface-hover: #262b31;
		/* A touch darker and more opaque than the light scheme's scrim, so it still reads as
		   dimming against a canvas that starts dark rather than disappearing into it. */
		--colour-backdrop: rgba(0, 0, 0, 0.55);
		--colour-shadow: rgba(0, 0, 0, 0.4);
	}
}