/*
 * Every colour and every metric in the theme.
 *
 * ⚠️ **This is the only file that names a colour.** If you are changing how the site looks,
 * you are changing this file and nothing else. That is the whole point of it, and it is what
 * §AL's closing "list of places to change colours" reduces to: one line.
 *
 * ## Dark first
 *
 * Dark remains the base site palette on `:root`; the listing map is deliberately cream in both
 * site themes. That warm light/dark contrast is the current art direction and is recorded as a
 * departure from §M in TASKS.md.
 *
 * The palette is declared three times on purpose:
 *
 *   1. `:root`                                   — dark, the default
 *   2. `@media (prefers-color-scheme: light)`    — light for readers whose system says so…
 *      `:root:not([data-theme="dark"])`             …unless they have chosen dark explicitly
 *   3. `:root[data-theme="light"]`               — the toggle, which must win in both directions
 *
 * Without the third block the toggle could only ever move a reader *away* from their system
 * preference and never back, which is why the light values appear twice rather than only
 * inside the media query.
 *
 * ## The accent is green (§B.15)
 *
 * Two greens, and they are not interchangeable:
 *
 *   --sjb-accent       a surface, with --sjb-accent-contrast written on it (buttons, pins)
 *   --sjb-accent-text  the same idea as *text*, on a page background
 *
 * They differ because a green that clears 4.5:1 as small text on near-black is far too pale
 * to be a button, and a green dark enough to carry white text is illegible as body text.
 * Using one for both is how a theme ends up failing contrast in one mode or looking washed
 * out in the other.
 */

:root {
	color-scheme: dark;

	/* --- Surfaces, darkest to lightest. --- */
	--sjb-bg: #0d1115;
	--sjb-surface: #11161d;
	--sjb-surface-2: #171c20;
	--sjb-surface-3: #1c211f;
	--sjb-header-bg: #0b0f14;

	/* --- Lines. --- */
	--sjb-border: #303127;
	--sjb-border-strong: #4a4938;
	--sjb-hover-line: rgba(184, 154, 82, 0.38);

	/* --- Text. All checked against --sjb-surface. --- */
	--sjb-text: #f1e8d8;
	--sjb-text-dim: #c1b6a5;
	--sjb-text-faint: #9e9384;
	--sjb-text-on-accent: #11150d;

	/* --- The accent. --- */
	--sjb-accent: #8fa64a;
	--sjb-accent-hover: #a0aa58;
	--sjb-accent-active: #6f7839;
	--sjb-accent-text: #aab85b;
	--sjb-accent-soft: rgba(143, 166, 74, 0.15);
	--sjb-accent-line: rgba(143, 166, 74, 0.48);

	/* --- A warm, paper-like detailed map, shared by both site themes. --- */
	--sjb-map-bg: #f2ecdd;
	--sjb-map-frame-border: #292a22;
	--sjb-map-frame-shadow: 0 16px 34px rgba(5, 7, 6, 0.34);
	--sjb-map-border: #8b8171;
	--sjb-map-canton-line: #72a94c;
	--sjb-map-active-line: #8fa64a;
	--sjb-map-active-glow: rgba(143, 166, 74, 0.3);
	--sjb-map-lake: #c7dae8;
	--sjb-map-city: #4e4942;
	--sjb-map-label: #7a7266;
	--sjb-map-point-text: #11150d;
	--sjb-map-point-border: #f4efe6;
	--sjb-map-point-shadow: 0 3px 10px rgba(55, 52, 37, 0.3);
	--sjb-map-place-text: #f4efe6;
	--sjb-map-overlay-bg: rgba(13, 17, 21, 0.9);
	--sjb-map-overlay-border: rgba(184, 154, 82, 0.4);
	--sjb-map-label-bg: #f3ede2;
	--sjb-map-label-border: #d5cbb9;
	--sjb-map-label-text: #4e4942;
	--sjb-map-label-shadow: 0 3px 10px rgba(72, 64, 48, 0.2);
	--sjb-map-spider: #8b8171;
	--sjb-tab-map-icon: #a8f04b;
	--sjb-tab-map-glow: rgba(168, 240, 75, 0.5);

	/* --- Meaning. --- */
	--sjb-danger: #ff6b6b;
	--sjb-danger-soft: rgba(255, 107, 107, 0.14);
	--sjb-warning: #d7aa55;
	--sjb-focus: #d6b86b;

	/* --- Shape and depth. --- */
	--sjb-radius: 10px;
	--sjb-radius-card: 16px;
	--sjb-radius-pill: 999px;
	--sjb-shadow: 0 1px 2px rgba(3, 5, 4, 0.42);
	--sjb-shadow-lg: 0 12px 32px rgba(3, 5, 4, 0.56);

	/* --- Rhythm. --- */
	--sjb-gap: 12px;
	--sjb-gap-sm: 8px;
	--sjb-gap-lg: 20px;
	--sjb-pad: 16px;

	/* --- The app shell's arithmetic. Redeclared per breakpoint in jobs-mobile.css. --- */
	--sjb-header-h: 60px;
	--sjb-rail-h: 78px;
	--sjb-tabbar-h: 0px;
	--sjb-adminbar-h: 0px;

	/*
	 * Desktop split. §B.62–63 and §AK's first test both said two thirds / one third; the client
	 * asked for a narrower map (58–60% / 40–42%) so the list carries more of the view. See
	 * TASKS.md for the departure. Matches the tablet ratio already in jobs-mobile.css.
	 */
	--sjb-map-share: 59fr;
	--sjb-list-share: 41fr;

	/* Single offer (§R): a centred column, never the full monitor. */
	--sjb-single-max: 1180px;
	--sjb-form-max: 960px;
	--sjb-page-max: 1180px;

	/* --- Map bubbles. Size carries the meaning; colour never does (§O). --- */
	--sjb-cluster-s: 34px;
	--sjb-cluster-m: 46px;
	--sjb-cluster-l: 60px;

	/* --- Type. --- */
	--sjb-font: "Avenir Next", Avenir, "Segoe UI", sans-serif;
	--sjb-font-num: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/*
 * Light, for a reader whose system asks for it and who has not overridden it.
 */
@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) {
		color-scheme: light;

		--sjb-bg: #f3ede2;
		--sjb-surface: #fbf7ef;
		--sjb-surface-2: #eee7da;
		--sjb-surface-3: #e4dccf;
		--sjb-header-bg: #f7f1e7;

		--sjb-border: #d4c9b6;
		--sjb-border-strong: #b8a98f;
		--sjb-hover-line: rgba(139, 114, 64, 0.45);

		--sjb-text: #27251f;
		--sjb-text-dim: #625b50;
		--sjb-text-faint: #6f6659;
		--sjb-text-on-accent: #11150d;

		--sjb-accent: #8a9448;
		--sjb-accent-hover: #78823b;
		--sjb-accent-active: #667132;
		--sjb-accent-text: #596624;
		--sjb-accent-soft: rgba(138, 148, 72, 0.13);
		--sjb-accent-line: rgba(111, 120, 57, 0.45);

		--sjb-danger: #c02626;
		--sjb-danger-soft: rgba(192, 38, 38, 0.09);
		--sjb-warning: #8b6424;
		--sjb-focus: #7b632b;

		--sjb-shadow: 0 1px 2px rgba(62, 51, 35, 0.09);
		--sjb-shadow-lg: 0 12px 32px rgba(62, 51, 35, 0.16);
	}
}

