@monospaced/set-config 0.0.0

package/README.md

@@ -0,0 +1,95 @@
+# @monospaced/set-config
+
+Shared developer-tooling config for Set. ESLint, Stylelint, Prettier, browserslist presets plus the `--set-*` token catalog for editor autocomplete and tooling — install once, plug in via subpath imports.
+
+## ESLint
+
+Flat-config preset that adds Set's import/export sort convention (`simple-import-sort`) for `.mjs` / `.ts` / `.tsx`. Layer it onto your own ESLint baseline — bring your own TypeScript / JSON / JS recommended.
+
+```js
+// eslint.config.mjs
+import setEslint from "@monospaced/set-config/eslint";
+
+export default [
+  // your TypeScript / JSON / JS configs here
+  ...setEslint,
+  // your local rules / overrides
+];
+```
+
+`eslint` itself is a peer dependency — install it alongside.
+
+## Stylelint
+
+Drop-in shareable config — extends `stylelint-config-standard` and layers on Set's CSS authoring discipline: alphabetical property ordering (`stylelint-order`), token-discipline rules (no raw colors, no absolute lengths, no raw time, no `!important`), and logical-CSS enforcement (`stylelint-plugin-logical-css`) so component CSS stays portable across writing modes.
+
+```js
+// .stylelintrc.mjs
+export default {
+  extends: ["@monospaced/set-config/stylelint"],
+};
+```
+
+Or as JSON:
+
+```json
+{
+  "extends": ["@monospaced/set-config/stylelint"]
+}
+```
+
+`stylelint` itself is a peer dependency — install it alongside.
+
+### Authoring stance
+
+This preset is opinionated. It encodes Set's compose-first / custom-with-tokens authoring discipline rather than a generic Stylelint baseline. Two defaults are worth highlighting because they often surface in consumer projects:
+
+- **Same-file custom-property scope.** The `set/set-known-tokens` rule rejects `var(--*)` references that aren't defined in the same file — including consumers' own organisation across CSS files (`theme.css` defining vars, `card.css` consuming them). Define within the file you use it in. Catalog tokens (`--set-*` from the catalog) and same-file definitions both pass; everything else fails.
+- **Tight value lists.** `border-radius`, `border-width`, `box-shadow`, `font`, `font-weight`, `line-height`, `opacity`, and the timing-function properties only accept `var()`, function calls (`calc()`, `cubic-bezier()`, etc.), `0`/`1`/keywords, and percentages.
+
+If your project organises tokens across files and you want catalog enforcement without same-file scope, opt out:
+
+```js
+export default {
+  extends: ["@monospaced/set-config/stylelint"],
+  rules: {
+    "set/set-known-tokens": [true, { allowCrossFile: true }],
+  },
+};
+```
+
+Catalog enforcement for `--set-*` references is preserved; non-`--set-` customs pass through. Any individual rule can be turned off the usual way (`"rule-name": null`) — overrides are normal.
+
+## Token catalog
+
+`@monospaced/set-config/set.catalog.css` is a `:root` block listing every published `--set-*` token with its resolved value and `$description`. Used two ways:
+
+- **Editor autocomplete.** For VS Code, drop a copy or symlink into your project's `.vscode/` directory — VS Code's CSS workspace scan picks up the declarations and surfaces typeahead and value hover for every `var(--set-*)` when authoring CSS. Other editors with custom-CSS-data support can consume the same file via their own configuration.
+
+  ```sh
+  cp node_modules/@monospaced/set-config/set.catalog.css .vscode/
+  ```
+
+- **Stylelint validation.** The Stylelint preset's `set/set-known-tokens` rule reads the catalog automatically to validate `var(--set-*)` references. No setup required beyond extending the preset.
+
+## Browserslist query
+
+```ts
+import browserslist from "@monospaced/set-config/browserslist";
+```
+
+Use the query directly in tools that accept query arrays (for example Autoprefixer `overrideBrowserslist`).
+
+For plain `package.json` `browserslist` fields, use the equivalent query:
+
+```json
+{
+  "browserslist": ["baseline widely available"]
+}
+```
+
+## Vite/esbuild target
+
+```ts
+import target from "@monospaced/set-config/browserslist/esbuild";
+```

package/browserslist/esbuild.d.ts

@@ -0,0 +1,3 @@
+declare const esbuildTarget: string;
+
+export default esbuildTarget;

package/browserslist/esbuild.mjs

@@ -0,0 +1,3 @@
+const esbuildTarget = "baseline-widely-available";
+
+export default esbuildTarget;

package/browserslist/index.d.ts

@@ -0,0 +1,3 @@
+declare const browserslist: string[];
+
+export default browserslist;

package/browserslist/index.mjs

@@ -0,0 +1,3 @@
+const browserslist = ["baseline widely available"];
+
+export default browserslist;

package/eslint/index.d.ts

@@ -0,0 +1,5 @@
+import type { Linter } from "eslint";
+
+declare const eslintConfig: Linter.Config[];
+
+export default eslintConfig;

package/eslint/index.mjs

@@ -0,0 +1,14 @@
+import simpleImportSort from "eslint-plugin-simple-import-sort";
+
+const eslintConfig = [
+  {
+    files: ["**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}"],
+    plugins: { "simple-import-sort": simpleImportSort },
+    rules: {
+      "simple-import-sort/imports": "error",
+      "simple-import-sort/exports": "error",
+    },
+  },
+];
+
+export default eslintConfig;

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@monospaced/set-config",
+  "version": "0.0.0",
+  "description": "Shared developer-tooling config for Set. ESLint, Stylelint, Prettier, browserslist presets plus the --set-* token catalog for editor autocomplete and tooling.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/monospaced/set.git",
+    "directory": "packages/config"
+  },
+  "type": "module",
+  "files": [
+    "browserslist",
+    "eslint",
+    "stylelint",
+    "set.catalog.css",
+    "README.md"
+  ],
+  "types": "./browserslist/index.d.ts",
+  "exports": {
+    "./browserslist": {
+      "types": "./browserslist/index.d.ts",
+      "default": "./browserslist/index.mjs"
+    },
+    "./browserslist/esbuild": {
+      "types": "./browserslist/esbuild.d.ts",
+      "default": "./browserslist/esbuild.mjs"
+    },
+    "./eslint": {
+      "types": "./eslint/index.d.ts",
+      "default": "./eslint/index.mjs"
+    },
+    "./stylelint": {
+      "types": "./stylelint/index.d.ts",
+      "default": "./stylelint/index.mjs"
+    }
+  },
+  "browserslist": [
+    "baseline widely available"
+  ],
+  "dependencies": {
+    "eslint-plugin-simple-import-sort": "^13.0.0",
+    "stylelint-config-standard": "^40.0.0",
+    "stylelint-declaration-strict-value": "^1.11.1",
+    "stylelint-order": "^8.1.1",
+    "stylelint-plugin-logical-css": "^2.1.0"
+  },
+  "peerDependencies": {
+    "eslint": "^10.0.0",
+    "stylelint": "^17.0.0"
+  },
+  "scripts": {
+    "verify": "node scripts/verify.mjs"
+  }
+}

package/set.catalog.css

