/*
 * Design tokens.
 *
 * Theming rule: :root holds the light palette. `prefers-color-scheme: dark`
 * supplies the dark palette as the *default* for dark-preferring users, and the
 * [data-theme] attribute (set by the header toggle) overrides the system
 * preference in both directions — which is why the dark values are repeated
 * under :root[data-theme="dark"] rather than only in the media query.
 */

:root {
	/* Brand */
	--sl-red: #e2001a;
	--sl-red-hover: #c00016;
	--sl-red-contrast: #ffffff;

	/* Surfaces */
	--sl-bg: #f5f6f7;
	--sl-surface: #ffffff;
	--sl-surface-2: #fafbfb;
	--sl-surface-hover: #f2f3f4;
	--sl-header-bg: #ffffff;

	/* Text. Every one of these clears WCAG AA (4.5:1) on --sl-surface; "faint" is
	   still used for small uppercase labels, so it cannot be lightened further. */
	--sl-text: #16181c;
	--sl-text-muted: #62676e;
	--sl-text-faint: #6b7178;
	--sl-text-on-media: #ffffff;

	/* Lines */
	--sl-border: #e3e5e8;
	--sl-border-strong: #cdd1d6;

	/* Semantic figures. Money is the point of this site, so gains and costs
	   get their own tokens rather than reusing brand red/green ad hoc. */
	--sl-positive: #16794a;
	--sl-positive-bg: #e7f4ed;
	--sl-negative: #c8102e;
	--sl-negative-bg: #fdecee;

	/* Focus */
	--sl-focus: #0b62d6;

	/* Donut / category series. Distinct in hue AND lightness so the chart stays
	   readable for colour-blind users and in greyscale print. */
	--sl-cat-1: #d64545;
	--sl-cat-2: #e08c39;
	--sl-cat-3: #d9b310;
	--sl-cat-4: #4f9d69;
	--sl-cat-5: #2f8f9d;
	--sl-cat-6: #3d6fb4;
	--sl-cat-7: #7a5ea8;
	--sl-cat-8: #9a6b8f;
	--sl-cat-9: #b5642e;
	--sl-cat-10: #6a8c3f;
	--sl-cat-11: #3f8f7a;
	--sl-cat-12: #5566b8;
	--sl-cat-13: #a04b78;

	/* Cost-of-living map scale. A sequential dark-blue → red ramp that reads as
	   "cheaper → dearer": the map legend, the pins and the canton choropleth all
	   take their colour from here via sl_cost_brackets() (inc/geo.php). Kept
	   separate from the donut series above so the map and the chart never fight
	   over the same six hues. */
	--sl-bracket-1: #1e40af; /* under 1 000 — dark blue */
	--sl-bracket-2: #3b82f6; /* 1 000–1 500 — blue */
	--sl-bracket-3: #15803d; /* 1 500–2 000 — strong green */
	--sl-bracket-4: #77c043; /* 2 000–3 000 — light green */
	--sl-bracket-5: #eab308; /* 3 000–4 000 — yellow */
	--sl-bracket-6: #dc2626; /* over 4 000 — red */

	/* Shape & motion */
	--sl-radius: 10px;
	--sl-radius-lg: 14px;
	--sl-shadow: 0 1px 2px rgb(16 18 22 / 6%), 0 2px 8px rgb(16 18 22 / 4%);
	--sl-shadow-lg: 0 4px 16px rgb(16 18 22 / 10%);

	/* Type */
	--sl-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--sl-font-num: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

	/* Rhythm */
	--sl-gap: 1rem;
	--sl-gap-lg: 1.5rem;
	--sl-page-max: 1140px;
	--sl-header-h: 68px;
}

