/* ---------------------------------------------------------------------------
   KJPI design tokens.

   Every color, size and duration in app.css resolves through a variable
   declared here. Nothing downstream may hardcode a color.

   Light is the base palette on :root. Dark redefines only the values, in two
   places that must stay in sync:

     :root:not([data-theme="light"]) inside @media (prefers-color-scheme: dark)
       -- the OS preference, when the user has not chosen explicitly
     :root[data-theme="dark"]
       -- the explicit choice from the theme toggle

   A color must never have its ONLY definition inside a media query, or the
   explicit toggle cannot override it in both directions.
   --------------------------------------------------------------------------- */

:root {
	color-scheme: light;

	/* --- surfaces ------------------------------------------------------- */
	--bg: #f5f6f7;
	--surface: #ffffff;
	--surface-2: #eeeff1;
	--surface-3: #e4e6e9;
	--surface-inset: #f5f6f7;

	/* --- lines ---------------------------------------------------------- */
	--border: #e0e2e5;
	--border-strong: #c6c9ce;

	/* --- text ----------------------------------------------------------- */
	--text: #0c0d0f;
	--text-muted: #5a5e66;
	--text-subtle: #8b8f97;
	--text-inverse: #ffffff;

	/* --- brand ---------------------------------------------------------- */
	--accent: #0c0d0f;
	--accent-hover: #2b2e33;
	--accent-soft: #eeeff1;
	--accent-fg: #ffffff;

	/* --- semantic ------------------------------------------------------- */
	/* Neutral on purpose. These mark states, not measurements, and in a
	   monochrome scheme the only coloured marks are the rating ramp below --
	   which is what makes colour on this site mean "this is a score". */
	--good: #5a5e66;
	--good-soft: #eeeff1;
	--warn: #5a5e66;
	--warn-soft: #eeeff1;
	--bad: #0c0d0f;
	--bad-soft: #e4e6e9;

	/* Rating ramp. Absolute 0-100 percentiles, so the tiers are meaningful.
	   Deliberately the only saturated colour in the palette: it is the one
	   thing on a page that encodes a measurement rather than decorating one. */
	--rating-high: #15803d;
	--rating-mid: #ca8a04;
	--rating-low: #be123c;
	--rating-track: #e4e6e9;

	/* Phone bezel on the landing page. Not themed: a handset is black on a
	   desk in any light, and tying it to a surface token made it a grey
	   rectangle rather than a device. Deliberately the one hardware colour. */
	--device-bezel: #1d1d1f;
	--device-bezel-edge: #3a3a3c;

	/* --- typography ----------------------------------------------------- */
	--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
		Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
		monospace;

	--fs-xs: 0.6875rem;
	--fs-sm: 0.8125rem;
	--fs-base: 0.9375rem;
	--fs-md: 1rem;
	--fs-lg: 1.125rem;
	--fs-xl: 1.375rem;
	--fs-2xl: 1.875rem;
	--fs-3xl: 2.5rem;

	--lh-tight: 1.2;
	--lh-base: 1.55;

	--fw-normal: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* --- space ---------------------------------------------------------- */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;

	/* --- shape ---------------------------------------------------------- */
	--radius-sm: 4px;
	--radius: 8px;
	--radius-lg: 12px;
	--radius-pill: 999px;

	/* --- depth ---------------------------------------------------------- */
	--shadow-sm: 0 1px 2px rgba(16, 20, 28, 0.06);
	--shadow: 0 1px 3px rgba(16, 20, 28, 0.08),
		0 4px 12px rgba(16, 20, 28, 0.05);
	--shadow-lg: 0 8px 32px rgba(16, 20, 28, 0.12);

	/* --- motion --------------------------------------------------------- */
	--ease: cubic-bezier(0.2, 0, 0.2, 1);
	--dur-fast: 100ms;
	--dur: 160ms;

	/* --- layout --------------------------------------------------------- */
	--rail-width: 280px;
	--nav-height: 56px;
	--page-max: 1400px;
}

/* Dark, via OS preference -- only when the user has not explicitly picked
   light. The :not() guard is what lets the toggle win. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;

		--bg: #0a0b0c;
		--surface: #131416;
		--surface-2: #1a1c1f;
		--surface-3: #232528;
		--surface-inset: #0e0f11;

		--border: #26282c;
		--border-strong: #383b40;

		--text: #f2f3f4;
		--text-muted: #989ca3;
		--text-subtle: #6a6e75;
		--text-inverse: #0a0b0c;

		--accent: #f2f3f4;
		--accent-hover: #ffffff;
		--accent-soft: #1a1c1f;
		--accent-fg: #0a0b0c;

		--good: #989ca3;
		--good-soft: #1a1c1f;
		--warn: #989ca3;
		--warn-soft: #1a1c1f;
		--bad: #f2f3f4;
		--bad-soft: #232528;

		--rating-high: #4ade80;
		--rating-mid: #fbbf24;
		--rating-low: #fb7185;
		--rating-track: #232528;

		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
		--shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.35);
		--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55);
	}
}

/* Dark, chosen explicitly. Same values; must be kept in sync with the block
   above. Declared last so it also beats a light OS preference. */
:root[data-theme="dark"] {
	color-scheme: dark;

	--bg: #0a0b0c;
	--surface: #131416;
	--surface-2: #1a1c1f;
	--surface-3: #232528;
	--surface-inset: #0e0f11;

	--border: #26282c;
	--border-strong: #383b40;

	--text: #f2f3f4;
	--text-muted: #989ca3;
	--text-subtle: #6a6e75;
	--text-inverse: #0a0b0c;

	--accent: #f2f3f4;
	--accent-hover: #ffffff;
	--accent-soft: #1a1c1f;
	--accent-fg: #0a0b0c;

	--good: #989ca3;
	--good-soft: #1a1c1f;
	--warn: #989ca3;
	--warn-soft: #1a1c1f;
	--bad: #f2f3f4;
	--bad-soft: #232528;

	--rating-high: #4ade80;
	--rating-mid: #fbbf24;
	--rating-low: #fb7185;
	--rating-track: #232528;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
	--shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.35);
	--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55);
}