/*
 * The toggle. ⚠️ These values duplicate the block above on purpose — the explicit choice has
 * to beat the system preference in *both* directions, and a media query cannot do that.
 */
:root[data-theme="light"] {
	color-scheme: light;

	--sjb-bg: #f3ede2;
	--sjb-surface: #fbf7ef;
	--sjb-surface-2: #eee7da;
	--sjb-surface-3: #e4dccf;
	--sjb-header-bg: #f7f1e7;

	--sjb-border: #d4c9b6;
	--sjb-border-strong: #b8a98f;
	--sjb-hover-line: rgba(139, 114, 64, 0.45);

	--sjb-text: #27251f;
	--sjb-text-dim: #625b50;
	--sjb-text-faint: #6f6659;
	--sjb-text-on-accent: #11150d;

	--sjb-accent: #8a9448;
	--sjb-accent-hover: #78823b;
	--sjb-accent-active: #667132;
	--sjb-accent-text: #596624;
	--sjb-accent-soft: rgba(138, 148, 72, 0.13);
	--sjb-accent-line: rgba(111, 120, 57, 0.45);

	--sjb-danger: #c02626;
	--sjb-danger-soft: rgba(192, 38, 38, 0.09);
	--sjb-warning: #8b6424;
	--sjb-focus: #7b632b;

	--sjb-shadow: 0 1px 2px rgba(62, 51, 35, 0.09);
	--sjb-shadow-lg: 0 12px 32px rgba(62, 51, 35, 0.16);
}

:root[data-theme="dark"] {
	color-scheme: dark;
}