/* Dark palette, shared by the media query and the explicit attribute. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--sl-bg: #0f1115;
		--sl-surface: #171a20;
		--sl-surface-2: #1c2027;
		--sl-surface-hover: #222732;
		--sl-header-bg: #171a20;

		--sl-text: #e8eaed;
		--sl-text-muted: #a2a9b4;
		--sl-text-faint: #8d949f;

		--sl-border: #2a2f38;
		--sl-border-strong: #3b424e;

		/* Lightened so they clear 4.5:1 on the dark surface. */
		--sl-red: #ff4d5e;
		--sl-red-hover: #ff6b79;
		--sl-red-contrast: #1a0509;

		--sl-positive: #4ecf94;
		--sl-positive-bg: #10291f;
		--sl-negative: #ff6b7a;
		--sl-negative-bg: #2b1418;

		--sl-focus: #6aa9ff;

		--sl-cat-1: #ef6a6a;
		--sl-cat-2: #f0a55e;
		--sl-cat-3: #e6c948;
		--sl-cat-4: #6fc48c;
		--sl-cat-5: #57b6c4;
		--sl-cat-6: #6d9de0;
		--sl-cat-7: #a68ad1;
		--sl-cat-8: #c091b3;
		--sl-cat-9: #d98a54;
		--sl-cat-10: #93bd63;
		--sl-cat-11: #63bda6;
		--sl-cat-12: #8090e0;
		--sl-cat-13: #cf7aa6;

		/* Map scale, lightened so it stays legible on the dark surface and on the
		   dark map tiles. Same cheap-to-dear order as the light palette. */
		--sl-bracket-1: #4c6ef5; /* dark blue */
		--sl-bracket-2: #74a3f7; /* blue */
		--sl-bracket-3: #2fa563; /* strong green */
		--sl-bracket-4: #8ed160; /* light green */
		--sl-bracket-5: #e6c948; /* yellow */
		--sl-bracket-6: #f0605f; /* red */

		--sl-shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 2px 8px rgb(0 0 0 / 30%);
		--sl-shadow-lg: 0 4px 16px rgb(0 0 0 / 45%);
	}
}

:root[data-theme="dark"] {
	--sl-bg: #0f1115;
	--sl-surface: #171a20;
	--sl-surface-2: #1c2027;
	--sl-surface-hover: #222732;
	--sl-header-bg: #171a20;

	--sl-text: #e8eaed;
	--sl-text-muted: #a2a9b4;
	--sl-text-faint: #8d949f;

	--sl-border: #2a2f38;
	--sl-border-strong: #3b424e;

	--sl-red: #ff4d5e;
	--sl-red-hover: #ff6b79;
	--sl-red-contrast: #1a0509;

	--sl-positive: #4ecf94;
	--sl-positive-bg: #10291f;
	--sl-negative: #ff6b7a;
	--sl-negative-bg: #2b1418;

	--sl-focus: #6aa9ff;

	--sl-cat-1: #ef6a6a;
	--sl-cat-2: #f0a55e;
	--sl-cat-3: #e6c948;
	--sl-cat-4: #6fc48c;
	--sl-cat-5: #57b6c4;
	--sl-cat-6: #6d9de0;
	--sl-cat-7: #a68ad1;
	--sl-cat-8: #c091b3;
	--sl-cat-9: #d98a54;
	--sl-cat-10: #93bd63;
	--sl-cat-11: #63bda6;
	--sl-cat-12: #8090e0;
	--sl-cat-13: #cf7aa6;

	/* Map scale, lightened so it stays legible on the dark surface and on the
	   dark map tiles. Same cheap-to-dear order as the light palette. */
	--sl-bracket-1: #4c6ef5; /* dark blue */
	--sl-bracket-2: #74a3f7; /* blue */
	--sl-bracket-3: #2fa563; /* strong green */
	--sl-bracket-4: #8ed160; /* light green */
	--sl-bracket-5: #e6c948; /* yellow */
	--sl-bracket-6: #f0605f; /* red */

	--sl-shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 2px 8px rgb(0 0 0 / 30%);
	--sl-shadow-lg: 0 4px 16px rgb(0 0 0 / 45%);
}

/* Tell the UA to render form controls and scrollbars to match. */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }