/*
 * 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;

	/* 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-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-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; }