@resq-systems/constants 0.3.0 → 0.4.0

package/README.md

@@ -30,8 +30,9 @@ bun add @resq-systems/constants
 | Import | Contents |
 | --- | --- |
 | `@resq-systems/constants` | everything below |
-| `@resq-systems/constants/tokens` | `colors` (oklch source + email-safe hex), `fonts` (stacks + webfont href), `radii`, `themeColor` (light/dark PWA + viewport `theme-color`) |
-| `@resq-systems/constants/brand` | `brand` — name, legal name, tagline, domains, email addresses, postal address |
+| `@resq-systems/constants/tokens` | `colors` (`oklch` source + email-safe `hex` snapshot, incl. `info`/`success`/`warning`/`danger` status roles), `fonts` (stacks + webfont href), `radii`, `themeColor` (light/dark PWA + viewport `theme-color`), plus the color-role types `ColorRole`, `StatusRole`, `OklchColorRole`, `ColorTokenName` |
+| `@resq-systems/constants/brand` | `brand` — name, product name, legal name, tagline, description, domains, email addresses, legal URLs, socials, company info, logo, postal address |
+| `@resq-systems/constants/tokens.css` | Stylesheet mirroring `./tokens`: the `oklch` color roles, `--resq-chart-1..5` palette, `--resq-radius-*`, and `--resq-font-*` stacks as CSS custom properties on `:root`. `@import` it directly. |
 
 Everything is `as const`, so values are literal-typed and tree-shakeable.
 
@@ -57,7 +58,7 @@ place by being reused across apps, not by being convenient to dump here.
 ## Rules
 
 - **Zero runtime dependencies.** This package must stay dependency-free.
-- Values are data only — no logic, no side effects (`sideEffects: false`).
+- Values are data only — no logic; the JS is side-effect-free. Only the stylesheet (`tokens.css`) is a side-effectful import, declared via `sideEffects`.
 - A change here ripples to every dependent; prefer additive, stable edits.
 
 ## Prerequisites
@@ -67,21 +68,25 @@ place by being reused across apps, not by being convenient to dump here.
 
 ## Consuming in CSS
 
-This package ships **TypeScript token objects, not a stylesheet** — there is no
-`tokens.css` export. To expose the palette as CSS custom properties, generate them
-from the tokens at build time, or reference the hex values directly:
+Import the ready-made stylesheet — it declares the `oklch` color roles, the
+`--resq-chart-1..5` palette, `--resq-radius-*`, and `--resq-font-*` stacks as CSS
+custom properties on `:root`:
 
-```ts
-import { colors, radii } from "@resq-systems/constants/tokens";
+```css
+@import "@resq-systems/constants/tokens.css";
 