@@ -0,0 +1,291 @@
+/*!
+ * Set token catalog. Lookup file for editor autocomplete and tooling
+ * (e.g. stylelint validation). Place in your editor's CSS-data directory
+ * (`.vscode/` for VS Code) for `--set-*` autocomplete in CSS files.
+ *
+ * Generated; do not edit.
+ */
+:root {
+  --set-breakpoint-baseline: 20rem; /** Baseline breakpoint. The smallest viewport the system targets. Layouts should be functional at this width. */
+  --set-breakpoint-desktop: 90rem; /** Desktop breakpoint. Use as the boundary at which desktop-class layouts engage. */
+  --set-breakpoint-laptop: 80rem; /** Laptop breakpoint. Use as the boundary at which standard-laptop-class layouts engage. */
+  --set-breakpoint-mobile: 24rem; /** Mobile breakpoint. Use as the boundary between baseline and mobile-class layouts. */
+  --set-breakpoint-notebook: 64rem; /** Notebook breakpoint. Use as the boundary at which compact-laptop-class layouts engage. */
+  --set-breakpoint-tablet: 48rem; /** Tablet breakpoint. Use as the boundary at which tablet-class layouts engage. */
+  --set-breakpoint-widescreen: 96rem; /** Widescreen breakpoint. Use as the boundary at which widescreen-class layouts engage. */
+  --set-color-avatar-01: #b14b7d; /** Avatar palette slot 01. */
+  --set-color-avatar-02: #982d61; /** Avatar palette slot 02. */
+  --set-color-avatar-03: #59002b; /** Avatar palette slot 03. */
+  --set-color-avatar-04: #6363ca; /** Avatar palette slot 04. */
+  --set-color-avatar-05: #4848b7; /** Avatar palette slot 05. */
+  --set-color-avatar-06: #0c0c8f; /** Avatar palette slot 06. */
+  --set-color-avatar-07: #9b622a; /** Avatar palette slot 07. */
+  --set-color-avatar-08: #854608; /** Avatar palette slot 08. */
+  --set-color-avatar-09: #432200; /** Avatar palette slot 09. */
+  --set-color-avatar-default: #424444; /** Default avatar background. Use as a fallback when no palette slot has been assigned. Slots 01–09 provide a palette for distinguishable per-user backgrounds when no uploaded image is available. */
+  --set-color-background-default: #f8fbfb; /** Default page background. Use for the main canvas behind content. */
+  --set-color-background-panel: #ffffff; /** Elevated surface background. Use for cards, modals, and other contained surfaces that sit above the page. */
+  --set-color-background-scrim: rgba(0, 0, 0, 0.56); /** Translucent overlay. Use as a backdrop behind overlay surfaces (e.g. modals, drawers) to dim underlying content while keeping it partially visible. */
+  --set-color-background-subtle: #f1f4f4; /** Low-contrast surface background. Use for small discrete surfaces (inline code, zebra stripes, disabled inputs) that need light differentiation. */
+  --set-color-base16-00: #f4fbfb; /** Base16 palette slot 00. Default background for code blocks and syntax-highlighted regions. */
+  --set-color-base16-01: #e9f9f9; /** Base16 palette slot 01. Lighter background variant (panels, gutters in code views). */
+  --set-color-base16-02: #009191; /** Base16 palette slot 02. Selection background. */
+  --set-color-base16-03: #424444; /** Base16 palette slot 03. Comments, invisibles, and line highlights. */
+  --set-color-base16-04: #222424; /** Base16 palette slot 04. Dark foreground for status bars and chrome around code blocks. */
+  --set-color-base16-05: #181a1a; /** Base16 palette slot 05. Default foreground color for code text. */
+  --set-color-base16-06: #0e0f0f; /** Base16 palette slot 06. Light foreground variant for emphasised tokens. */
+  --set-color-base16-07: #001919; /** Base16 palette slot 07. Light background variant. */
+  --set-color-base16-08: #830b0b; /** Base16 palette slot 08. Variables, errors, and deletions. */
+  --set-color-base16-09: #854608; /** Base16 palette slot 09. Integers, booleans, constants, and numeric literals. */
+  --set-color-base16-0a: #727204; /** Base16 palette slot 0a. Classes, search highlight backgrounds. */
+  --set-color-base16-0b: #437d08; /** Base16 palette slot 0b. Strings, additions, and inherited colors. */
+  --set-color-base16-0c: #007c7c; /** Base16 palette slot 0c. Regular expressions and escape characters. */
+  --set-color-base16-0d: #05407a; /** Base16 palette slot 0d. Functions, methods, and headings. */
+  --set-color-base16-0e: #6363ca; /** Base16 palette slot 0e. Keywords, storage, and language directives. */
+  --set-color-base16-0f: #7f0440; /** Base16 palette slot 0f. Deprecated, opening/closing tags, and embedded language markers. */
+  --set-color-border-brand: #91dcdc; /** Brand-tinted border. A decorative brand flourish (e.g. interactive cards, code blocks). */
+  --set-color-border-default: #c7c9c9; /** Default border color. Use for standard borders and dividers. */
+  --set-color-border-subtle: #e2e4e4; /** Low-contrast border. Use where the border should recede visually. */
+  --set-color-brand-primary: #007c7c; /** Primary brand color. Use for prominent brand expressions. */
+  --set-color-brand-support: #91dcdc; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */
+  --set-color-foreground-contrast: #f8fbfb; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */
+  --set-color-foreground-default: #0b0c0c; /** Default foreground color. Use as the system's standard color for text and icons. */
+  --set-color-foreground-muted-non-text: #888b8a; /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */
+  --set-color-foreground-muted-text: #646766; /** Muted text color. Use for secondary text (helper copy, metadata, disabled labels) where lower emphasis is appropriate. */
+  --set-color-foreground-prose: #0e0f0f; /** Body copy color.  Slightly softer than the default foreground for visual comfort. */
+  --set-color-interactive-active: #004848; /** Active (pressed) state color for interactive elements. */
+  --set-color-interactive-default: #007c7c; /** Default interactive color. Use for links and primary actionable elements in their resting state. */
+  --set-color-interactive-focus: #bf5abf; /** Focus indicator color. Use for focus rings and keyboard-focus outlines on any interactive element. */
+  --set-color-interactive-hover: #006161; /** Hover state color for interactive elements. */
+  --set-color-interactive-neutral-active: #004848; /** Active (pressed) state color for neutral interactive elements. */
+  --set-color-interactive-neutral-default: #0b0c0c; /** Neutral interactive color. Use for links and actions that shouldn't compete with brand-colored interactive elements (control labels, secondary controls, navigation). */
+  --set-color-interactive-neutral-focus: #bf5abf; /** Focus state for neutral interactive elements. Inherits the standard interactive focus color for consistency across element types. */
+  --set-color-interactive-neutral-hover: #007c7c; /** Hover state color for neutral interactive elements. */
+  --set-color-interactive-neutral-visited: #0b0c0c; /** Visited state color for neutral interactive elements. Inherits the default neutral interactive color. */
+  --set-color-interactive-prose-active: #004848; /** Active (pressed) state color for prose links. */
+  --set-color-interactive-prose-active-decoration: #004848; /** Underline color for prose links during active (pressed) state. */
+  --set-color-interactive-prose-default: #007c7c; /** Inline link color for prose. Pairs with `foreground.prose`. Tuned for sufficient contrast against the softer prose text color. */
+  --set-color-interactive-prose-focus: #bf5abf; /** Focus state color for prose links. */
+  --set-color-interactive-prose-hover: #007c7c; /** Hover state color for prose links. */
+  --set-color-interactive-prose-hover-decoration: #91dcdc; /** Underline color for prose links on hover. */
+  --set-color-interactive-prose-visited: #8958bb; /** Visited inline prose link color. */
+  --set-color-interactive-visited: #007c7c; /** Visited interactive color for links the user has already followed. Inherits the default interactive color. */
+  --set-color-logo-default: #007c7c; /** Logo color. Use as the fill for the brand mark. */
+  --set-color-logo-neutral: #000000; /** Neutral logo color. Use when the branded logo color would clash with surrounding content (e.g. over imagery, in monochrome contexts). */
+  --set-color-status-error-default: #830b0b; /** Error status color. Use for foreground content (text, icons) and borders conveying failure or destructive action. */
+  --set-color-status-error-subtle: #fff3f3; /** Subtle error background. Use as a fill behind error messages. */
+  --set-color-status-info-default: #05407a; /** Informational status color. Use for foreground content (text, icons) and borders conveying information or neutral notices. */
+  --set-color-status-info-subtle: #f0f7ff; /** Subtle info background. Use as a fill behind info messages. */
+  --set-color-status-success-default: #118111; /** Success status color. Use for foreground content (text, icons) and borders conveying positive outcomes. */
+  --set-color-status-success-subtle: #edf9ed; /** Subtle success background. Use as a fill behind success messages. */
+  --set-color-status-warning-default: #727204; /** Warning status color. Use for foreground content (text, icons) and borders conveying caution. */
+  --set-color-status-warning-subtle: #f7f7e7; /** Subtle warning background. Use as a fill behind warning messages. */
+  --set-effect-filter-image: 0; /** Image filter. Use on imagery (photos, illustrations) to apply a styled image treatment. */
+  --set-effect-opacity-demoted: 0.4; /** Opacity for de-emphasised content. Use for elements pushed visually into the background but still perceivable (e.g. dimming surrounding content to draw attention to a focused element). */
+  --set-effect-opacity-disabled: 0.4; /** Opacity for disabled controls. A fallback for when color treatments (e.g. muted foreground, subtle background) can't fully convey the state. */
+  --set-effect-shadow-default: 0.125rem 0.125rem 0.25rem 0rem rgb(0% 0% 0% / 0.08); /** Default elevation shadow. Use on any element that should appear lifted above the page (cards, popovers, controls). */
+  --set-effect-stroke-inset: 0.25rem; /** Inset stroke. Use with outset to create a decorative offset stroke effect (e.g. on cards). Applied at the block-end and inline-end edges. */
+  --set-effect-stroke-outset: -0.25rem; /** Outset stroke. Use with inset to create a decorative offset stroke effect (e.g. on cards). Applied at the block-start and inline-start edges. */
+  --set-layout-border-width-default: 0.0625rem; /** Default border width. Use as the system's standard border weight. */
+  --set-layout-border-width-thick: 0.125rem; /** Thick border width. Use for emphasised strokes (focus rings, prominent dividers). */
+  --set-layout-container-gutter-default: 1rem; /** Default container gutter. The inline padding between page edge and content. */
+  --set-layout-container-gutter-narrow: 1rem; /** Narrow container gutter. Use in tight responsive layouts where the default gutter consumes too much horizontal space. */
+  --set-layout-container-max-width-default: 80rem; /** Default container max-width. Use as the standard content width for typical pages. */
+  --set-layout-container-max-width-wide: 90rem; /** Wide container max-width. Use for content that benefits from more horizontal space on wider screens (e.g. site furniture). */
+  --set-layout-divider-brand-size: 4.5rem; /** Brand divider size. The length of a brand-marked divider element. */
+  --set-layout-divider-brand-thickness: 0.125rem; /** Brand divider thickness. The cross-axis dimension of a brand-marked divider. */
+  --set-layout-focus-ring-offset-default: 0.125rem; /** Default focus ring offset between the focused element and its ring. */
+  --set-layout-focus-ring-offset-inset: -0.25rem; /** Inset focus ring offset. Use when the ring sits inside the element bounds (e.g. when an outset ring would clip). */
+  --set-layout-focus-ring-offset-lg: 0.25rem; /** Larger focus ring offset. Use on elements where the default offset would feel cramped. */
+  --set-layout-focus-ring-outset: 0.5rem; /** Focus ring outset. Total outward extent of the ring beyond the element edge. Use in size calculations that need to account for the ring (e.g. corner radius on focus states). */
+  --set-layout-focus-ring-width: 0.125rem; /** Focus ring stroke width. Use as the line thickness of the focus indicator. */
+  --set-layout-grid-columns: 12; /** Grid column count for the standard layout grid. */
+  --set-layout-grid-gap-lg: 2rem; /** Large grid gap. Use for spacious grids (marketing layouts, gallery views) where columns benefit from extra breathing room. */
+  --set-layout-grid-gap-md: 1.5rem; /** Default grid gap. */
+  --set-layout-grid-gap-sm: 1rem; /** Small grid gap. Use for compact grids where columns should sit close together. */
+  --set-layout-grid-item-min-width: 18rem; /** Minimum width for grid items. Use as the floor below which items shouldn't shrink. */
+  --set-layout-icon-size-2xs: 1rem; /** Smallest icon size. */
+  --set-layout-icon-size-lg: 1.75rem; /** Largest icon size. */
+  --set-layout-icon-size-md: 1.5rem; /** Default icon size. Also used for icon-shaped elements (spinners, radios, checkboxes). Pick the step that visually balances surrounding text size and UI scale. */
+  --set-layout-icon-size-sm: 1.25rem; /** Moderate icon size. */
+  --set-layout-icon-size-xs: 1.125rem; /** Small icon size. */
+  --set-layout-icon-viewbox-inset-ratio: 0.08854167; /** Icon viewBox inset ratio. Use as the multiplier for compensating icon edge inset in layout calculations. */
+  --set-layout-icon-viewbox-outset-ratio: -0.08854167; /** Icon viewBox outset ratio. Use as the multiplier for compensating icon edge outset in layout calculations. */
+  --set-layout-spacing-vertical-1000: 4.5rem; /** Responsive layout vertical spacing 1000. */
+  --set-layout-spacing-vertical-1100: 5.25rem; /** Responsive layout vertical spacing 1100. */
+  --set-layout-spacing-vertical-1200: 6rem; /** Responsive layout vertical spacing 1200. Largest vertical block gap. */
+  --set-layout-spacing-vertical-250: 0.1875rem; /** Responsive layout vertical spacing 250. Minimal vertical block gap. */
+  --set-layout-spacing-vertical-400: 0.375rem; /** Responsive layout vertical spacing 400. */
+  --set-layout-spacing-vertical-500: 0.75rem; /** Responsive layout vertical spacing 500. */
+  --set-layout-spacing-vertical-600: 1.125rem; /** Responsive layout vertical spacing 600. */
+  --set-layout-spacing-vertical-700: 1.5rem; /** Responsive layout vertical spacing 700. Default layout vertical step. */
+  --set-layout-spacing-vertical-800: 2.25rem; /** Responsive layout vertical spacing 800. */
+  --set-layout-spacing-vertical-900: 3rem; /** Responsive layout vertical spacing 900. */
+  --set-layout-spacing-vertical-950: 3.75rem; /** Responsive layout vertical spacing 950. */
+  --set-motion-duration-0: 0ms; /** Instantaneous duration. */
+  --set-motion-duration-100: 100ms; /** Default duration. Pick the step that matches the size and emphasis of the motion. */
+  --set-motion-duration-150: 150ms; /** Quick duration step. */
+  --set-motion-duration-200: 200ms; /** Moderate duration step. */
+  --set-motion-duration-250: 250ms; /** Comfortable duration step. */
+  --set-motion-duration-300: 300ms; /** Extended duration step. */
+  --set-motion-duration-3000: 3000ms; /** Ambient duration step. */
+  --set-motion-duration-50: 50ms; /** Micro duration step. */
+  --set-motion-duration-600: 640ms; /** Long duration step. */
+  --set-motion-easing-ease-in: cubic-bezier(0.32, 0, 1, 1); /** Ease-in curve. Use for elements leaving the viewport — slow start, accelerating exit. */
+  --set-motion-easing-ease-in-out: cubic-bezier(0.25, 0, 0.75, 1); /** Ease-in-out curve. Use for movements that both originate and settle on screen (e.g. expansions in place). */
+  --set-motion-easing-ease-out: cubic-bezier(0, 0, 0.68, 1); /** Ease-out curve. Use for elements entering the viewport — fast start, gentle settle. */
+  --set-motion-easing-emphasized: cubic-bezier(0.956, 0.044, 0.518, 0.956); /** Emphasised easing curve. Use for transitions that should feel more expressive (e.g. brand-led page transitions, hero reveal motion). */
+  --set-radius-2xs: 0.0625rem; /** Radius 2xs. Minimal rounding for very small elements (default focus rings, small boxes). */
+  --set-radius-lg: 0.375rem; /** Radius lg. Pronounced rounding for large surfaces (cards, panels). */
+  --set-radius-md: 0.25rem; /** Radius md. Default rounding for standard UI surfaces (alerts, code blocks). Pick t-shirt sizes when the element's shortest side is unknown — match the size to the component's relative scale. */
+  --set-radius-ratio-default: 0.074; /** Default radius ratio. Multiplier for computing radius from a known element dimension (e.g. shortest side × ratio). Prefer ratio-based calculation over t-shirt sizes when the element's shortest side is known. */
+  --set-radius-ratio-lg: 0.5; /** Large radius ratio. For more pronounced proportional rounding. */
+  --set-radius-sm: 0.1875rem; /** Radius sm. Moderate rounding for medium-scale UI surfaces. */
+  --set-radius-xs: 0.125rem; /** Radius xs. Small rounding for compact UI elements (menu items, code spans), or for elements where relative size shouldn't be assumed (images). */
+  --set-shape-logo-graphic-aspect-ratio: 600 / 1200;
+  --set-shape-logo-graphic-block-size: 75rem;
+  --set-shape-logo-graphic-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20600%201200%22%3E%3Cpath%20d%3D%22M0%200h150v300H0Zm300%200h150v300H300ZM150%20300h150v300H150Zm300%200h150v300H450ZM0%20600h150v300H0Zm300%200h150v300H300ZM150%20900h150v300H150Zm300%200h150v300H450Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E");
+  --set-shape-logo-primary-aspect-ratio: 6000 / 2400;
+  --set-shape-logo-primary-block-size: 150rem;
+  --set-shape-logo-primary-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%206000%202400%22%3E%3Cpath%20d%3D%22M0%200h150v300H0Zm300%200h150v300H300Zm300%200h150v300H600Zm300%200h150v300H900Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150ZM150%20300h150v300H150Zm300%200h150v300H450Zm300%200h150v300H750Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150ZM0%201800h150v300H0Zm300%200h150v300H300Zm300%200h150v300H600Zm300%200h150v300H900Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150ZM150%202100h150v300H150Zm300%200h150v300H450Zm300%200h150v300H750Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150ZM43.5%201459.5h96v-391l-11-177h3l140.5%20322h90l140.5-322h3l-11%20177v391h96v-680h-131l-139.5%20333h-6l-139.5-333h-131Zm938.4%2010c190%200%20232-49%20232-272%200-222-42-271-232-271-192%200-234%2049-234%20271%200%20223%2042%20272%20234%20272m0-91c-111%200-136-32-136-181%200-147%2025-179%20136-179%20109%200%20134%2032%20134%20179%200%20149-25%20181-134%20181m388.5%2081h99v-269c0-140%2023-171%20127-171%2082%200%20101%2020%20101%20108v332h99v-332c0-164-31-201-174-201-101%200-129%2017-158%2092h-5v-82h-89zm816.3%2010c190%200%20232-49%20232-272%200-222-42-271-232-271-192%200-234%2049-234%20271%200%20223%2042%20272%20234%20272m0-91c-111%200-136-32-136-181%200-147%2025-179%20136-179%20109%200%20134%2032%20134%20179%200%20149-25%20181-134%20181m389.4-68c-3%20131%2035%20159%20213%20159%20179%200%20218-27%20218-150%200-117-37-146-205-170-101-14-123-27-123-73%200-50%2021-61%20115-61%2084%200%20103%209%20108%2053h95c-4-116-41-142-204-142-172%200-210%2026-210%20145%200%20112%2035%20142%20194%20162%20109%2013%20133%2029%20133%2082%200%2054-21%2066-118%2066-95%200-117-13-120-71zm595.7%20364h99v-269h5c21%2053%2044%2064%20132%2064%20171%200%20209-48%20209-270%200-224-39-273-214-273-88%200-112%2012-132%2065h-5v-55h-94zm220-296c-104%200-126-32-126-180s22-180%20126-180%20127%2032%20127%20181c0%20147-23%20179-127%20179m703.8%2081h87v-345c0-154-38-188-207-188-156%200-190%2029-188%20157h95c1-61%2018-74%2096-74%2092%200%20113%2019%20113%20106v23h-85c-194%200-237%2032-237%20179%200%20124%2031%20152%20172%20152%2099%200%20126-14%20149-74h5zm-5-243c-1%20135-26%20165-135%20165-73%200-90-14-90-77%200-73%2022-88%20121-88zm586.7%2095c-12%2057-31%2070-101%2070-111%200-136-33-136-184%200-149%2024-182%20132-182%2072%200%2091%2015%20103%2081h99c-6-139-42-170-198-170-193%200-235%2049-235%20271%200%20223%2043%20272%20237%20272%20152%200%20187-28%20196-158zm581.7%209c-17%2049-36%2060-108%2060-107%200-132-25-137-138h349c5-259-36-316-225-316-179%200-219%2049-219%20271%200%20223%2042%20272%20235%20272%20144%200%20180-27%20201-149zm-244-160c3-120%2027-146%20128-146%2098%200%20122%2026%20126%20146zm850.5%20299h91l-1-734h-98l1%20266h-5c-21-53-44-65-130-65-173%200-211%2049-211%20272s38%20271%20214%20271c89%200%20113-12%20134-65h5zm-128-79c-104%200-128-33-128-183%200-149%2024-182%20128-182s126%2033%20126%20182c0%20150-22%20183-126%20183%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E");
+  --set-shape-logo-secondary-aspect-ratio: 7200 / 1200;
+  --set-shape-logo-secondary-block-size: 75rem;
+  --set-shape-logo-secondary-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%207200%201200%22%3E%3Cpath%20d%3D%22M0%200h150v300H0Zm300%200h150v300H300ZM150%20300h150v300H150Zm300%200h150v300H450ZM0%20600h150v300H0Zm300%200h150v300H300ZM150%20900h150v300H150Zm300%200h150v300H450Zm750%2056h96V565l-11-177h3l140.5%20322h90L1659%20388h3l-11%20177v391h96V276h-131l-139.5%20333h-6L1331%20276h-131Zm938.4%2010c190%200%20232-49%20232-272%200-222-42-271-232-271-192%200-234%2049-234%20271%200%20223%2042%20272%20234%20272m0-91c-111%200-136-32-136-181%200-147%2025-179%20136-179%20109%200%20134%2032%20134%20179%200%20149-25%20181-134%20181m388.5%2081h99V687c0-140%2023-171%20127-171%2082%200%20101%2020%20101%20108v332h99V624c0-164-31-201-174-201-101%200-129%2017-158%2092h-5v-82h-89zm816.3%2010c190%200%20232-49%20232-272%200-222-42-271-232-271-192%200-234%2049-234%20271%200%20223%2042%20272%20234%20272m0-91c-111%200-136-32-136-181%200-147%2025-179%20136-179%20109%200%20134%2032%20134%20179%200%20149-25%20181-134%20181m389.4-68c-3%20131%2035%20159%20213%20159%20179%200%20218-27%20218-150%200-117-37-146-205-170-101-14-123-27-123-73%200-50%2021-61%20115-61%2084%200%20103%209%20108%2053h95c-4-116-41-142-204-142-172%200-210%2026-210%20145%200%20112%2035%20142%20194%20162%20109%2013%20133%2029%20133%2082%200%2054-21%2066-118%2066-95%200-117-13-120-71zm595.7%20364h99V902h5c21%2053%2044%2064%20132%2064%20171%200%20209-48%20209-270%200-224-39-273-214-273-88%200-112%2012-132%2065h-5v-55h-94zm220-296c-104%200-126-32-126-180s22-180%20126-180%20127%2032%20127%20181c0%20147-23%20179-127%20179m703.8%2081h87V611c0-154-38-188-207-188-156%200-190%2029-188%20157h95c1-61%2018-74%2096-74%2092%200%20113%2019%20113%20106v23h-85c-194%200-237%2032-237%20179%200%20124%2031%20152%20172%20152%2099%200%20126-14%20149-74h5zm-5-243c-1%20135-26%20165-135%20165-73%200-90-14-90-77%200-73%2022-88%20121-88zm586.7%2095c-12%2057-31%2070-101%2070-111%200-136-33-136-184%200-149%2024-182%20132-182%2072%200%2091%2015%20103%2081h99c-6-139-42-170-198-170-193%200-235%2049-235%20271%200%20223%2043%20272%20237%20272%20152%200%20187-28%20196-158zm581.7%209c-17%2049-36%2060-108%2060-107%200-132-25-137-138h349c5-259-36-316-225-316-179%200-219%2049-219%20271%200%20223%2042%20272%20235%20272%20144%200%20180-27%20201-149zm-244-160c3-120%2027-146%20128-146%2098%200%20122%2026%20126%20146zM7022%20956h91l-1-734h-98l1%20266h-5c-21-53-44-65-130-65-173%200-211%2049-211%20272s38%20271%20214%20271c89%200%20113-12%20134-65h5zm-128-79c-104%200-128-33-128-183%200-149%2024-182%20128-182s126%2033%20126%20182c0%20150-22%20183-126%20183%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E");
+  --set-shape-logo-typographic-aspect-ratio: 5913 / 1200;
+  --set-shape-logo-typographic-block-size: 75rem;
+  --set-shape-logo-typographic-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205913%201200%22%3E%3Cpath%20d%3D%22M0%20956h96V565L85%20388h3l140.5%20322h90L459%20388h3l-11%20177v391h96V276H416L276.5%20609h-6L131%20276H0Zm938.4%2010c190%200%20232-49%20232-272%200-222-42-271-232-271-192%200-234%2049-234%20271%200%20223%2042%20272%20234%20272m0-91c-111%200-136-32-136-181%200-147%2025-179%20136-179%20109%200%20134%2032%20134%20179%200%20149-25%20181-134%20181m388.5%2081h99V687c0-140%2023-171%20127-171%2082%200%20101%2020%20101%20108v332h99V624c0-164-31-201-174-201-101%200-129%2017-158%2092h-5v-82h-89zm816.3%2010c190%200%20232-49%20232-272%200-222-42-271-232-271-192%200-234%2049-234%20271%200%20223%2042%20272%20234%20272m0-91c-111%200-136-32-136-181%200-147%2025-179%20136-179%20109%200%20134%2032%20134%20179%200%20149-25%20181-134%20181m389.4-68c-3%20131%2035%20159%20213%20159%20179%200%20218-27%20218-150%200-117-37-146-205-170-101-14-123-27-123-73%200-50%2021-61%20115-61%2084%200%20103%209%20108%2053h95c-4-116-41-142-204-142-172%200-210%2026-210%20145%200%20112%2035%20142%20194%20162%20109%2013%20133%2029%20133%2082%200%2054-21%2066-118%2066-95%200-117-13-120-71zm595.7%20364h99V902h5c21%2053%2044%2064%20132%2064%20171%200%20209-48%20209-270%200-224-39-273-214-273-88%200-112%2012-132%2065h-5v-55h-94zm220-296c-104%200-126-32-126-180s22-180%20126-180%20127%2032%20127%20181c0%20147-23%20179-127%20179m703.8%2081h87V611c0-154-38-188-207-188-156%200-190%2029-188%20157h95c1-61%2018-74%2096-74%2092%200%20113%2019%20113%20106v23h-85c-194%200-237%2032-237%20179%200%20124%2031%20152%20172%20152%2099%200%20126-14%20149-74h5zm-5-243c-1%20135-26%20165-135%20165-73%200-90-14-90-77%200-73%2022-88%20121-88zm586.7%2095c-12%2057-31%2070-101%2070-111%200-136-33-136-184%200-149%2024-182%20132-182%2072%200%2091%2015%20103%2081h99c-6-139-42-170-198-170-193%200-235%2049-235%20271%200%20223%2043%20272%20237%20272%20152%200%20187-28%20196-158zm581.7%209c-17%2049-36%2060-108%2060-107%200-132-25-137-138h349c5-259-36-316-225-316-179%200-219%2049-219%20271%200%20223%2042%20272%20235%20272%20144%200%20180-27%20201-149zm-244-160c3-120%2027-146%20128-146%2098%200%20122%2026%20126%20146zM5822%20956h91l-1-734h-98l1%20266h-5c-21-53-44-65-130-65-173%200-211%2049-211%20272s38%20271%20214%20271c89%200%20113-12%20134-65h5zm-128-79c-104%200-128-33-128-183%200-149%2024-182%20128-182s126%2033%20126%20182c0%20150-22%20183-126%20183%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E");
+  --set-shape-tile-aspect-ratio: 300 / 600;
+  --set-shape-tile-block-size: 37.5rem;
+  --set-shape-tile-dark-aspect-ratio: 600 / 600;
+  --set-shape-tile-dark-block-size: 37.5rem;
+  --set-shape-tile-dark-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20600%20600%22%3E%3Cpath%20d%3D%22M150%200h150v300H150zM300%200h150v300H300zM450%200h150v300H450zM0%20300h150v300H0zM150%20300h150v300H150zM450%20300h150v300H450z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E");
+  --set-shape-tile-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20600%22%3E%3Cpath%20d%3D%22M0%200h150v300H0zm150%20300h150v300H150z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E");
+  --set-shape-tile-light-aspect-ratio: 600 / 600;
+  --set-shape-tile-light-block-size: 37.5rem;
+  --set-shape-tile-light-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20600%20600%22%3E%3Cpath%20d%3D%22M0%200h150v300H0zM300%20300h150v300H300z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E");
+  --set-spacing-horizontal-100: 0.0625rem; /** Horizontal spacing step 100. Minimal horizontal gap. */
+  --set-spacing-horizontal-1000: 4.5rem; /** Horizontal spacing step 1000. */
+  --set-spacing-horizontal-1100: 5.25rem; /** Horizontal spacing step 1100. */
+  --set-spacing-horizontal-1200: 6rem; /** Horizontal spacing step 1200. */
+  --set-spacing-horizontal-1300: 7.5rem; /** Horizontal spacing step 1300. */
+  --set-spacing-horizontal-1400: 9rem; /** Horizontal spacing step 1400. */
+  --set-spacing-horizontal-1500: 10.5rem; /** Horizontal spacing step 1500. */
+  --set-spacing-horizontal-1600: 12rem; /** Horizontal spacing step 1600. Largest horizontal step. */
+  --set-spacing-horizontal-200: 0.125rem; /** Horizontal spacing step 200. */
+  --set-spacing-horizontal-300: 0.25rem; /** Horizontal spacing step 300. */
+  --set-spacing-horizontal-400: 0.5rem; /** Horizontal spacing step 400. */
+  --set-spacing-horizontal-500: 0.75rem; /** Horizontal spacing step 500. */
+  --set-spacing-horizontal-600: 1rem; /** Horizontal spacing step 600. */
+  --set-spacing-horizontal-700: 1.5rem; /** Horizontal spacing step 700. Default horizontal step. */
+  --set-spacing-horizontal-800: 2rem; /** Horizontal spacing step 800. */
+  --set-spacing-horizontal-900: 3rem; /** Horizontal spacing step 900. */
+  --set-spacing-vertical-100: 0.0625rem; /** Vertical spacing step 100. Minimal vertical step. */
+  --set-spacing-vertical-1000: 4.5rem; /** Vertical spacing step 1000. */
+  --set-spacing-vertical-1100: 5.25rem; /** Vertical spacing step 1100. */
+  --set-spacing-vertical-1200: 6rem; /** Vertical spacing step 1200. */
+  --set-spacing-vertical-1250: 6.75rem; /** Vertical spacing step 1250. */
+  --set-spacing-vertical-1300: 7.5rem; /** Vertical spacing step 1300. */
+  --set-spacing-vertical-1400: 9rem; /** Vertical spacing step 1400. */
+  --set-spacing-vertical-1500: 10.5rem; /** Vertical spacing step 1500. */
+  --set-spacing-vertical-1600: 12rem; /** Vertical spacing step 1600. Largest vertical step. */
+  --set-spacing-vertical-200: 0.125rem; /** Vertical spacing step 200. */
+  --set-spacing-vertical-250: 0.1875rem; /** Vertical spacing step 250. */
+  --set-spacing-vertical-300: 0.25rem; /** Vertical spacing step 300. */
+  --set-spacing-vertical-400: 0.375rem; /** Vertical spacing step 400. */
+  --set-spacing-vertical-500: 0.75rem; /** Vertical spacing step 500. */
+  --set-spacing-vertical-600: 1.125rem; /** Vertical spacing step 600. */
+  --set-spacing-vertical-700: 1.5rem; /** Vertical spacing step 700. Default vertical step. */
+  --set-spacing-vertical-775: 1.875rem; /** Vertical spacing step 775. */
+  --set-spacing-vertical-800: 2.25rem; /** Vertical spacing step 800. */
+  --set-spacing-vertical-900: 3rem; /** Vertical spacing step 900. */
+  --set-spacing-vertical-950: 3.75rem; /** Vertical spacing step 950. */
+  --set-typography-font-family-default: 'Berkeley Mono', ui-monospace, monospace; /** Default font family. Use as the system's standard typeface. */
+  --set-typography-font-family-mono: 'Berkeley Mono', ui-monospace, monospace; /** Monospaced font family. Use for code, contexts where character-width consistency matters (e.g. avatar, badge), and occasional typographic flourishes. */
+  --set-typography-font-weight-bold: 566; /** Bold font weight. Use for strong text emphasis (semantic `strong`/`b` elements, small headings). */
+  --set-typography-font-weight-medium: 466; /** Medium font weight. Use for medium text emphasis (e.g. medium headings). */
+  --set-typography-font-weight-regular: 400; /** Regular font weight. Use as the system's standard text weight. */
+  --set-typography-font-weight-regular-plus: 433; /** Slightly heavier regular font weight. Use for subtly emphasised text where bold would be too strong. */
+  --set-typography-leading-1000: 4.5rem; /** Leading step 1000. */
+  --set-typography-leading-1200: 6rem; /** Leading step 1200. */
+  --set-typography-leading-1300: 7.5rem; /** Leading step 1300. */
+  --set-typography-leading-700: 1.5rem; /** Default leading dimension. A block size representing the line-height; divide by font size to derive a line-height ratio. An escape hatch for aligning line-heights across elements with different font sizes (e.g. a small counter beside a large heading) — reach for text composites or typeStep pairs first. */
+  --set-typography-leading-750: 1.6875rem; /** Leading step 750. */
+  --set-typography-leading-775: 1.875rem; /** Leading step 775. */
+  --set-typography-leading-800: 2.25rem; /** Leading step 800. */
+  --set-typography-leading-850: 2.625rem; /** Leading step 850. */
+  --set-typography-leading-900: 3rem; /** Leading step 900. */
+  --set-typography-leading-925: 3.375rem; /** Leading step 925. */
+  --set-typography-leading-950: 3.75rem; /** Leading step 950. */
+  --set-typography-measure-default: 35.25em; /** Default measure (line length, in em). Use as the comfortable maximum width to keep line lengths readable. */
+  --set-typography-measure-tight: 31.75em; /** Tighter measure (line length, in em). A more constrained alternative to the default. */
+  --set-typography-paragraph-spacing-default: 1.5rem; /** Default vertical spacing between paragraphs. */
+  --set-typography-paragraph-spacing-lg: 2.25rem; /** Looser paragraph spacing. Use in editorial layouts where extra breathing room aids reading. */
+  --set-typography-paragraph-spacing-sm: 0.75rem; /** Tighter paragraph spacing. Use in dense layouts or compact prose. */
+  --set-typography-prose-code-padding-block-default: 0.055em; /** Default block padding for inline `code`. Use at smaller viewports. */
+  --set-typography-prose-code-padding-block-lg: 0.2em; /** Larger block padding for inline `code`. Use at larger viewports. */
+  --set-typography-prose-code-padding-inline-default: 0.25em; /** Inline (horizontal) padding for inline `code`. */
+  --set-typography-prose-link-active-decoration-offset: 0.34em; /** Decoration offset for prose links during active (pressed) state, in em. */
+  --set-typography-prose-link-default-decoration-line: none; /** Default decoration line for prose links. */
+  --set-typography-prose-link-default-decoration-offset: 0.24em; /** Default decoration offset for prose links, in em. */
+  --set-typography-prose-link-default-decoration-thickness: 0.125rem; /** Default decoration thickness for prose links. */
+  --set-typography-prose-link-hover-decoration-line: underline; /** Decoration line for prose links on hover. */
+  --set-typography-prose-link-hover-decoration-offset: 0.29em; /** Decoration offset for prose links on hover, in em. */
+  --set-typography-text-body-lg: 400 1.25rem/1.5 'Berkeley Mono', ui-monospace, monospace; /** Large body text. Use for emphasised copy (intro paragraphs, lede text). */
+  --set-typography-text-body-md: 400 1.125rem/1.5 'Berkeley Mono', ui-monospace, monospace; /** Default body text size. */
+  --set-typography-text-body-responsive-lg: 400 1.25rem/1.5 'Berkeley Mono', ui-monospace, monospace; /** Large body text. Use for emphasised copy (intro paragraphs, lede text). */
+  --set-typography-text-body-responsive-md: 400 1.125rem/1.5 'Berkeley Mono', ui-monospace, monospace; /** Default body text size. */
+  --set-typography-text-body-responsive-sm: 400 1rem/1.5 'Berkeley Mono', ui-monospace, monospace; /** Small body text. Use for secondary copy (labels, captions, helper text) where default body would be too prominent. */
+  --set-typography-text-body-responsive-xs: 400 0.875rem/1.714286 'Berkeley Mono', ui-monospace, monospace; /** Extra small body text. Use for the smallest body copy (microtext). */
+  --set-typography-text-body-sm: 400 1rem/1.5 'Berkeley Mono', ui-monospace, monospace; /** Small body text. Use for secondary copy (labels, captions, helper text) where default body would be too prominent. */
+  --set-typography-text-body-xs: 400 0.875rem/1.714286 'Berkeley Mono', ui-monospace, monospace; /** Extra small body text. Use for the smallest body copy (microtext). */
+  --set-typography-text-heading-2xl: 366 2.625rem/1.285714 'Berkeley Mono', ui-monospace, monospace; /** 2xl heading (`h1`-equivalent). Use for page titles. */
+  --set-typography-text-heading-3xl: 300 3rem/1.25 'Berkeley Mono', ui-monospace, monospace; /** Display heading (3xl). Use for hero/marketing headings. */
+  --set-typography-text-heading-4xl: 250 3.875rem/1.16129 'Berkeley Mono', ui-monospace, monospace; /** Display heading (4xl). Use for larger hero/marketing headings. */
+  --set-typography-text-heading-5xl: 200 5.25rem/1.142857 'Berkeley Mono', ui-monospace, monospace; /** Display heading (5xl). Use for the largest hero/marketing headings. */
+  --set-typography-text-heading-lg: 433 1.5rem/1.5 'Berkeley Mono', ui-monospace, monospace; /** Large heading (`h3`-equivalent). Use for subsection headings and component-level titles (cards, panels). */
+  --set-typography-text-heading-md: 466 1.25rem/1.5 'Berkeley Mono', ui-monospace, monospace; /** Medium heading (`h4`-equivalent). Use for subsection headings. */
+  --set-typography-text-heading-responsive-2xl: 366 2.625rem/1.285714 'Berkeley Mono', ui-monospace, monospace; /** 2xl heading (`h1`-equivalent). Use for page titles. */
+  --set-typography-text-heading-responsive-3xl: 300 3rem/1.25 'Berkeley Mono', ui-monospace, monospace; /** Display heading (3xl). Use for hero/marketing headings. */
+  --set-typography-text-heading-responsive-4xl: 250 3.875rem/1.16129 'Berkeley Mono', ui-monospace, monospace; /** Display heading (4xl). Use for larger hero/marketing headings. */
+  --set-typography-text-heading-responsive-5xl: 200 5.25rem/1.142857 'Berkeley Mono', ui-monospace, monospace; /** Display heading (5xl). Use for the largest hero/marketing headings. */
+  --set-typography-text-heading-responsive-lg: 433 1.5rem/1.5 'Berkeley Mono', ui-monospace, monospace; /** Large heading (`h3`-equivalent). Use for subsection headings and component-level titles (cards, panels). */
+  --set-typography-text-heading-responsive-md: 466 1.25rem/1.5 'Berkeley Mono', ui-monospace, monospace; /** Medium heading (`h4`-equivalent). Use for subsection headings. */
+  --set-typography-text-heading-responsive-sm: 500 1.125rem/1.5 'Berkeley Mono', ui-monospace, monospace; /** Small heading (`h5`-equivalent). Use for subsection headings. */
+  --set-typography-text-heading-responsive-xl: 400 2rem/1.354839 'Berkeley Mono', ui-monospace, monospace; /** Extra large heading (`h2`-equivalent). Use for section headings. */
+  --set-typography-text-heading-responsive-xs: 533 1rem/1.5 'Berkeley Mono', ui-monospace, monospace; /** Extra small heading (`h6`-equivalent). Use for subsection headings. */
+  --set-typography-text-heading-sm: 500 1.125rem/1.5 'Berkeley Mono', ui-monospace, monospace; /** Small heading (`h5`-equivalent). Use for subsection headings. */
+  --set-typography-text-heading-xl: 400 2rem/1.354839 'Berkeley Mono', ui-monospace, monospace; /** Extra large heading (`h2`-equivalent). Use for section headings. */
+  --set-typography-text-heading-xs: 533 1rem/1.5 'Berkeley Mono', ui-monospace, monospace; /** Extra small heading (`h6`-equivalent). Use for subsection headings. */
+  --set-typography-type-step-100-font-size: 0.875rem; /** Type-step 100 font size. Tight-leading variant. */
+  --set-typography-type-step-100-line-height: 1.285714; /** Type-step 100 line height. Tight leading. */
+  --set-typography-type-step-1000-font-size: 3rem; /** Type-step 1000 font size. */
+  --set-typography-type-step-1000-line-height: 1.25; /** Type-step 1000 line height. */
+  --set-typography-type-step-1100-font-size: 3.875rem; /** Type-step 1100 font size. */
+  --set-typography-type-step-1100-line-height: 1.16129; /** Type-step 1100 line height. */
+  --set-typography-type-step-1200-font-size: 5.25rem; /** Type-step 1200 font size. */
+  --set-typography-type-step-1200-line-height: 1.142857; /** Type-step 1200 line height. */
+  --set-typography-type-step-1300-font-size: 7.5rem; /** Type-step 1300 font size. Largest step. */
+  --set-typography-type-step-1300-line-height: 1; /** Type-step 1300 line height. */
+  --set-typography-type-step-150-font-size: 0.875rem; /** Type-step 150 font size. Loose-leading variant of step 100. */
+  --set-typography-type-step-150-line-height: 1.714286; /** Type-step 150 line height. Loose leading. */
+  --set-typography-type-step-200-font-size: 1rem; /** Default type-step font size. Type-steps are size/leading pairs for explicit typographic control without a full text composite (body/heading). */
+  --set-typography-type-step-200-line-height: 1.5; /** Default type-step line height. */
+  --set-typography-type-step-300-font-size: 1.125rem; /** Type-step 300 font size. */
+  --set-typography-type-step-300-line-height: 1.5; /** Type-step 300 line height. */
+  --set-typography-type-step-400-font-size: 1.25rem; /** Type-step 400 font size. Tight-leading variant. */
+  --set-typography-type-step-400-line-height: 1.5; /** Type-step 400 line height. Tight leading. */
+  --set-typography-type-step-450-font-size: 1.25rem; /** Type-step 450 font size. Loose-leading variant of step 400. */
+  --set-typography-type-step-450-line-height: 1.8; /** Type-step 450 line height. Loose leading. */
+  --set-typography-type-step-50-font-size: 0.75rem; /** Type-step 50 font size. Smallest step. */
+  --set-typography-type-step-50-line-height: 1.5; /** Type-step 50 line height. */
+  --set-typography-type-step-500-font-size: 1.5rem; /** Type-step 500 font size. */
+  --set-typography-type-step-500-line-height: 1.5; /** Type-step 500 line height. */
+  --set-typography-type-step-600-font-size: 1.75rem; /** Type-step 600 font size. */
+  --set-typography-type-step-600-line-height: 1.5; /** Type-step 600 line height. */
+  --set-typography-type-step-700-font-size: 2rem; /** Type-step 700 font size. */
+  --set-typography-type-step-700-line-height: 1.354839; /** Type-step 700 line height. */
+  --set-typography-type-step-800-font-size: 2.25rem; /** Type-step 800 font size. */
+  --set-typography-type-step-800-line-height: 1.333333; /** Type-step 800 line height. */
+  --set-typography-type-step-900-font-size: 2.625rem; /** Type-step 900 font size. */
+  --set-typography-type-step-900-line-height: 1.285714; /** Type-step 900 line height. */
+}

