/* Gallery design tokens — the shared vocabulary every gallery stylesheet and
 * component builds on (av-xgik, foundation of the security-posture UI epic
 * av-jafp). Loaded on every gallery page first, before components.css and the
 * page sheet.
 *
 * --brand-blue / --brand-blue-hover mirror internal/color/brand.go — the Go
 * constant still colors the server-rendered SVG logo, so keep the two in
 * sync. They live here as committed CSS (instead of the old per-template
 * inline <style> injection) so static stylesheets need no Go round-trip. */
/* Opts every cross-document navigation between gallery/detail/edit into the
 * View Transitions API (Exh-pb2k): instead of unloading straight to a blank
 * default-white frame, the browser keeps the outgoing page's snapshot on
 * screen and cross-fades to the incoming one. Lives here, not per-page,
 * because it's a document-level opt-in and tokens.css is the one sheet every
 * page loads first. No-op (ignored) in browsers without View Transitions
 * support, so navigation there is unchanged. */
@view-transition{
	navigation:auto;
}

:root{
	/* brand / accent */
	--brand-blue:#23559e;
	--brand-blue-hover:#1a4076;
	--color-accent:var(--brand-blue);

	/* neutrals */
	--color-ink:#111;             /* primary text */
	--color-ink-soft:#333;        /* headings, strong secondary text */
	--color-muted:#888;           /* metadata, secondary text */
	--color-faint:#aaa;           /* placeholder / empty hints */
	--color-ground:#f0f0f0;       /* page background */
	--color-panel:#fff;           /* cards, header, modals */
	--color-hairline:#e0e0e0;     /* panel dividers */
	--color-hairline-strong:#d9d9d9; /* header underline */
	--color-border:#ddd;          /* control borders */

	/* feedback */
	--color-danger:#e00;
	--color-danger-hover:#c00;

	/* elevation */
	--shadow-header:0 1px 6px rgba(0,0,0,.07);
	--shadow-card:0 1px 3px rgba(0,0,0,.08);
	--shadow-card-hover:0 2px 8px rgba(0,0,0,.12);
	--shadow-modal:0 4px 24px rgba(0,0,0,.25);
	--overlay:rgba(0,0,0,.4);

	/* Every form control sizes itself from one of these, never a literal px:
	 * iOS zooms in on focusing a field under 16px and does not zoom back out
	 * (av-3qmf). The -code- variant is the monospace fields. */
	--field-font-size:14px;
	--field-code-font-size:12px;

	/* spacing scale */
	--space-1:4px;
	--space-2:6px;
	--space-3:8px;
	--space-4:10px;
	--space-5:12px;
	--space-6:16px;
	--space-7:20px;
	--space-8:24px;

	/* radii */
	--radius-sm:3px;   /* inline code, badges */
	--radius-md:6px;   /* inputs, buttons */
	--radius-lg:10px;  /* cards, modals */
	--radius-pill:999px;
}

/* 16px is the exact threshold WebKit uses, so this removes the reason for the
 * zoom rather than disabling zooming. Keyed on pointer, not width: a narrow
 * desktop window has no keyboard, a landscape tablet is wide and touched. */
@media (pointer:coarse){
	:root{
		--field-font-size:16px;
		--field-code-font-size:16px;
	}
}