@felloinnovations/brand-kit 0.4.0 → 0.5.1

package/tokens/palettes.ts

@@ -0,0 +1,504 @@
+/* Generated by scripts/generate-tokens.mjs. Do not edit.
+   Source: Figma Marketing - Design System 3.0 (MmOx1GHtbMge4lSLp1kcs8), captured 2026-06-11,
+   tokens/_product.css (the product layer), tokens/_dark.css (the dark theme) and tokens/_palettes.css (the palettes).
+   422 tokens: 111 kit, 311 product layer; dark: 98 night, 42 navy ground. */
+
+/** The palette contract (D15): the only tokens a palette sets, each with its group and one-line meaning. */
+export const contract = [
+  {
+    "name": "--color-bg-page",
+    "group": "ground",
+    "meaning": "The page and every card's surface: the cream most words sit on."
+  },
+  {
+    "name": "--ws-frame-top",
+    "group": "ground",
+    "meaning": "The top of the page wash behind a glass stage, fading into the page by 640 px; in dark the frame is flat and paints it (the shell, unless a palette says)."
+  },
+  {
+    "name": "--ws-stage-foot",
+    "group": "ground",
+    "meaning": "The foot of a washed stage, whose gradient starts at the page (light only)."
+  },
+  {
+    "name": "--color-surface",
+    "group": "ground",
+    "meaning": "What is white: a marketing card, a well row under the pointer, a chat bubble, the glass of the stage."
+  },
+  {
+    "name": "--ws-raised",
+    "group": "ground",
+    "meaning": "What floats off the page: a menu, a popover, a tooltip, a dialog, a panel, a toast."
+  },
+  {
+    "name": "--ws-tray",
+    "group": "ground",
+    "meaning": "The rim and foot of a rimmed card, and the well behind rows."
+  },
+  {
+    "name": "--ws-edge-card",
+    "group": "edge",
+    "meaning": "A card's and an outlined control's 0.5 px edge."
+  },
+  {
+    "name": "--ws-edge",
+    "group": "edge",
+    "meaning": "A divider between rows; a quiet line."
+  },
+  {
+    "name": "--ws-edge-hover",
+    "group": "edge",
+    "meaning": "An outlined control's edge under the pointer."
+  },
+  {
+    "name": "--ws-well-hover",
+    "group": "edge",
+    "meaning": "A rimmed card's rim under the pointer."
+  },
+  {
+    "name": "--color-text-heading",
+    "group": "word",
+    "meaning": "Titles, names, figures, navy marks, and the act fill (the primary button, a thumb, a checked box)."
+  },
+  {
+    "name": "--color-text-body",
+    "group": "word",
+    "meaning": "Body words: a card's line, a row."
+  },
+  {
+    "name": "--color-text-muted",
+    "group": "word",
+    "meaning": "Meta, labels, captions."
+  },
+  {
+    "name": "--color-text-interactive",
+    "group": "word",
+    "meaning": "Links and words that go somewhere, a falling number, \"working\"."
+  },
+  {
+    "name": "--ws-on-act",
+    "group": "act",
+    "meaning": "Words and marks on the act fill."
+  },
+  {
+    "name": "--ws-act-hover",
+    "group": "act",
+    "meaning": "The act fill under the pointer."
+  },
+  {
+    "name": "--ws-word-needs",
+    "group": "accent",
+    "meaning": "Needs you, in words: the current page, something to fix (the accent's AA step)."
+  },
+  {
+    "name": "--ws-focus-color",
+    "group": "focus",
+    "meaning": "The 2 px focus ring, outside or inset."
+  },
+  {
+    "name": "--ws-word-positive",
+    "group": "status",
+    "meaning": "Good news in words."
+  },
+  {
+    "name": "--ws-word-alert",
+    "group": "status",
+    "meaning": "Something wrong now, in words."
+  },
+  {
+    "name": "--ws-chart-finished",
+    "group": "chart",
+    "meaning": "Tone 1: done, passed, positive marks."
+  },
+  {
+    "name": "--ws-chart-past-half",
+    "group": "chart",
+    "meaning": "Tone 2: past halfway marks."
+  },
+  {
+    "name": "--ws-chart-under-half",
+    "group": "chart",
+    "meaning": "Tone 3: under halfway marks and needs-you dots."
+  },
+  {
+    "name": "--ws-chart-navy-light",
+    "group": "chart",
+    "meaning": "Tone 4: a second navy, for a series beside the heading navy."
+  },
+  {
+    "name": "--ws-chart-needs-work",
+    "group": "chart",
+    "meaning": "Tone 5: needs work marks."
+  },
+  {
+    "name": "--ws-chart-alert",
+    "group": "chart",
+    "meaning": "Tone 6: alert marks."
+  },
+  {
+    "name": "--ws-rating-strong",
+    "group": "rating",
+    "meaning": "Strong: its marks."
+  },
+  {
+    "name": "--ws-rating-middle",
+    "group": "rating",
+    "meaning": "Getting there (the middle band): its marks."
+  },
+  {
+    "name": "--ws-rating-needs-work",
+    "group": "rating",
+    "meaning": "Needs work: its marks."
+  },
+  {
+    "name": "--ws-agent-coach",
+    "group": "agent",
+    "meaning": "The coaching assistant's mark."
+  },
+  {
+    "name": "--ws-agent-growth",
+    "group": "agent",
+    "meaning": "The growth assistant's mark."
+  },
+  {
+    "name": "--ws-agent-recruit",
+    "group": "agent",
+    "meaning": "The recruiting assistant's mark."
+  },
+  {
+    "name": "--ws-agent-tally",
+    "group": "agent",
+    "meaning": "The money assistant's mark, and a softer act (a figure tab's current cell, a seat meter, a hatch)."
+  }
+] as const;
+
+export type ContractToken = (typeof contract)[number]['name'];
+
+/** The built-in palettes, named for how they look: each contract token resolved to the literal it paints, in light,
+ *  night (data-theme="dark") and the navy ground. `default` is the kit with no attribute. In CSS the same palettes
+ *  are `data-palette="cool"` on any element; an app that injects its CSS sets these on its own container. */
+export const palettes = {
+  "default": {
+    "light": {
+      "--color-bg-page": "#fefbf9",
+      "--ws-frame-top": "#ebf0f5",
+      "--ws-stage-foot": "#fef9f6",
+      "--color-surface": "#ffffff",
+      "--ws-raised": "#fefbf9",
+      "--ws-tray": "#ededed",
+      "--ws-edge-card": "#d3d3d3",
+      "--ws-edge": "#e8e8e8",
+      "--ws-edge-hover": "#aaa49d",
+      "--ws-well-hover": "#e4e2df",
+      "--color-text-heading": "#093555",
+      "--color-text-body": "#545454",
+      "--color-text-muted": "#666666",
+      "--color-text-interactive": "#495883",
+      "--ws-on-act": "#ffffff",
+      "--ws-act-hover": "#0f4a73",
+      "--ws-word-needs": "#a84b3c",
+      "--ws-focus-color": "#093555",
+      "--ws-word-positive": "#09717a",
+      "--ws-word-alert": "#b1042f",
+      "--ws-chart-finished": "#098486",
+      "--ws-chart-past-half": "#6d4fc2",
+      "--ws-chart-under-half": "#ff725c",
+      "--ws-chart-navy-light": "#2e6088",
+      "--ws-chart-needs-work": "#f370a4",
+      "--ws-chart-alert": "#b1042f",
+      "--ws-rating-strong": "#098486",
+      "--ws-rating-middle": "#495883",
+      "--ws-rating-needs-work": "#f370a4",
+      "--ws-agent-coach": "#098486",
+      "--ws-agent-growth": "#6d4fc2",
+      "--ws-agent-recruit": "#ff725c",
+      "--ws-agent-tally": "#2c4870"
+    },
+    "dark": {
+      "--color-bg-page": "#0f1922",
+      "--ws-frame-top": "#0a1118",
+      "--ws-stage-foot": "#0f1922",
+      "--color-surface": "#131e28",
+      "--ws-raised": "#16222d",
+      "--ws-tray": "#1e2b38",
+      "--ws-edge-card": "#273544",
+      "--ws-edge": "#1e2a36",
+      "--ws-edge-hover": "#8494a5",
+      "--ws-well-hover": "#273544",
+      "--color-text-heading": "#e8edf3",
+      "--color-text-body": "#b0bbc7",
+      "--color-text-muted": "#8494a5",
+      "--color-text-interactive": "#93a6dc",
+      "--ws-on-act": "#0f1922",
+      "--ws-act-hover": "#d7dce2",
+      "--ws-word-needs": "#ff8b78",
+      "--ws-focus-color": "#e8edf3",
+      "--ws-word-positive": "#4fc7be",
+      "--ws-word-alert": "#ff5470",
+      "--ws-chart-finished": "#23a8a3",
+      "--ws-chart-past-half": "#9a84ee",
+      "--ws-chart-under-half": "#ff725c",
+      "--ws-chart-navy-light": "#6e9cc4",
+      "--ws-chart-needs-work": "#f370a4",
+      "--ws-chart-alert": "#ff5470",
+      "--ws-rating-strong": "#3bb8b2",
+      "--ws-rating-middle": "#93a6dc",
+      "--ws-rating-needs-work": "#f370a4",
+      "--ws-agent-coach": "#3bb8b2",
+      "--ws-agent-growth": "#9a84ee",
+      "--ws-agent-recruit": "#ff725c",
+      "--ws-agent-tally": "#e8edf3"
+    },
+    "navy": {
+      "--color-bg-page": "#021a32",
+      "--ws-frame-top": "#021a32",
+      "--ws-stage-foot": "#021a32",
+      "--color-surface": "#0f253c",
+      "--ws-raised": "#162c42",
+      "--ws-tray": "#2a3f53",
+      "--ws-edge-card": "rgba(255, 255, 255, 0.18)",
+      "--ws-edge": "rgba(255, 255, 255, 0.1)",
+      "--ws-edge-hover": "#a9a9a9",
+      "--ws-well-hover": "#273544",
+      "--color-text-heading": "#ffffff",
+      "--color-text-body": "#d3d3d3",
+      "--color-text-muted": "#a9a9a9",
+      "--color-text-interactive": "#93a6dc",
+      "--ws-on-act": "#021a32",
+      "--ws-act-hover": "#ebedef",
+      "--ws-word-needs": "#ff8b78",
+      "--ws-focus-color": "#ffffff",
+      "--ws-word-positive": "#4fc7be",
+      "--ws-word-alert": "#ff8282",
+      "--ws-chart-finished": "#23a8a3",
+      "--ws-chart-past-half": "#9a84ee",
+      "--ws-chart-under-half": "#ff725c",
+      "--ws-chart-navy-light": "#6e9cc4",
+      "--ws-chart-needs-work": "#f370a4",
+      "--ws-chart-alert": "#ff5470",
+      "--ws-rating-strong": "#3bb8b2",
+      "--ws-rating-middle": "#93a6dc",
+      "--ws-rating-needs-work": "#f370a4",
+      "--ws-agent-coach": "#3bb8b2",
+      "--ws-agent-growth": "#9a84ee",
+      "--ws-agent-recruit": "#ff725c",
+      "--ws-agent-tally": "#ffffff"
+    }
+  },
+  "cool": {
+    "light": {
+      "--color-bg-page": "#fefbf9",
+      "--ws-frame-top": "#ebf0f5",
+      "--ws-stage-foot": "#fefbf9",
+      "--color-surface": "#ffffff",
+      "--ws-raised": "#fefbf9",
+      "--ws-tray": "#ededed",
+      "--ws-edge-card": "#d3d3d3",
+      "--ws-edge": "#e2e2e2",
+      "--ws-edge-hover": "#aaa49d",
+      "--ws-well-hover": "#e4e2df",
+      "--color-text-heading": "#093555",
+      "--color-text-body": "#545454",
+      "--color-text-muted": "#666666",
+      "--color-text-interactive": "#093555",
+      "--ws-on-act": "#ffffff",
+      "--ws-act-hover": "#0f4a73",
+      "--ws-word-needs": "#a84b3c",
+      "--ws-focus-color": "#093555",
+      "--ws-word-positive": "#09717a",
+      "--ws-word-alert": "#b1042f",
+      "--ws-chart-finished": "#098486",
+      "--ws-chart-past-half": "#6d4fc2",
+      "--ws-chart-under-half": "#ff725c",
+      "--ws-chart-navy-light": "#2e6088",
+      "--ws-chart-needs-work": "#f370a4",
+      "--ws-chart-alert": "#b1042f",
+      "--ws-rating-strong": "#098486",
+      "--ws-rating-middle": "#495883",
+      "--ws-rating-needs-work": "#f370a4",
+      "--ws-agent-coach": "#098486",
+      "--ws-agent-growth": "#6d4fc2",
+      "--ws-agent-recruit": "#ff725c",
+      "--ws-agent-tally": "#2c4870"
+    },
+    "dark": {
+      "--color-bg-page": "#0f1922",
+      "--ws-frame-top": "#0a1118",
+      "--ws-stage-foot": "#0f1922",
+      "--color-surface": "#131e28",
+      "--ws-raised": "#16222d",
+      "--ws-tray": "#1e2b38",
+      "--ws-edge-card": "#273544",
+      "--ws-edge": "#1e2a36",
+      "--ws-edge-hover": "#8494a5",
+      "--ws-well-hover": "#273544",
+      "--color-text-heading": "#e8edf3",
+      "--color-text-body": "#b0bbc7",
+      "--color-text-muted": "#8494a5",
+      "--color-text-interactive": "#e8edf3",
+      "--ws-on-act": "#0f1922",
+      "--ws-act-hover": "#d7dce2",
+      "--ws-word-needs": "#ff8b78",
+      "--ws-focus-color": "#e8edf3",
+      "--ws-word-positive": "#4fc7be",
+      "--ws-word-alert": "#ff5470",
+      "--ws-chart-finished": "#23a8a3",
+      "--ws-chart-past-half": "#9a84ee",
+      "--ws-chart-under-half": "#ff725c",
+      "--ws-chart-navy-light": "#6e9cc4",
+      "--ws-chart-needs-work": "#f370a4",
+      "--ws-chart-alert": "#ff5470",
+      "--ws-rating-strong": "#3bb8b2",
+      "--ws-rating-middle": "#e8edf3",
+      "--ws-rating-needs-work": "#f370a4",
+      "--ws-agent-coach": "#3bb8b2",
+      "--ws-agent-growth": "#9a84ee",
+      "--ws-agent-recruit": "#ff725c",
+      "--ws-agent-tally": "#e8edf3"
+    },
+    "navy": {
+      "--color-bg-page": "#021a32",
+      "--ws-frame-top": "#021a32",
+      "--ws-stage-foot": "#021a32",
+      "--color-surface": "#0f253c",
+      "--ws-raised": "#162c42",
+      "--ws-tray": "#2a3f53",
+      "--ws-edge-card": "rgba(255, 255, 255, 0.18)",
+      "--ws-edge": "rgba(255, 255, 255, 0.1)",
+      "--ws-edge-hover": "#a9a9a9",
+      "--ws-well-hover": "#273544",
+      "--color-text-heading": "#ffffff",
+      "--color-text-body": "#d3d3d3",
+      "--color-text-muted": "#a9a9a9",
+      "--color-text-interactive": "#ffffff",
+      "--ws-on-act": "#021a32",
+      "--ws-act-hover": "#ebedef",
+      "--ws-word-needs": "#ff8b78",
+      "--ws-focus-color": "#ffffff",
+      "--ws-word-positive": "#4fc7be",
+      "--ws-word-alert": "#ff8282",
+      "--ws-chart-finished": "#23a8a3",
+      "--ws-chart-past-half": "#9a84ee",
+      "--ws-chart-under-half": "#ff725c",
+      "--ws-chart-navy-light": "#6e9cc4",
+      "--ws-chart-needs-work": "#f370a4",
+      "--ws-chart-alert": "#ff5470",
+      "--ws-rating-strong": "#3bb8b2",
+      "--ws-rating-middle": "#ffffff",
+      "--ws-rating-needs-work": "#f370a4",
+      "--ws-agent-coach": "#3bb8b2",
+      "--ws-agent-growth": "#9a84ee",
+      "--ws-agent-recruit": "#ff725c",
+      "--ws-agent-tally": "#ffffff"
+    }
+  },
+  "warm": {
+    "light": {
+      "--color-bg-page": "#fefbf9",
+      "--ws-frame-top": "#fefbf9",
+      "--ws-stage-foot": "#fef9f6",
+      "--color-surface": "#ffffff",
+      "--ws-raised": "#fefbf9",
+      "--ws-tray": "#ededed",
+      "--ws-edge-card": "#d3d3d3",
+      "--ws-edge": "#e8e8e8",
+      "--ws-edge-hover": "#aaa49d",
+      "--ws-well-hover": "#e4e2df",
+      "--color-text-heading": "#093555",
+      "--color-text-body": "#545454",
+      "--color-text-muted": "#666666",
+      "--color-text-interactive": "#495883",
+      "--ws-on-act": "#ffffff",
+      "--ws-act-hover": "#0f4a73",
+      "--ws-word-needs": "#a84b3c",
+      "--ws-focus-color": "#093555",
+      "--ws-word-positive": "#09717a",
+      "--ws-word-alert": "#b1042f",
+      "--ws-chart-finished": "#098486",
+      "--ws-chart-past-half": "#6d4fc2",
+      "--ws-chart-under-half": "#ff725c",
+      "--ws-chart-navy-light": "#2e6088",
+      "--ws-chart-needs-work": "#f370a4",
+      "--ws-chart-alert": "#b1042f",
+      "--ws-rating-strong": "#098486",
+      "--ws-rating-middle": "#495883",
+      "--ws-rating-needs-work": "#f370a4",
+      "--ws-agent-coach": "#098486",
+      "--ws-agent-growth": "#6d4fc2",
+      "--ws-agent-recruit": "#ff725c",
+      "--ws-agent-tally": "#2c4870"
+    },
+    "dark": {
+      "--color-bg-page": "#0f1922",
+      "--ws-frame-top": "#0a1118",
+      "--ws-stage-foot": "#0f1922",
+      "--color-surface": "#131e28",
+      "--ws-raised": "#16222d",
+      "--ws-tray": "#1e2b38",
+      "--ws-edge-card": "#273544",
+      "--ws-edge": "#1e2a36",
+      "--ws-edge-hover": "#8494a5",
+      "--ws-well-hover": "#273544",
+      "--color-text-heading": "#e8edf3",
+      "--color-text-body": "#b0bbc7",
+      "--color-text-muted": "#8494a5",
+      "--color-text-interactive": "#93a6dc",
+      "--ws-on-act": "#0f1922",
+      "--ws-act-hover": "#d7dce2",
+      "--ws-word-needs": "#ff8b78",
+      "--ws-focus-color": "#e8edf3",
+      "--ws-word-positive": "#4fc7be",
+      "--ws-word-alert": "#ff5470",
+      "--ws-chart-finished": "#23a8a3",
+      "--ws-chart-past-half": "#9a84ee",
+      "--ws-chart-under-half": "#ff725c",
+      "--ws-chart-navy-light": "#6e9cc4",
+      "--ws-chart-needs-work": "#f370a4",
+      "--ws-chart-alert": "#ff5470",
+      "--ws-rating-strong": "#3bb8b2",
+      "--ws-rating-middle": "#93a6dc",
+      "--ws-rating-needs-work": "#f370a4",
+      "--ws-agent-coach": "#3bb8b2",
+      "--ws-agent-growth": "#9a84ee",
+      "--ws-agent-recruit": "#ff725c",
+      "--ws-agent-tally": "#e8edf3"
+    },
+    "navy": {
+      "--color-bg-page": "#021a32",
+      "--ws-frame-top": "#021a32",
+      "--ws-stage-foot": "#021a32",
+      "--color-surface": "#0f253c",
+      "--ws-raised": "#162c42",
+      "--ws-tray": "#2a3f53",
+      "--ws-edge-card": "rgba(255, 255, 255, 0.18)",
+      "--ws-edge": "rgba(255, 255, 255, 0.1)",
+      "--ws-edge-hover": "#a9a9a9",
+      "--ws-well-hover": "#273544",
+      "--color-text-heading": "#ffffff",
+      "--color-text-body": "#d3d3d3",
+      "--color-text-muted": "#a9a9a9",
+      "--color-text-interactive": "#93a6dc",
+      "--ws-on-act": "#021a32",
+      "--ws-act-hover": "#ebedef",
+      "--ws-word-needs": "#ff8b78",
+      "--ws-focus-color": "#ffffff",
+      "--ws-word-positive": "#4fc7be",
+      "--ws-word-alert": "#ff8282",
+      "--ws-chart-finished": "#23a8a3",
+      "--ws-chart-past-half": "#9a84ee",
+      "--ws-chart-under-half": "#ff725c",
+      "--ws-chart-navy-light": "#6e9cc4",
+      "--ws-chart-needs-work": "#f370a4",
+      "--ws-chart-alert": "#ff5470",
+      "--ws-rating-strong": "#3bb8b2",
+      "--ws-rating-middle": "#93a6dc",
+      "--ws-rating-needs-work": "#f370a4",
+      "--ws-agent-coach": "#3bb8b2",
+      "--ws-agent-growth": "#9a84ee",
+      "--ws-agent-recruit": "#ff725c",
+      "--ws-agent-tally": "#ffffff"
+    }
+  }
+} as const satisfies Record<string, Record<'light' | 'dark' | 'navy', Record<ContractToken, string>>>;
+
+export type PaletteName = keyof typeof palettes;