-const rootVars = `:root {
-  --color-background: ${colors.hex.background}; /* #0A0E1A */
-  --radius-md: ${radii.md};                     /* 8px */
-}`;
+.panel {
+  background: var(--resq-color-surface);
+  border: 1px solid var(--resq-color-border);
+  border-radius: var(--resq-radius-lg);
+  font-family: var(--resq-font-body);
+}
 ```
 
-For Tailwind v4, map the tokens into your `@theme` block (or a generated file) so
-utilities resolve against the same source of truth as the rest of the platform.
+The stylesheet mirrors `./tokens` (a test fails if the two drift). For Tailwind
+v4, alias these custom properties inside your `@theme` block so utilities resolve
+against the same source of truth. If you need the raw values in TypeScript — or
+the email-safe `hex` snapshot — import the objects from `./tokens` instead.
 
 ## Testing
 

package/lib/tokens.d.ts

@@ -37,7 +37,7 @@ type StatusRole = "info" | "success" | "warning" | "danger";
 declare const colors: {
   readonly oklch: {
     readonly background: "oklch(16.63% 0.0262 269.37)";
-    readonly surface: "oklch(22.90% 0.0302 269.75)";
+    readonly surface: "oklch(19.72% 0.0231 268.80)";
     readonly border: "oklch(26.45% 0.0386 270.81)";
     readonly foreground: "oklch(96.19% 0.0109 274.89)";
     readonly muted: "oklch(64.00% 0.0535 266.82)";
@@ -55,6 +55,12 @@ declare const colors: {
     readonly warning: "#E0A100";
     readonly danger: "#D43E3F";
   };
+  /**
+   * Categorical data-visualization palette — the five `--chart-1..5` oklch
+   * values shipped by `@resq-systems/ui` (canonical dark `:root` scale). Charts
+   * cycle these in order for series colors. `oklch` only (not email-safe).
+   */
+  readonly chart: readonly ["oklch(58.50% 0.1877 24.72)", "oklch(64.20% 0.1560 252.61)", "oklch(73.39% 0.1538 161.68)", "oklch(78.37% 0.1587 72.99)", "oklch(68.62% 0.0471 261.10)"];
 };
 /**
  * Roles indexable on `colors.oklch` — exactly {@link ColorRole}. Type any
@@ -84,12 +90,16 @@ declare const fonts: {
   };
   readonly googleFontsHref: "https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:wght@400;500&family=DM+Mono:wght@500&display=swap";
 };
-/** Border radius scale (px, email-safe). */
+/**
+ * Border radius scale (px, email-safe). Mirrors the shipped `@resq-systems/ui`
+ * `--radius-*` scale: `sm`→token (3px), `md`→control (4px), `lg`→panel (6px),
+ * `xl` (panel + 4px = 10px). `full` is the pill radius (no UI counterpart).
+ */
 declare const radii: {
-  readonly sm: "6px";
-  readonly md: "8px";
-  readonly lg: "12px";
-  readonly xl: "14px";
+  readonly sm: "3px";
+  readonly md: "4px";
+  readonly lg: "6px";
+  readonly xl: "10px";
   readonly full: "999px";
 };
 //#endregion

package/lib/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","names":[],"sources":["../src/tokens.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6BY;;;;;;KAOA;cAEC;;aAEX;aACA;aACA;aACA;aACA;aACA;;;aAGA;aACA;aACA;aACA;aACA;aACA;aACA;aACA;aACA;aACA;;;;;;;;KAYU,8BAA8B,OAAO;;KAGrC,8BAA8B,OAAO;;;;;cAMpC;WACZ;WACA;;;cAIY;WACZ;WACA;WACA;WACA;aACC;aACA;aAUA;;WAED;;;cAKY;WACZ;WACA;WACA;WACA;WACA"}
+{"version":3,"file":"tokens.d.ts","names":[],"sources":["../src/tokens.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6BY;;;;;;KAOA;cAEC;;aAEX;aACA;aACA;aACA;aACA;aACA;;;aAGA;aACA;aACA;aACA;aACA;aACA;aACA;aACA;aACA;aACA;;;;;;;;;;;;;;KAyBU,8BAA8B,OAAO;;KAGrC,8BAA8B,OAAO;;;;;cAMpC;WACZ;WACA;;;cAIY;WACZ;WACA;WACA;WACA;aACC;aACA;aAUA;;WAED;;;;;;;cASY;WACZ;WACA;WACA;WACA;WACA"}

package/lib/tokens.js

@@ -2,7 +2,7 @@
 const colors = {
 	oklch: {
 		background: "oklch(16.63% 0.0262 269.37)",
-		surface: "oklch(22.90% 0.0302 269.75)",
+		surface: "oklch(19.72% 0.0231 268.80)",
 		border: "oklch(26.45% 0.0386 270.81)",
 		foreground: "oklch(96.19% 0.0109 274.89)",
 		muted: "oklch(64.00% 0.0535 266.82)",
@@ -19,7 +19,19 @@ const colors = {
 		success: "#3FB984",
 		warning: "#E0A100",
 		danger: "#D43E3F"
-	}
+	},
+	/**
+	* Categorical data-visualization palette — the five `--chart-1..5` oklch
+	* values shipped by `@resq-systems/ui` (canonical dark `:root` scale). Charts
+	* cycle these in order for series colors. `oklch` only (not email-safe).
+	*/
+	chart: [
+		"oklch(58.50% 0.1877 24.72)",
+		"oklch(64.20% 0.1560 252.61)",
+		"oklch(73.39% 0.1538 161.68)",
+		"oklch(78.37% 0.1587 72.99)",
+		"oklch(68.62% 0.0471 261.10)"
+	]
 };
 /**
 * Browser + PWA `theme-color` / viewport meta colors. `dark` tracks the
@@ -62,12 +74,16 @@ const fonts = {
 	},
 	googleFontsHref: "https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:wght@400;500&family=DM+Mono:wght@500&display=swap"
 };
-/** Border radius scale (px, email-safe). */
+/**
+* Border radius scale (px, email-safe). Mirrors the shipped `@resq-systems/ui`
+* `--radius-*` scale: `sm`→token (3px), `md`→control (4px), `lg`→panel (6px),
+* `xl` (panel + 4px = 10px). `full` is the pill radius (no UI counterpart).
+*/
 const radii = {
-	sm: "6px",
-	md: "8px",
-	lg: "12px",
-	xl: "14px",
+	sm: "3px",
+	md: "4px",
+	lg: "6px",
+	xl: "10px",
 	full: "999px"
 };
 //#endregion

package/lib/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","names":[],"sources":["../src/tokens.ts"],"sourcesContent":["/**\n * Copyright 2026 ResQ Systems, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * ResQ Systems design tokens — the single source of truth shared by `@resq-systems/ui`,\n * `@resq-systems/email-templates`, and app surfaces.\n *\n * `oklch` is the design-system source of truth; `hex` is the email/legacy-safe\n * snapshot (email clients and older targets do not support `oklch()`). Keep the\n * two representations in sync when the palette changes.\n */\n/**\n * The six canonical color roles present in **both** representations. `oklch`\n * (the design-system source of truth) and `hex` (the email-safe snapshot) must\n * each define every one of these.\n */\nexport type ColorRole = \"background\" | \"surface\" | \"border\" | \"foreground\" | \"muted\" | \"primary\";\n\n/**\n * Status roles that exist only in the email-safe `hex` snapshot. `oklch` does\n * not define these, so they are indexable on `colors.hex` but never on\n * `colors.oklch`.\n */\nexport type StatusRole = \"info\" | \"success\" | \"warning\" | \"danger\";\n\nexport const colors = {\n\toklch: {\n\t\tbackground: \"oklch(16.63% 0.0262 269.37)\",\n\t\tsurface: \"oklch(22.90% 0.0302 269.75)\",\n\t\tborder: \"oklch(26.45% 0.0386 270.81)\",\n\t\tforeground: \"oklch(96.19% 0.0109 274.89)\",\n\t\tmuted: \"oklch(64.00% 0.0535 266.82)\",\n\t\tprimary: \"oklch(58.50% 0.1877 24.72)\",\n\t},\n\thex: {\n\t\tbackground: \"#0A0E1A\",\n\t\tsurface: \"#171C2B\",\n\t\tborder: \"#1E2438\",\n\t\tforeground: \"#F0F2FA\",\n\t\tmuted: \"#7D8CAE\",\n\t\tprimary: \"#D43E3F\",\n\t\tinfo: \"#7D8CAE\",\n\t\tsuccess: \"#3FB984\",\n\t\twarning: \"#E0A100\",\n\t\tdanger: \"#D43E3F\",\n\t},\n} as const satisfies {\n\toklch: Record<ColorRole, string>;\n\thex: Record<ColorRole | StatusRole, string>;\n};\n\n/**\n * Roles indexable on `colors.oklch` — exactly {@link ColorRole}. Type any\n * lookup into the oklch source with this so a hex-only {@link StatusRole} can\n * never index it (which would type as `string` yet be `undefined` at runtime).\n */\nexport type OklchColorRole = keyof typeof colors.oklch;\n\n/** Every token name present on the email-safe `hex` snapshot. */\nexport type ColorTokenName = keyof typeof colors.hex;\n\n/**\n * Browser + PWA `theme-color` / viewport meta colors. `dark` tracks the\n * canonical page background; `light` is the light-mode chrome color.\n */\nexport const themeColor = {\n\tlight: \"#E8EAF0\",\n\tdark: colors.hex.background,\n} as const;\n\n/** Brand typefaces, ready-to-use CSS font stacks, and the webfont stylesheet. */\nexport const fonts = {\n\tdisplay: \"Syne\",\n\tbody: \"DM Sans\",\n\tmono: \"DM Mono\",\n\tstacks: {\n\t\tdisplay: [\"Syne\", \"'Helvetica Neue'\", \"Arial\", \"sans-serif\"],\n\t\tbody: [\n\t\t\t\"'DM Sans'\",\n\t\t\t\"-apple-system\",\n\t\t\t\"BlinkMacSystemFont\",\n\t\t\t\"'Segoe UI'\",\n\t\t\t\"Roboto\",\n\t\t\t\"Helvetica\",\n\t\t\t\"Arial\",\n\t\t\t\"sans-serif\",\n\t\t],\n\t\tmono: [\"'DM Mono'\", \"ui-monospace\", \"'SF Mono'\", \"Menlo\", \"Consolas\", \"monospace\"],\n\t},\n\tgoogleFontsHref:\n\t\t\"https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:wght@400;500&family=DM+Mono:wght@500&display=swap\",\n} as const;\n\n/** Border radius scale (px, email-safe). */\nexport const radii = {\n\tsm: \"6px\",\n\tmd: \"8px\",\n\tlg: \"12px\",\n\txl: \"14px\",\n\tfull: \"999px\",\n} as const;\n"],"mappings":";AAsCA,MAAa,SAAS;CACrB,OAAO;EACN,YAAY;EACZ,SAAS;EACT,QAAQ;EACR,YAAY;EACZ,OAAO;EACP,SAAS;CACV;CACA,KAAK;EACJ,YAAY;EACZ,SAAS;EACT,QAAQ;EACR,YAAY;EACZ,OAAO;EACP,SAAS;EACT,MAAM;EACN,SAAS;EACT,SAAS;EACT,QAAQ;CACT;AACD;;;;;AAmBA,MAAa,aAAa;CACzB,OAAO;CACP,MAAM,OAAO,IAAI;AAClB;;AAGA,MAAa,QAAQ;CACpB,SAAS;CACT,MAAM;CACN,MAAM;CACN,QAAQ;EACP,SAAS;GAAC;GAAQ;GAAoB;GAAS;EAAY;EAC3D,MAAM;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACD;EACA,MAAM;GAAC;GAAa;GAAgB;GAAa;GAAS;GAAY;EAAW;CAClF;CACA,iBACC;AACF;;AAGA,MAAa,QAAQ;CACpB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,MAAM;AACP"}
+{"version":3,"file":"tokens.js","names":[],"sources":["../src/tokens.ts"],"sourcesContent":["/**\n * Copyright 2026 ResQ Systems, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * ResQ Systems design tokens — the single source of truth shared by `@resq-systems/ui`,\n * `@resq-systems/email-templates`, and app surfaces.\n *\n * `oklch` is the design-system source of truth; `hex` is the email/legacy-safe\n * snapshot (email clients and older targets do not support `oklch()`). Keep the\n * two representations in sync when the palette changes.\n */\n/**\n * The six canonical color roles present in **both** representations. `oklch`\n * (the design-system source of truth) and `hex` (the email-safe snapshot) must\n * each define every one of these.\n */\nexport type ColorRole = \"background\" | \"surface\" | \"border\" | \"foreground\" | \"muted\" | \"primary\";\n\n/**\n * Status roles that exist only in the email-safe `hex` snapshot. `oklch` does\n * not define these, so they are indexable on `colors.hex` but never on\n * `colors.oklch`.\n */\nexport type StatusRole = \"info\" | \"success\" | \"warning\" | \"danger\";\n\nexport const colors = {\n\toklch: {\n\t\tbackground: \"oklch(16.63% 0.0262 269.37)\",\n\t\tsurface: \"oklch(19.72% 0.0231 268.80)\",\n\t\tborder: \"oklch(26.45% 0.0386 270.81)\",\n\t\tforeground: \"oklch(96.19% 0.0109 274.89)\",\n\t\tmuted: \"oklch(64.00% 0.0535 266.82)\",\n\t\tprimary: \"oklch(58.50% 0.1877 24.72)\",\n\t},\n\thex: {\n\t\tbackground: \"#0A0E1A\",\n\t\tsurface: \"#171C2B\",\n\t\tborder: \"#1E2438\",\n\t\tforeground: \"#F0F2FA\",\n\t\tmuted: \"#7D8CAE\",\n\t\tprimary: \"#D43E3F\",\n\t\tinfo: \"#7D8CAE\",\n\t\tsuccess: \"#3FB984\",\n\t\twarning: \"#E0A100\",\n\t\tdanger: \"#D43E3F\",\n\t},\n\t/**\n\t * Categorical data-visualization palette — the five `--chart-1..5` oklch\n\t * values shipped by `@resq-systems/ui` (canonical dark `:root` scale). Charts\n\t * cycle these in order for series colors. `oklch` only (not email-safe).\n\t */\n\tchart: [\n\t\t\"oklch(58.50% 0.1877 24.72)\",\n\t\t\"oklch(64.20% 0.1560 252.61)\",\n\t\t\"oklch(73.39% 0.1538 161.68)\",\n\t\t\"oklch(78.37% 0.1587 72.99)\",\n\t\t\"oklch(68.62% 0.0471 261.10)\",\n\t],\n} as const satisfies {\n\toklch: Record<ColorRole, `oklch(${string})`>;\n\thex: Record<ColorRole | StatusRole, `#${string}`>;\n\tchart: readonly `oklch(${string})`[];\n};\n\n/**\n * Roles indexable on `colors.oklch` — exactly {@link ColorRole}. Type any\n * lookup into the oklch source with this so a hex-only {@link StatusRole} can\n * never index it (which would type as `string` yet be `undefined` at runtime).\n */\nexport type OklchColorRole = keyof typeof colors.oklch;\n\n/** Every token name present on the email-safe `hex` snapshot. */\nexport type ColorTokenName = keyof typeof colors.hex;\n\n/**\n * Browser + PWA `theme-color` / viewport meta colors. `dark` tracks the\n * canonical page background; `light` is the light-mode chrome color.\n */\nexport const themeColor = {\n\tlight: \"#E8EAF0\",\n\tdark: colors.hex.background,\n} as const;\n\n/** Brand typefaces, ready-to-use CSS font stacks, and the webfont stylesheet. */\nexport const fonts = {\n\tdisplay: \"Syne\",\n\tbody: \"DM Sans\",\n\tmono: \"DM Mono\",\n\tstacks: {\n\t\tdisplay: [\"Syne\", \"'Helvetica Neue'\", \"Arial\", \"sans-serif\"],\n\t\tbody: [\n\t\t\t\"'DM Sans'\",\n\t\t\t\"-apple-system\",\n\t\t\t\"BlinkMacSystemFont\",\n\t\t\t\"'Segoe UI'\",\n\t\t\t\"Roboto\",\n\t\t\t\"Helvetica\",\n\t\t\t\"Arial\",\n\t\t\t\"sans-serif\",\n\t\t],\n\t\tmono: [\"'DM Mono'\", \"ui-monospace\", \"'SF Mono'\", \"Menlo\", \"Consolas\", \"monospace\"],\n\t},\n\tgoogleFontsHref:\n\t\t\"https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:wght@400;500&family=DM+Mono:wght@500&display=swap\",\n} as const;\n\n/**\n * Border radius scale (px, email-safe). Mirrors the shipped `@resq-systems/ui`\n * `--radius-*` scale: `sm`→token (3px), `md`→control (4px), `lg`→panel (6px),\n * `xl` (panel + 4px = 10px). `full` is the pill radius (no UI counterpart).\n */\nexport const radii = {\n\tsm: \"3px\",\n\tmd: \"4px\",\n\tlg: \"6px\",\n\txl: \"10px\",\n\tfull: \"999px\",\n} as const;\n"],"mappings":";AAsCA,MAAa,SAAS;CACrB,OAAO;EACN,YAAY;EACZ,SAAS;EACT,QAAQ;EACR,YAAY;EACZ,OAAO;EACP,SAAS;CACV;CACA,KAAK;EACJ,YAAY;EACZ,SAAS;EACT,QAAQ;EACR,YAAY;EACZ,OAAO;EACP,SAAS;EACT,MAAM;EACN,SAAS;EACT,SAAS;EACT,QAAQ;CACT;;;;;;CAMA,OAAO;EACN;EACA;EACA;EACA;EACA;CACD;AACD;;;;;AAoBA,MAAa,aAAa;CACzB,OAAO;CACP,MAAM,OAAO,IAAI;AAClB;;AAGA,MAAa,QAAQ;CACpB,SAAS;CACT,MAAM;CACN,MAAM;CACN,QAAQ;EACP,SAAS;GAAC;GAAQ;GAAoB;GAAS;EAAY;EAC3D,MAAM;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACD;EACA,MAAM;GAAC;GAAa;GAAgB;GAAa;GAAS;GAAY;EAAW;CAClF;CACA,iBACC;AACF;;;;;;AAOA,MAAa,QAAQ;CACpB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,MAAM;AACP"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@resq-systems/constants",
-	"version": "0.3.0",
+	"version": "0.4.0",
 	"description": "Shared, zero-dependency constants for ResQ Systems apps: design tokens (oklch + email-safe hex), brand identity, and cross-app values",
 	"license": "Apache-2.0",
 	"author": {
@@ -22,14 +22,18 @@
 			"types": "./lib/brand.d.ts",
 			"import": "./lib/brand.js",
 			"default": "./lib/brand.js"
-		}
+		},
+		"./tokens.css": "./src/tokens.css"
 	},
 	"main": "lib/index.js",
 	"module": "lib/index.js",
 	"types": "lib/index.d.ts",
-	"sideEffects": false,
+	"sideEffects": [
+		"**/*.css"
+	],
 	"files": [
 		"lib",
+		"src/tokens.css",
 		"README.md"
 	],
 	"scripts": {

package/src/tokens.css

@@ -0,0 +1,55 @@
+/*!
+ * Copyright 2026 ResQ Systems, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * ResQ Systems design tokens as CSS custom properties — the CSS-consumable
+ * mirror of `src/tokens.ts` (`colors.oklch`, `colors.chart`, `radii`, `fonts`).
+ * The `--resq-*` prefix avoids collisions with app-local custom properties.
+ *
+ * `@import "@resq-systems/constants/tokens.css";`
+ *
+ * Values are the `oklch` design-system source of truth. `tests/tokens-css.test.ts`
+ * fails if any value here drifts from `src/tokens.ts` — keep them in sync.
+ */
+:root {
+	/* Canonical color roles (oklch — design-system source of truth) */
+	--resq-color-background: oklch(16.63% 0.0262 269.37);
+	--resq-color-surface: oklch(19.72% 0.0231 268.8);
+	--resq-color-border: oklch(26.45% 0.0386 270.81);
+	--resq-color-foreground: oklch(96.19% 0.0109 274.89);
+	--resq-color-muted: oklch(64.00% 0.0535 266.82);
+	--resq-color-primary: oklch(58.50% 0.1877 24.72);
+
+	/* Categorical data-visualization palette (--resq-chart-1..5) */
+	--resq-chart-1: oklch(58.50% 0.1877 24.72);
+	--resq-chart-2: oklch(64.20% 0.156 252.61);
+	--resq-chart-3: oklch(73.39% 0.1538 161.68);
+	--resq-chart-4: oklch(78.37% 0.1587 72.99);
+	--resq-chart-5: oklch(68.62% 0.0471 261.1);
+
+	/* Border radius scale */
+	--resq-radius-sm: 3px;
+	--resq-radius-md: 4px;
+	--resq-radius-lg: 6px;
+	--resq-radius-xl: 10px;
+	--resq-radius-full: 999px;
+
+	/* Font stacks */
+	--resq-font-display: Syne, "Helvetica Neue", Arial, sans-serif;
+	--resq-font-body:
+		"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+	--resq-font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+}