@resq-systems/constants 0.3.1 → 0.4.1

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/brand.d.ts

@@ -15,8 +15,15 @@
  * limitations under the License.
  */
 /**
- * ResQ Systems brand identity — names, domains, contact addresses, and legal details
- * shared across apps (marketing site, dashboard, transactional email).
+ * @fileoverview ResQ Systems brand identity constants — names, domains, contact
+ * addresses, and legal details shared across apps (marketing site, dashboard,
+ * transactional email).
+ *
+ * @module @resq-systems/constants/brand
+ */
+/**
+ * ResQ Systems brand identity — names, domains, contact addresses, and legal
+ * details shared across apps (marketing site, dashboard, transactional email).
  *
  * The postal address is ResQ Systems, Inc.'s public Delaware registered-agent
  * address (already public on the DE filing), included so commercial email stays
@@ -33,6 +40,11 @@ declare const brand: {
   readonly tagline: "autonomous drone disaster response";
   /** Long-form product description (metadata, manifest, store listings). */
   readonly description: "The decentralized kinetic operating system for autonomous disaster response. Mesh-networked coordination when infrastructure fails.";
+  /**
+   * Absolute `https://` origins with no trailing slash, so a caller can append
+   * a path directly (`` `${brand.domains.marketing}/pricing` ``). `marketing`
+   * is the apex domain; the others are subdomains of it.
+   */
   readonly domains: {
     readonly app: "https://app.resq.software";
     readonly marketing: "https://resq.software";
@@ -40,6 +52,12 @@ declare const brand: {
     readonly status: "https://status.resq.software";
   };
   readonly email: {
+    /**
+     * RFC 5322 display-name form (`Name <addr>`) for use as a message `From`
+     * header verbatim. Sends from the `send.resq.software` subdomain — the
+     * DKIM/SPF-authenticated envelope domain — which differs from the apex
+     * reply domain used by {@link support}/{@link contact}.
+     */
     readonly from: "ResQ Systems <updates@send.resq.software>";
     readonly support: "support@resq.software";
     readonly contact: "contact@resq.software";
@@ -56,8 +74,8 @@ declare const brand: {
     readonly github: "https://github.com/resq-software";
   };
   readonly company: {
-    readonly stage: "Seed Stage";
-    readonly locations: readonly ["New York", "Texas"];
+    readonly stage: "Pre-Seed";
+    readonly locations: readonly ["Long Island, New York"];
   };
   readonly logo: "https://resq.software/logo.png";
   readonly postalAddress: "ResQ Systems, Inc., 131 Continental Dr, Suite 305, Newark, DE 19713, USA";

package/lib/brand.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"brand.d.ts","names":[],"sources":["../src/brand.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;cAwBa;;WAEZ;;WAEA;;WAEA;;WAEA;;WAEA;WAEA;aACC;aACA;aACA;aACA;;WAED;aACC;aACA;aACA;;WAED;aACC;aACA;;WAED;aACC;;aAEA;aACA;aACA;;WAED;aACC;aACA;;WAED;WACA"}
+{"version":3,"file":"brand.d.ts","names":[],"sources":["../src/brand.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAgCa;;WAEZ;;WAEA;;WAEA;;WAEA;;WAEA;;;;;;WAOA;aACC;aACA;aACA;aACA;;WAED;;;;;;;aAOC;aACA;aACA;;WAED;aACC;aACA;;WAED;aACC;;aAEA;aACA;aACA;;WAED;aACC;aACA;;WAED;WACA"}

package/lib/brand.js

@@ -15,8 +15,15 @@
 * limitations under the License.
 */
 /**
-* ResQ Systems brand identity — names, domains, contact addresses, and legal details
-* shared across apps (marketing site, dashboard, transactional email).
+* @fileoverview ResQ Systems brand identity constants — names, domains, contact
+* addresses, and legal details shared across apps (marketing site, dashboard,
+* transactional email).
+*
+* @module @resq-systems/constants/brand
+*/
+/**
+* ResQ Systems brand identity — names, domains, contact addresses, and legal
+* details shared across apps (marketing site, dashboard, transactional email).
 *
 * The postal address is ResQ Systems, Inc.'s public Delaware registered-agent
 * address (already public on the DE filing), included so commercial email stays
@@ -33,6 +40,11 @@ const brand = {
 	tagline: "autonomous drone disaster response",
 	/** Long-form product description (metadata, manifest, store listings). */
 	description: "The decentralized kinetic operating system for autonomous disaster response. Mesh-networked coordination when infrastructure fails.",
+	/**
+	* Absolute `https://` origins with no trailing slash, so a caller can append
+	* a path directly (`` `${brand.domains.marketing}/pricing` ``). `marketing`
+	* is the apex domain; the others are subdomains of it.
+	*/
 	domains: {
 		app: "https://app.resq.software",
 		marketing: "https://resq.software",
@@ -40,6 +52,12 @@ const brand = {
 		status: "https://status.resq.software"
 	},
 	email: {
+		/**
+		* RFC 5322 display-name form (`Name <addr>`) for use as a message `From`
+		* header verbatim. Sends from the `send.resq.software` subdomain — the
+		* DKIM/SPF-authenticated envelope domain — which differs from the apex
+		* reply domain used by {@link support}/{@link contact}.
+		*/
 		from: "ResQ Systems <updates@send.resq.software>",
 		support: "support@resq.software",
 		contact: "contact@resq.software"
@@ -56,8 +74,8 @@ const brand = {
 		github: "https://github.com/resq-software"
 	},
 	company: {
-		stage: "Seed Stage",
-		locations: ["New York", "Texas"]
+		stage: "Pre-Seed",
+		locations: ["Long Island, New York"]
 	},
 	logo: "https://resq.software/logo.png",
 	postalAddress: "ResQ Systems, Inc., 131 Continental Dr, Suite 305, Newark, DE 19713, USA"

package/lib/brand.js.map

@@ -1 +1 @@
-{"version":3,"file":"brand.js","names":[],"sources":["../src/brand.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 brand identity — names, domains, contact addresses, and legal details\n * shared across apps (marketing site, dashboard, transactional email).\n *\n * The postal address is ResQ Systems, Inc.'s public Delaware registered-agent\n * address (already public on the DE filing), included so commercial email stays\n * CAN-SPAM compliant by default.\n */\nexport const brand = {\n\t/** Short brand name. */\n\tname: \"ResQ Systems\",\n\t/** Product name (marketing / app title). */\n\tproductName: \"ResQ Tactical OS\",\n\t/** Registered legal entity. */\n\tlegalName: \"ResQ Systems, Inc.\",\n\t/** One-line positioning tagline. */\n\ttagline: \"autonomous drone disaster response\",\n\t/** Long-form product description (metadata, manifest, store listings). */\n\tdescription:\n\t\t\"The decentralized kinetic operating system for autonomous disaster response. Mesh-networked coordination when infrastructure fails.\",\n\tdomains: {\n\t\tapp: \"https://app.resq.software\",\n\t\tmarketing: \"https://resq.software\",\n\t\tdocs: \"https://docs.resq.software\",\n\t\tstatus: \"https://status.resq.software\",\n\t},\n\temail: {\n\t\tfrom: \"ResQ Systems <updates@send.resq.software>\",\n\t\tsupport: \"support@resq.software\",\n\t\tcontact: \"contact@resq.software\",\n\t},\n\tlegal: {\n\t\ttermsUrl: \"https://resq.software/legal/terms\",\n\t\tprivacyUrl: \"https://resq.software/legal/privacy\",\n\t},\n\tsocials: {\n\t\tx: \"https://x.com/resqsystems_inc\",\n\t\t/** The `@handle` form for `twitter:creator`/`site` meta (matches the `x` profile). */\n\t\txHandle: \"@resqsystems_inc\",\n\t\tlinkedin: \"https://www.linkedin.com/company/resq-systems-inc\",\n\t\tgithub: \"https://github.com/resq-software\",\n\t},\n\tcompany: {\n\t\tstage: \"Seed Stage\",\n\t\tlocations: [\"New York\", \"Texas\"],\n\t},\n\tlogo: \"https://resq.software/logo.png\",\n\tpostalAddress: \"ResQ Systems, Inc., 131 Continental Dr, Suite 305, Newark, DE 19713, USA\",\n} as const;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAa,QAAQ;;CAEpB,MAAM;;CAEN,aAAa;;CAEb,WAAW;;CAEX,SAAS;;CAET,aACC;CACD,SAAS;EACR,KAAK;EACL,WAAW;EACX,MAAM;EACN,QAAQ;CACT;CACA,OAAO;EACN,MAAM;EACN,SAAS;EACT,SAAS;CACV;CACA,OAAO;EACN,UAAU;EACV,YAAY;CACb;CACA,SAAS;EACR,GAAG;;EAEH,SAAS;EACT,UAAU;EACV,QAAQ;CACT;CACA,SAAS;EACR,OAAO;EACP,WAAW,CAAC,YAAY,OAAO;CAChC;CACA,MAAM;CACN,eAAe;AAChB"}
+{"version":3,"file":"brand.js","names":[],"sources":["../src/brand.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 * @fileoverview ResQ Systems brand identity constants — names, domains, contact\n * addresses, and legal details shared across apps (marketing site, dashboard,\n * transactional email).\n *\n * @module @resq-systems/constants/brand\n */\n\n/**\n * ResQ Systems brand identity — names, domains, contact addresses, and legal\n * details shared across apps (marketing site, dashboard, transactional email).\n *\n * The postal address is ResQ Systems, Inc.'s public Delaware registered-agent\n * address (already public on the DE filing), included so commercial email stays\n * CAN-SPAM compliant by default.\n */\nexport const brand = {\n\t/** Short brand name. */\n\tname: \"ResQ Systems\",\n\t/** Product name (marketing / app title). */\n\tproductName: \"ResQ Tactical OS\",\n\t/** Registered legal entity. */\n\tlegalName: \"ResQ Systems, Inc.\",\n\t/** One-line positioning tagline. */\n\ttagline: \"autonomous drone disaster response\",\n\t/** Long-form product description (metadata, manifest, store listings). */\n\tdescription:\n\t\t\"The decentralized kinetic operating system for autonomous disaster response. Mesh-networked coordination when infrastructure fails.\",\n\t/**\n\t * Absolute `https://` origins with no trailing slash, so a caller can append\n\t * a path directly (`` `${brand.domains.marketing}/pricing` ``). `marketing`\n\t * is the apex domain; the others are subdomains of it.\n\t */\n\tdomains: {\n\t\tapp: \"https://app.resq.software\",\n\t\tmarketing: \"https://resq.software\",\n\t\tdocs: \"https://docs.resq.software\",\n\t\tstatus: \"https://status.resq.software\",\n\t},\n\temail: {\n\t\t/**\n\t\t * RFC 5322 display-name form (`Name <addr>`) for use as a message `From`\n\t\t * header verbatim. Sends from the `send.resq.software` subdomain — the\n\t\t * DKIM/SPF-authenticated envelope domain — which differs from the apex\n\t\t * reply domain used by {@link support}/{@link contact}.\n\t\t */\n\t\tfrom: \"ResQ Systems <updates@send.resq.software>\",\n\t\tsupport: \"support@resq.software\",\n\t\tcontact: \"contact@resq.software\",\n\t},\n\tlegal: {\n\t\ttermsUrl: \"https://resq.software/legal/terms\",\n\t\tprivacyUrl: \"https://resq.software/legal/privacy\",\n\t},\n\tsocials: {\n\t\tx: \"https://x.com/resqsystems_inc\",\n\t\t/** The `@handle` form for `twitter:creator`/`site` meta (matches the `x` profile). */\n\t\txHandle: \"@resqsystems_inc\",\n\t\tlinkedin: \"https://www.linkedin.com/company/resq-systems-inc\",\n\t\tgithub: \"https://github.com/resq-software\",\n\t},\n\tcompany: {\n\t\tstage: \"Pre-Seed\",\n\t\tlocations: [\"Long Island, New York\"],\n\t},\n\tlogo: \"https://resq.software/logo.png\",\n\tpostalAddress: \"ResQ Systems, Inc., 131 Continental Dr, Suite 305, Newark, DE 19713, USA\",\n} as const;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,MAAa,QAAQ;;CAEpB,MAAM;;CAEN,aAAa;;CAEb,WAAW;;CAEX,SAAS;;CAET,aACC;;;;;;CAMD,SAAS;EACR,KAAK;EACL,WAAW;EACX,MAAM;EACN,QAAQ;CACT;CACA,OAAO;;;;;;;EAON,MAAM;EACN,SAAS;EACT,SAAS;CACV;CACA,OAAO;EACN,UAAU;EACV,YAAY;CACb;CACA,SAAS;EACR,GAAG;;EAEH,SAAS;EACT,UAAU;EACV,QAAQ;CACT;CACA,SAAS;EACR,OAAO;EACP,WAAW,CAAC,uBAAuB;CACpC;CACA,MAAM;CACN,eAAe;AAChB"}

package/lib/index.d.ts

@@ -1,3 +1,3 @@
 import { brand } from "./brand.js";
 import { ColorRole, ColorTokenName, OklchColorRole, StatusRole, colors, fonts, radii, themeColor } from "./tokens.js";
-export { ColorRole, ColorTokenName, OklchColorRole, StatusRole, brand, colors, fonts, radii, themeColor };
+export { type ColorRole, type ColorTokenName, type OklchColorRole, type StatusRole, brand, colors, fonts, radii, themeColor };

package/lib/tokens.d.ts

@@ -15,29 +15,55 @@
  * limitations under the License.
  */
 /**
- * ResQ Systems design tokens — the single source of truth shared by `@resq-systems/ui`,
- * `@resq-systems/email-templates`, and app surfaces.
+ * @fileoverview ResQ Systems design tokens (colors, theme colors, fonts, radii) —
+ * the single source of truth shared by `@resq-systems/ui`,
+ * `@resq-systems/email-templates`, and app surfaces. `oklch` is the design-system
+ * source of truth; `hex` is the email/legacy-safe snapshot (email clients and
+ * older targets do not support `oklch()`), so keep the two representations in sync
+ * when the palette changes.
  *
- * `oklch` is the design-system source of truth; `hex` is the email/legacy-safe
- * snapshot (email clients and older targets do not support `oklch()`). Keep the
- * two representations in sync when the palette changes.
+ * @module @resq-systems/constants/tokens
  */
 /**
  * The six canonical color roles present in **both** representations. `oklch`
  * (the design-system source of truth) and `hex` (the email-safe snapshot) must
  * each define every one of these.
+ *
+ * These are semantic *roles*, not raw swatches: consumers reference
+ * `colors.oklch.primary`, never the literal channel values, so a palette change
+ * updates the token once. The union has no meaningful ordering — membership, not
+ * position, is the contract.
  */
 type ColorRole = "background" | "surface" | "border" | "foreground" | "muted" | "primary";
 /**
  * Status roles that exist only in the email-safe `hex` snapshot. `oklch` does
  * not define these, so they are indexable on `colors.hex` but never on
- * `colors.oklch`.
+ * {@link ColorRole} / `colors.oklch` — the type split enforces that asymmetry at
+ * compile time. In apps these four states come from the `@resq-systems/ui`
+ * theme's own status tokens rather than from here; the hex copies exist so
+ * transactional email (which can't evaluate `oklch()`) still has them.
  */
 type StatusRole = "info" | "success" | "warning" | "danger";
+/**
+ * The canonical palette in its two representations. `oklch` is the source of
+ * truth; `hex` is a hand-maintained snapshot that must resolve to the same
+ * perceived color for each shared {@link ColorRole}, because email clients and
+ * older render targets can't evaluate `oklch()`. Editing one representation
+ * without the other silently drifts email away from the app — the two are only
+ * *structurally* linked by the `satisfies` clause below, not value-checked.
+ *
+ * @example
+ * ```ts
+ * import { colors } from "@resq-systems/constants/tokens";
+ *
+ * colors.oklch.primary; // → "oklch(58.50% 0.1877 24.72)"
+ * colors.hex.danger;    // → "#D43E3F" (status role — hex only)
+ * ```
+ */
 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 +81,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
@@ -65,14 +97,27 @@ type OklchColorRole = keyof typeof colors.oklch;
 /** Every token name present on the email-safe `hex` snapshot. */
 type ColorTokenName = keyof typeof colors.hex;
 /**
- * Browser + PWA `theme-color` / viewport meta colors. `dark` tracks the
- * canonical page background; `light` is the light-mode chrome color.
+ * Browser + PWA `theme-color` / viewport meta colors, keyed by
+ * `prefers-color-scheme`. `dark` is aliased to {@link colors}`.hex.background`
+ * (not a re-typed copy) so the browser chrome always matches the dark page
+ * background exactly; `light` is a standalone light-mode chrome color with no
+ * palette counterpart. Hex, not oklch, because `<meta name="theme-color">`
+ * across browsers doesn't accept `oklch()`.
  */
 declare const themeColor: {
   readonly light: "#E8EAF0";
   readonly dark: "#0A0E1A";
 };
-/** Brand typefaces, ready-to-use CSS font stacks, and the webfont stylesheet. */
+/**
+ * Brand typefaces, ready-to-use CSS font stacks, and the webfont stylesheet.
+ *
+ * Within each {@link fonts.stacks} array the **first** entry is the brand face
+ * and the rest are ordered fallbacks the browser walks until one resolves;
+ * multi-word family names are pre-quoted so the array can be joined into a
+ * `font-family` value verbatim. {@link fonts.googleFontsHref} must stay in sync
+ * with these families and the weights they're actually rendered at — a face or
+ * weight used in the app but missing from the href won't load.
+ */
 declare const fonts: {
   readonly display: "Syne";
   readonly body: "DM Sans";
@@ -84,12 +129,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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqCY;;;;;;;;;KAUA;;;;;;;;;;;;;;;;;cAkBC;;aAEX;aACA;aACA;aACA;aACA;aACA;;;aAGA;aACA;aACA;aACA;aACA;aACA;aACA;aACA;aACA;aACA;;;;;;;;;;;;;;KAyBU,8BAA8B,OAAO;;KAGrC,8BAA8B,OAAO;;;;;;;;;cAUpC;WACZ;WACA;;;;;;;;;;;;cAaY;WACZ;WACA;WACA;WACA;aACC;aACA;aAUA;;WAED;;;;;;;cASY;WACZ;WACA;WACA;WACA;WACA"}

package/lib/tokens.js

@@ -1,8 +1,24 @@
 //#region src/tokens.ts
+/**
+* The canonical palette in its two representations. `oklch` is the source of
+* truth; `hex` is a hand-maintained snapshot that must resolve to the same
+* perceived color for each shared {@link ColorRole}, because email clients and
+* older render targets can't evaluate `oklch()`. Editing one representation
+* without the other silently drifts email away from the app — the two are only
+* *structurally* linked by the `satisfies` clause below, not value-checked.
+*
+* @example
+* ```ts
+* import { colors } from "@resq-systems/constants/tokens";
+*
+* colors.oklch.primary; // → "oklch(58.50% 0.1877 24.72)"
+* colors.hex.danger;    // → "#D43E3F" (status role — hex only)
+* ```
+*/
 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,17 +35,42 @@ 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
-* canonical page background; `light` is the light-mode chrome color.
+* Browser + PWA `theme-color` / viewport meta colors, keyed by
+* `prefers-color-scheme`. `dark` is aliased to {@link colors}`.hex.background`
+* (not a re-typed copy) so the browser chrome always matches the dark page
+* background exactly; `light` is a standalone light-mode chrome color with no
+* palette counterpart. Hex, not oklch, because `<meta name="theme-color">`
+* across browsers doesn't accept `oklch()`.
 */
 const themeColor = {
 	light: "#E8EAF0",
 	dark: colors.hex.background
 };
-/** Brand typefaces, ready-to-use CSS font stacks, and the webfont stylesheet. */
+/**
+* Brand typefaces, ready-to-use CSS font stacks, and the webfont stylesheet.
+*
+* Within each {@link fonts.stacks} array the **first** entry is the brand face
+* and the rest are ordered fallbacks the browser walks until one resolves;
+* multi-word family names are pre-quoted so the array can be joined into a
+* `font-family` value verbatim. {@link fonts.googleFontsHref} must stay in sync
+* with these families and the weights they're actually rendered at — a face or
+* weight used in the app but missing from the href won't load.
+*/
 const fonts = {
 	display: "Syne",
 	body: "DM Sans",
@@ -62,12 +103,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, `oklch(${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 * @fileoverview ResQ Systems design tokens (colors, theme colors, fonts, radii) —\n * the single source of truth shared by `@resq-systems/ui`,\n * `@resq-systems/email-templates`, and app surfaces. `oklch` is the design-system\n * source of truth; `hex` is the email/legacy-safe snapshot (email clients and\n * older targets do not support `oklch()`), so keep the two representations in sync\n * when the palette changes.\n *\n * @module @resq-systems/constants/tokens\n */\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 *\n * These are semantic *roles*, not raw swatches: consumers reference\n * `colors.oklch.primary`, never the literal channel values, so a palette change\n * updates the token once. The union has no meaningful ordering — membership, not\n * position, is the contract.\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 * {@link ColorRole} / `colors.oklch` — the type split enforces that asymmetry at\n * compile time. In apps these four states come from the `@resq-systems/ui`\n * theme's own status tokens rather than from here; the hex copies exist so\n * transactional email (which can't evaluate `oklch()`) still has them.\n */\nexport type StatusRole = \"info\" | \"success\" | \"warning\" | \"danger\";\n\n/**\n * The canonical palette in its two representations. `oklch` is the source of\n * truth; `hex` is a hand-maintained snapshot that must resolve to the same\n * perceived color for each shared {@link ColorRole}, because email clients and\n * older render targets can't evaluate `oklch()`. Editing one representation\n * without the other silently drifts email away from the app — the two are only\n * *structurally* linked by the `satisfies` clause below, not value-checked.\n *\n * @example\n * ```ts\n * import { colors } from \"@resq-systems/constants/tokens\";\n *\n * colors.oklch.primary; // → \"oklch(58.50% 0.1877 24.72)\"\n * colors.hex.danger;    // → \"#D43E3F\" (status role — hex only)\n * ```\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, keyed by\n * `prefers-color-scheme`. `dark` is aliased to {@link colors}`.hex.background`\n * (not a re-typed copy) so the browser chrome always matches the dark page\n * background exactly; `light` is a standalone light-mode chrome color with no\n * palette counterpart. Hex, not oklch, because `<meta name=\"theme-color\">`\n * across browsers doesn't accept `oklch()`.\n */\nexport const themeColor = {\n\tlight: \"#E8EAF0\",\n\tdark: colors.hex.background,\n} as const;\n\n/**\n * Brand typefaces, ready-to-use CSS font stacks, and the webfont stylesheet.\n *\n * Within each {@link fonts.stacks} array the **first** entry is the brand face\n * and the rest are ordered fallbacks the browser walks until one resolves;\n * multi-word family names are pre-quoted so the array can be joined into a\n * `font-family` value verbatim. {@link fonts.googleFontsHref} must stay in sync\n * with these families and the weights they're actually rendered at — a face or\n * weight used in the app but missing from the href won't load.\n */\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":";;;;;;;;;;;;;;;;;AAiEA,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;;;;;;;;;AAwBA,MAAa,aAAa;CACzB,OAAO;CACP,MAAM,OAAO,IAAI;AAClB;;;;;;;;;;;AAYA,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.1",
+	"version": "0.4.1",
 	"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": {
@@ -41,7 +45,7 @@
 		"@total-typescript/ts-reset": "^0.6.1",
 		"@types/node": "^26.1.1",
 		"@vitest/coverage-v8": "4.1.10",
-		"tsdown": "^0.22.4",
+		"tsdown": "^0.22.9",
 		"typescript": "7.0.2",
 		"vitest": "4.1.8"
 	},

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;
+}