package/stylelint/index.d.ts

@@ -0,0 +1,5 @@
+import type { Config } from "stylelint";
+
+declare const stylelintConfig: Config;
+
+export default stylelintConfig;

package/stylelint/index.mjs

@@ -0,0 +1,111 @@
+import { createRequire } from "node:module";
+
+import setTokensPlugin from "./plugin-set-tokens.mjs";
+
+// Stylelint resolves `extends`/`plugins` strings from the consumer's config
+// directory, not from the package that declared them. Resolve to absolute
+// paths here so consumers don't need to install our internals themselves.
+const require = createRequire(import.meta.url);
+
+const COLOR_FUNCTIONS_DISALLOWED = [
+  "color-mix",
+  "color",
+  "hsl",
+  "hsla",
+  "hwb",
+  "lab",
+  "lch",
+  "oklab",
+  "oklch",
+  "rgb",
+  "rgba",
+];
+
+const TOKENS_HINT =
+  "Set values come from tokens — see @monospaced/set-config/set.catalog.css.";
+
+const UNITS_DISALLOWED = ["cm", "in", "mm", "ms", "pc", "pt", "px", "Q", "s"];
+
+const stylelintConfig = {
+  extends: [
+    require.resolve("stylelint-config-standard"),
+    require.resolve("stylelint-plugin-logical-css/configs/recommended"),
+  ],
+  plugins: [
+    require.resolve("stylelint-declaration-strict-value"),
+    require.resolve("stylelint-order"),
+    setTokensPlugin,
+  ],
+  rules: {
+    "set/set-known-tokens": true,
+    "color-named": [
+      "never",
+      { message: `Named colours are disallowed. ${TOKENS_HINT}` },
+    ],
+    "color-no-hex": [
+      true,
+      { message: `Hex colours are disallowed. ${TOKENS_HINT}` },
+    ],
+    "declaration-no-important": true,
+    "declaration-property-unit-disallowed-list": [
+      {
+        "/^border(-(block|inline)(-(start|end))?)?$/": ["rem"],
+        "/^gap$/": ["rem"],
+        "/^inset/": ["rem"],
+        "/^margin/": ["rem"],
+        "/^padding/": ["rem"],
+        "column-gap": ["rem"],
+        "font-size": ["rem"],
+        "outline-offset": ["rem"],
+        "outline-width": ["rem"],
+        "row-gap": ["rem"],
+      },
+      { message: `Property "%s" cannot use unit "%s". ${TOKENS_HINT}` },
+    ],
+    "function-disallowed-list": [
+      COLOR_FUNCTIONS_DISALLOWED,
+      { message: `Function "%s()" is disallowed. ${TOKENS_HINT}` },
+    ],
+    "logical-css/require-logical-keywords": [
+      true,
+      {
+        ignore: ["caption-side", "offset-anchor", "offset-position", "resize"],
+        severity: "error",
+      },
+    ],
+    "no-descending-specificity": null,
+    "order/properties-alphabetical-order": true,
+    "scale-unlimited/declaration-strict-value": [
+      [
+        "/^border.*radius$/",
+        "/^border.*width$/",
+        "animation-timing-function",
+        "box-shadow",
+        "font-weight",
+        "font",
+        "line-height",
+        "opacity",
+        "transition-timing-function",
+      ],
+      {
+        ignoreValues: [
+          "/^[\\d.]+%$/",
+          "0",
+          "1",
+          "inherit",
+          "initial",
+          "none",
+          "revert",
+          "unset",
+        ],
+        message: `Value for "\${property}" must be a token, calc(), %, 0, 1, or keyword. ${TOKENS_HINT}`,
+      },
+    ],
+    "unit-disallowed-list": [
+      UNITS_DISALLOWED,
+      { message: `Unit "%s" is disallowed. ${TOKENS_HINT}` },
+    ],
+  },
+};
+
+export default stylelintConfig;

