/**
 * Perth Leaflet Marketplace — Design tokens
 * ------------------------------------------------------------------
 * Single source of truth for colour, spacing, radius and shadow used
 * across BOTH the theme (site chrome) and this plugin (marketplace UI),
 * so the marketplace looks consistent no matter what theme is active.
 * Reference palette: navy + coral, per approved concept mockups.
 * Enqueued first, before theme.css and marketplace.css.
 */
:root {
	/* Brand */
	--plm-navy-900: #071D40;
	--plm-navy-800: #0B2A5B;
	--plm-navy-700: #0B2A5B;
	--plm-navy-600: #244675;
	--plm-navy-100: #EAF0F7;
	--plm-coral-600: #E85F00;
	--plm-coral-500: #FF6A00;
	--plm-coral-400: #FFC247;
	--plm-coral-100: #FFF2E8;

	/* Semantic */
	--plm-color-primary: var(--plm-navy-700);
	--plm-color-accent: var(--plm-coral-500);
	--plm-color-accent-hover: var(--plm-coral-600);
	--plm-color-success: #1c8a5a;
	--plm-color-success-bg: #e6f5ee;
	--plm-color-warning: #b8860b;
	--plm-color-warning-bg: #fbf1de;
	--plm-color-danger: #c8402b;
	--plm-color-danger-bg: #fbeae7;
	--plm-color-info-bg: #eef2fb;

	/* Neutrals */
	--plm-ink: #0B2A5B;
	--plm-ink-soft: #4a5568;
	--plm-ink-muted: #6b7280;
	--plm-border: #e2e5eb;
	--plm-border-strong: #cbd2df;
	--plm-surface: #ffffff;
	--plm-surface-alt: #f7f8fb;
	--plm-surface-tint: #f1f3f8;

	/* Type */
	--plm-font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--plm-font-heading: var(--plm-font-body);

	/* Shape */
	--plm-radius-sm: 6px;
	--plm-radius-md: 10px;
	--plm-radius-lg: 12px;
	--plm-radius-pill: 999px;

	/* Shadow (subtle, per design brief) */
	--plm-shadow-sm: 0 1px 2px rgba(16, 26, 48, 0.06);
	--plm-shadow-md: 0 4px 16px rgba(16, 26, 48, 0.08);
	--plm-shadow-lg: 0 12px 32px rgba(16, 26, 48, 0.12);

	/* Layout.
	 *
	 * ONE token caps the width of everything on the site — the header, the hero,
	 * every .plm-wrap section and every form. Setting max-width on a form does
	 * nothing while this is narrower, because the form is already inside it.
	 * This is the knob to turn if pages look boxed in.
	 *
	 * min() so mid-size laptops use most of the screen instead of inheriting
	 * desktop margins, while very wide monitors still stop at a sane measure
	 * rather than stretching text across a metre of glass. */
	--plm-container: min(1280px, 96vw);
	--plm-gap: 24px;
}

@media (prefers-color-scheme: dark) {
	/* Marketplace UI intentionally stays on a light surface even in dark mode —
	   it reads as a document/dashboard (forms, tables, photos) rather than chrome,
	   and print/photo-heavy job cards lose contrast fastest on dark surfaces. */
}