/*
  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 what floats over the map, per ADR-0059 (revised by ADR-0156, task 244 — see
	  that record's own Consequences for what changed and why). 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. Every rung below starts comfortably clear of all
	  of it, so nothing Leaflet draws can ever sit on top of this application's own chrome by accident.

	  --z-panel: a floating, non-modal browsing panel — PlaceDetailPanel today (Maps/PlaceDetailPanel.razor.css),
	  the one kind of panel ADR-0099 exempts from the modal focus trap. Below --z-header, deliberately
	  (ADR-0156): the drawer — burger toggle and its own open <aside> alike — is "the main menu" Rob's
	  own report named, and it must never be buried by a panel it did not open, including on a narrow
	  viewport where the two can genuinely overlap. That is a reversal of ADR-0059's own original
	  placement, which put this panel above the drawer for exactly the opposite reason — see
	  ADR-0156's own Consequences for the trade this accepts.

	  --z-header: the drawer's own sliding <aside> (Drawer.razor.css's own ".drawer") — "the main
	  menu" ADR-0156 named, always above every panel, including one it did not itself open, so a
	  reader can always read the drawer's own content once open regardless of what else is floating
	  over the map. The toggle (".drawer-toggle") no longer shares this exact rung (task 248,
	  ADR-0162): equal z-index handed paint order to DOM order, and the drawer, rendered after the
	  toggle in Drawer.razor, painted over its own button and could not be closed. The toggle sits at
	  calc(var(--z-header) + 1) instead — strictly above .drawer, mirroring what
	  calc(var(--z-drawer) + 1) always did before ADR-0156, and still comfortably below --z-overlay so
	  a modal dialog still covers it. Also what Drawer's own narrow-viewport OverlayBackdrop sits one
	  layer below (Drawer.razor's own BelowZIndexToken), so that scrim now dims the panel too while
	  the drawer is open, consistent with the drawer winning.

	  --z-overlay: every modal-task panel (Overlays/ModalOverlay.razor.css) and its own backdrop.
	  Deliberately above --z-header: a modal dialog is meant to cover the whole application, chrome
	  included, for as long as it holds the focus trap — the opposite relationship --z-panel has to it.

	  --z-dialog: ImportReportBanner (Places/Import/ImportReportBanner.razor.css) — the one thing meant
	  to survive even a modal-task panel closing (task 211, ADR-0127). Above everything else for
	  exactly that reason.
	*/
	--z-panel: 1250;
	--z-header: 1275;
	--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);
	}
}