package/stylelint/plugin-set-tokens.mjs

@@ -0,0 +1,105 @@
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+
+import stylelint from "stylelint";
+
+// Validates `var(--*)` references against two gates: (1) the Set
+// catalog (--set-* only), or (2) a definition in the same file. Cross-file
+// custom-property references — including consumers' own organisation across
+// CSS files — are rejected by default. Consumers who organise tokens across
+// files can pass `allowCrossFile: true` to disable the same-file gate for
+// non-set customs while keeping catalog enforcement for `--set-*`.
+
+const ruleName = "set/set-known-tokens";
+
+const messages = stylelint.utils.ruleMessages(ruleName, {
+  unknownSet: (token) =>
+    `Unknown Set token "${token}". Reference a published token (see @monospaced/set-config/set.catalog.css) or define it in this file.`,
+  unknownCustom: (token) =>
+    `Unknown custom property "${token}". Define it in this file — cross-file custom properties are not supported.`,
+});
+
+const catalogPath = fileURLToPath(
+  new URL("../set.catalog.css", import.meta.url),
+);
+
+let canonicalCache = null;
+const canonicalTokens = () => {
+  if (canonicalCache) return canonicalCache;
+  const css = readFileSync(catalogPath, "utf8");
+  const set = new Set();
+  for (const match of css.matchAll(/(--set-[\w-]+)\s*:/g)) {
+    set.add(match[1]);
+  }
+  canonicalCache = set;
+  return set;
+};
+
+const refPattern = /var\(\s*(--[\w-]+)/g;
+
+const parseAllow = (entries) => {
+  const literals = new Set();
+  const patterns = [];
+  for (const entry of entries) {
+    if (typeof entry !== "string") continue;
+    const re = entry.match(/^\/(.+)\/([gimsuy]*)$/);
+    if (re) patterns.push(new RegExp(re[1], re[2]));
+    else literals.add(entry);
+  }
+  return { literals, patterns };
+};
+
+const rule = (primary, secondary) => (root, result) => {
+  const valid = stylelint.utils.validateOptions(
+    result,
+    ruleName,
+    {
+      actual: primary,
+      possible: [true],
+    },
+    {
+      actual: secondary,
+      possible: {
+        allow: [(v) => typeof v === "string"],
+        allowCrossFile: [(v) => typeof v === "boolean"],
+      },
+      optional: true,
+    },
+  );
+  if (!valid) return;
+
+  const { literals: allowLiterals, patterns: allowPatterns } = parseAllow(
+    secondary?.allow ?? [],
+  );
+  const allowCrossFile = secondary?.allowCrossFile === true;
+
+  const localDefs = new Set();
+  root.walkDecls(/^--/, (decl) => localDefs.add(decl.prop));
+
+  const known = canonicalTokens();
+
+  root.walkDecls((decl) => {
+    for (const match of decl.value.matchAll(refPattern)) {
+      const token = match[1];
+      if (known.has(token) || localDefs.has(token)) continue;
+      if (allowLiterals.has(token)) continue;
+      if (allowPatterns.some((re) => re.test(token))) continue;
+      const isSet = token.startsWith("--set-");
+      if (!isSet && allowCrossFile) continue;
+      stylelint.utils.report({
+        message: isSet
+          ? messages.unknownSet(token)
+          : messages.unknownCustom(token),
+        node: decl,
+        result,
+        ruleName,
+        word: token,
+      });
+    }
+  });
+};
+
+rule.ruleName = ruleName;
+rule.messages = messages;
+
+export default stylelint.createPlugin(ruleName, rule);