package/tokens/shadcn-compat.css

@@ -1,36 +1,36 @@
 /* Generated by scripts/generate-tokens.mjs. Do not edit.
    Source: Figma Marketing - Design System 3.0 (MmOx1GHtbMge4lSLp1kcs8), captured 2026-06-11,
-   and tokens/_product.css (the product layer).
-   225 tokens: 106 kit, 119 product layer. */
+   tokens/_product.css (the product layer), tokens/_dark.css (the dark theme) and tokens/_palettes.css (the palettes).
+   422 tokens: 111 kit, 311 product layer; dark: 98 night, 42 navy ground. */
 
 /* Maps shadcn's semantic names onto Fello brand tokens. Import AFTER
-   tokens.css. Existing shadcn components then render in brand colours with
-   no edit to the components themselves. */
-:root {
+   tokens.css (or fello.css). Existing shadcn components then render in brand
+   colours with no edit to the components themselves, and follow the kit's dark
+   theme (data-theme="dark") because every name points at a kit token.
+   For a host that writes hsl(var(--primary)) (Tailwind v3 shadcn), import
+   shadcn-compat.hsl.css instead.
+   They are declared again on every element that can carry a palette or a theme, so a shadcn component inside a
+   container with its own palette takes that palette's colours. */
+:root, [data-palette], [data-theme], .fello {
   --background: var(--color-bg-page);
   --foreground: var(--color-text-heading);
-
-  --card: var(--color-white);
+  --card: var(--color-surface);
   --card-foreground: var(--color-text-heading);
-  --popover: var(--color-dropdown-bg);
+  --popover: var(--ws-raised);
   --popover-foreground: var(--color-text-heading);
-
-  --primary: var(--color-brand-salmon);
-  --primary-foreground: var(--color-white);
-  --secondary: var(--color-gray-1);
+  --primary: var(--color-text-heading);
+  --primary-foreground: var(--ws-on-act);
+  --secondary: var(--ws-surface-sunk);
   --secondary-foreground: var(--color-text-heading);
-
-  --muted: var(--color-gray-1);
+  --muted: var(--ws-surface-sunk);
   --muted-foreground: var(--color-text-muted);
-  --accent: var(--color-gray-1);
+  --accent: var(--ws-surface-sunk);
   --accent-foreground: var(--color-text-heading);
-
   --destructive: var(--color-feedback-error);
   --destructive-foreground: var(--color-white);
-
   --border: var(--color-border-default);
   --input: var(--color-border-default);
-  --ring: var(--color-brand-salmon);
+  --ring: var(--ws-focus-color);
 
-  --radius: var(--radius-lg);
+  --radius: var(--ws-radius-card);
 }

package/tokens/shadcn-compat.hsl.css

@@ -0,0 +1,76 @@
+/* Generated by scripts/generate-tokens.mjs. Do not edit.
+   Source: Figma Marketing - Design System 3.0 (MmOx1GHtbMge4lSLp1kcs8), captured 2026-06-11,
+   tokens/_product.css (the product layer), tokens/_dark.css (the dark theme) and tokens/_palettes.css (the palettes).
+   422 tokens: 111 kit, 311 product layer; dark: 98 night, 42 navy ground. */
+
+/* shadcn's names as bare HSL channels, for a host whose Tailwind config writes
+   hsl(var(--primary)) (Tailwind v3 shadcn, Campfire). Literal values, so the dark
+   theme is written out too: data-theme="dark" (and "system" on a dark OS) as the
+   kit, and shadcn's own .dark class. The navy ground and the palettes are not here
+   (literal channels cannot follow them): a host that wants them reads shadcn-compat.css. */
+:root, [data-theme="light"] {
+  --background: 24 71.4% 98.6%; /* --color-bg-page #fefbf9 */
+  --foreground: 205 80.9% 18.4%; /* --color-text-heading #093555 */
+  --card: 0 0% 100%; /* --color-surface #ffffff */
+  --card-foreground: 205 80.9% 18.4%; /* --color-text-heading #093555 */
+  --popover: 24 71.4% 98.6%; /* --ws-raised #fefbf9 */
+  --popover-foreground: 205 80.9% 18.4%; /* --color-text-heading #093555 */
+  --primary: 205 80.9% 18.4%; /* --color-text-heading #093555 */
+  --primary-foreground: 0 0% 100%; /* --ws-on-act #ffffff */
+  --secondary: 30 14.3% 94.5%; /* --ws-surface-sunk #f3f1ef */
+  --secondary-foreground: 205 80.9% 18.4%; /* --color-text-heading #093555 */
+  --muted: 30 14.3% 94.5%; /* --ws-surface-sunk #f3f1ef */
+  --muted-foreground: 0 0% 40%; /* --color-text-muted #666666 */
+  --accent: 30 14.3% 94.5%; /* --ws-surface-sunk #f3f1ef */
+  --accent-foreground: 205 80.9% 18.4%; /* --color-text-heading #093555 */
+  --destructive: 10 83.2% 62.7%; /* --color-feedback-error #ef6b51 */
+  --destructive-foreground: 0 0% 100%; /* --color-white #ffffff */
+  --border: 0 0% 91%; /* --color-border-default #e8e8e8 */
+  --input: 0 0% 91%; /* --color-border-default #e8e8e8 */
+  --ring: 205 80.9% 18.4%; /* --ws-focus-color #093555 */
+  --radius: 8px;
+}
+.dark, [data-theme="dark"] {
+  --background: 208 38.8% 9.6%; /* --color-bg-page #0f1922 */
+  --foreground: 213 31.4% 93.1%; /* --color-text-heading #e8edf3 */
+  --card: 209 35.6% 11.6%; /* --color-surface #131e28 */
+  --card-foreground: 213 31.4% 93.1%; /* --color-text-heading #e8edf3 */
+  --popover: 209 34.3% 13.1%; /* --ws-raised #16222d */
+  --popover-foreground: 213 31.4% 93.1%; /* --color-text-heading #e8edf3 */
+  --primary: 213 31.4% 93.1%; /* --color-text-heading #e8edf3 */
+  --primary-foreground: 208 38.8% 9.6%; /* --ws-on-act #0f1922 */
+  --secondary: 209 33.3% 13.5%; /* --ws-surface-sunk #17232e */
+  --secondary-foreground: 213 31.4% 93.1%; /* --color-text-heading #e8edf3 */
+  --muted: 209 33.3% 13.5%; /* --ws-surface-sunk #17232e */
+  --muted-foreground: 211 15.5% 58.2%; /* --color-text-muted #8494a5 */
+  --accent: 209 33.3% 13.5%; /* --ws-surface-sunk #17232e */
+  --accent-foreground: 213 31.4% 93.1%; /* --color-text-heading #e8edf3 */
+  --destructive: 10 100% 69.4%; /* --color-feedback-error #ff7d63 */
+  --destructive-foreground: 0 0% 100%; /* --color-white #ffffff */
+  --border: 210 28.6% 16.5%; /* --color-border-default #1e2a36 */
+  --input: 210 28.6% 16.5%; /* --color-border-default #1e2a36 */
+  --ring: 213 31.4% 93.1%; /* --ws-focus-color #e8edf3 */
+}
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"] {
+    --background: 208 38.8% 9.6%; /* --color-bg-page #0f1922 */
+    --foreground: 213 31.4% 93.1%; /* --color-text-heading #e8edf3 */
+    --card: 209 35.6% 11.6%; /* --color-surface #131e28 */
+    --card-foreground: 213 31.4% 93.1%; /* --color-text-heading #e8edf3 */
+    --popover: 209 34.3% 13.1%; /* --ws-raised #16222d */
+    --popover-foreground: 213 31.4% 93.1%; /* --color-text-heading #e8edf3 */
+    --primary: 213 31.4% 93.1%; /* --color-text-heading #e8edf3 */
+    --primary-foreground: 208 38.8% 9.6%; /* --ws-on-act #0f1922 */
+    --secondary: 209 33.3% 13.5%; /* --ws-surface-sunk #17232e */
+    --secondary-foreground: 213 31.4% 93.1%; /* --color-text-heading #e8edf3 */
+    --muted: 209 33.3% 13.5%; /* --ws-surface-sunk #17232e */
+    --muted-foreground: 211 15.5% 58.2%; /* --color-text-muted #8494a5 */
+    --accent: 209 33.3% 13.5%; /* --ws-surface-sunk #17232e */
+    --accent-foreground: 213 31.4% 93.1%; /* --color-text-heading #e8edf3 */
+    --destructive: 10 100% 69.4%; /* --color-feedback-error #ff7d63 */
+    --destructive-foreground: 0 0% 100%; /* --color-white #ffffff */
+    --border: 210 28.6% 16.5%; /* --color-border-default #1e2a36 */
+    --input: 210 28.6% 16.5%; /* --color-border-default #1e2a36 */
+    --ring: 213 31.4% 93.1%; /* --ws-focus-color #e8edf3 */
+  }
+}