/**
 * The design tokens (milestone 23, ruling 2).
 *
 * Values are the Tailwind 4 zinc/blue/red ramps the app rendered before the
 * StyleX conversion, carried over verbatim so the palette does not shift.
 * Each token holds its dark value under `prefers-color-scheme: dark` — the
 * same media strategy Tailwind 4 defaulted to. There is no theme toggle and
 * no `data-theme` attribute; the scheme follows the operating system.
 *
 * Name tokens by role, never by shade: a call site asks for `border`, not for
 * zinc-200.
 */

import * as stylex from "@stylexjs/stylex";

const DARK = "@media (prefers-color-scheme: dark)";

export const colors = stylex.defineVars({
	/** The page ground. */
	surface: { default: "oklch(98.5% 0 none)", [DARK]: "oklch(14.1% 0.005 285.823)" },
	/** Cards, dialogs and inputs sitting on top of the ground. */
	surfaceRaised: { default: "#fff", [DARK]: "oklch(21% 0.006 285.885)" },
	/** The fill under a pointer on a nav item or a menu row. */
	surfaceHover: { default: "oklch(96.7% 0.001 286.375)", [DARK]: "oklch(27.4% 0.006 286.033)" },
	/** Hairlines between rows and around cards. */
	border: { default: "oklch(92% 0.004 286.32)", [DARK]: "oklch(27.4% 0.006 286.033)" },
	/** Control outlines, which need more contrast than a row divider. */
	borderStrong: { default: "oklch(87.1% 0.006 286.286)", [DARK]: "oklch(37% 0.013 285.805)" },
	text: { default: "oklch(21% 0.006 285.885)", [DARK]: "oklch(96.7% 0.001 286.375)" },
	/**
	 * Secondary text. Most call sites were a flat zinc-500 before the conversion,
	 * with no dark override, which measured 4.12:1 on the dark ground and so
	 * failed WCAG AA; the dark value here is zinc-400, which measures 7.56:1.
	 */
	textMuted: { default: "oklch(55.2% 0.016 285.938)", [DARK]: "oklch(70.5% 0.015 286.067)" },
	/**
	 * Secondary text that already adapted before the conversion: zinc-600 on the
	 * light ground, zinc-400 on the dark one. It is a separate token because
	 * `textMuted`'s lighter light value measures 4.62:1 against 7.40:1 here, and
	 * these call sites are small text — table headers, an inactive nav item, a
	 * chart legend — where that loss shows.
	 */
	textSecondary: { default: "oklch(44.2% 0.017 285.786)", [DARK]: "oklch(70.5% 0.015 286.067)" },
	/** Primary actions. Identical in both schemes, as before the conversion. */
	primary: { default: "oklch(54.6% 0.245 262.881)", [DARK]: "oklch(54.6% 0.245 262.881)" },
	primaryText: { default: "#fff", [DARK]: "#fff" },
	/** Primary as foreground: lightened in dark so it clears the ground. */
	primaryOnSurface: { default: "oklch(54.6% 0.245 262.881)", [DARK]: "oklch(70.7% 0.165 254.624)" },
	/**
	 * Warnings: a degraded condition the operator can still act on, as against
	 * `danger`, which is a failure or a destructive action. The amber ramp.
	 */
	warnSurface: { default: "oklch(98.7% 0.022 95.277)", [DARK]: "oklch(27.9% 0.077 45.635)" },
	warnBorder: { default: "oklch(87.9% 0.169 91.605)", [DARK]: "oklch(47.3% 0.137 46.201)" },
	/** A control's outline inside a warning banner, which the banner border would swallow. */
	warnBorderStrong: { default: "oklch(82.8% 0.189 84.429)", [DARK]: "oklch(55.5% 0.163 48.998)" },
	warnText: { default: "oklch(41.4% 0.112 45.904)", [DARK]: "oklch(96.2% 0.059 95.617)" },
	danger: { default: "oklch(57.7% 0.245 27.325)", [DARK]: "oklch(70.4% 0.191 22.216)" },
	dangerSurface: { default: "oklch(97.1% 0.013 17.38)", [DARK]: "oklch(25.8% 0.092 26.042)" },
	dangerBorder: { default: "oklch(80.8% 0.114 19.571)", [DARK]: "oklch(44.4% 0.177 26.899)" },
	dangerText: { default: "oklch(44.4% 0.177 26.899)", [DARK]: "oklch(88.5% 0.062 18.334)" },
	/** The focus ring colour. The ring itself is a floor, not a variant. */
	focus: { default: "oklch(54.6% 0.245 262.881)", [DARK]: "oklch(54.6% 0.245 262.881)" },
});
