From aef75e92cb5f9739c9483243463e473949cbe69e Mon Sep 17 00:00:00 2001
From: dreamwasp <cass.spain@skillsoft.com>
Date: Mon, 9 Nov 2026 11:23:46 -0500
Subject: [PATCH 1/2] feat(gamut-styles): groundwork for static component
 styles

Adds defineRecipe, compileRecipe, checkRecipe and StaticStyles. No
component uses them yet. The jest base setup skips window.scrollTo in
node-environment tests.

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
---
 .changeset/static-styles-groundwork.md        |   9 +
 packages/gamut-styles/src/index.ts            |   1 +
 packages/gamut-styles/src/static/README.md    |  80 ++++++++
 .../gamut-styles/src/static/StaticStyles.tsx  |  74 +++++++
 .../__tests__/StaticStyles.ssr.test.tsx       |  36 ++++
 .../src/static/__tests__/recipe.test.tsx      | 157 +++++++++++++++
 .../gamut-styles/src/static/compileRecipe.ts  | 128 ++++++++++++
 .../gamut-styles/src/static/defineRecipe.ts   | 182 ++++++++++++++++++
 packages/gamut-styles/src/static/index.ts     |   3 +
 script/jest/base-setup.js                     |   5 +-
 10 files changed, 674 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/static-styles-groundwork.md
 create mode 100644 packages/gamut-styles/src/static/README.md
 create mode 100644 packages/gamut-styles/src/static/StaticStyles.tsx
 create mode 100644 packages/gamut-styles/src/static/__tests__/StaticStyles.ssr.test.tsx
 create mode 100644 packages/gamut-styles/src/static/__tests__/recipe.test.tsx
 create mode 100644 packages/gamut-styles/src/static/compileRecipe.ts
 create mode 100644 packages/gamut-styles/src/static/defineRecipe.ts
 create mode 100644 packages/gamut-styles/src/static/index.ts

diff --git a/.changeset/static-styles-groundwork.md b/.changeset/static-styles-groundwork.md
new file mode 100644
index 0000000000..9cd50419b5
--- /dev/null
+++ b/.changeset/static-styles-groundwork.md
@@ -0,0 +1,9 @@
+---
+'@skillsoft/gamut-styles': minor
+---
+
+Add groundwork for static component styles. No component uses it yet.
+
+- `defineRecipe` describes a component's styles as data (base, variant groups, defaults, compound variants), in Chakra's and Panda's recipe shape with gamut's style objects. `recipe.styles` styles it through Emotion; `recipe.classNames` gives stable class names.
+- `compileRecipe` turns a recipe into plain CSS in `@layer recipes`, and `checkRecipe` reports whether it compiles the same for every brand theme.
+- `StaticStyles` puts compiled CSS on the page once, through the Emotion cache, so SSR, nonces and stylis plugins work as before.
diff --git a/packages/gamut-styles/src/index.ts b/packages/gamut-styles/src/index.ts
index b704f84fb9..717b16f7b8 100644
--- a/packages/gamut-styles/src/index.ts
+++ b/packages/gamut-styles/src/index.ts
@@ -5,6 +5,7 @@ export * from './GamutProvider';
 export * from './ColorMode';
 export * from './Background';
 export * from './variance';
+export * from './static';
 export * from './cache';
 export * from './variables';
 export * from './styles';
diff --git a/packages/gamut-styles/src/static/README.md b/packages/gamut-styles/src/static/README.md
new file mode 100644
index 0000000000..62ef3c0a5c
--- /dev/null
+++ b/packages/gamut-styles/src/static/README.md
@@ -0,0 +1,80 @@
+# Static styles (groundwork)
+
+Groundwork for moving gamut's components off runtime Emotion styles. Nothing
+uses it yet: no component has moved, and `GamutProvider` still delivers the
+color tokens. Notes and the plan are in Base Camp, `gamut/color-tokens/how-it-works.md`
+("Moving off Emotion, slowly").
+
+Today every gamut component serializes its styles with Emotion on each render.
+A component on a recipe ships CSS compiled ahead of time and only picks class
+names at render.
+
+## The pieces
+
+| Export                       | What                                                                                                                                                                                                                   |
+| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `defineRecipe`               | A component's styles as data: `className`, `base`, `variants` (named groups), `defaultVariants`, `compoundVariants`. Chakra's and Panda's recipe shape, written with the same style objects as `css()` and `variant()` |
+| `recipe.styles`              | The recipe as an Emotion style function, for `styled.div(recipe.styles)`. Writes what the matching `variant()` calls would                                                                                             |
+| `recipe.classNames(props)`   | `gamut-chip gamut-chip--intent_danger gamut-chip--size_sm`. Defaults filled in; `false` turns a group off                                                                                                              |
+| `compileRecipe(recipe)`      | Plain CSS for those class names, in `@layer recipes`                                                                                                                                                                   |
+| `checkRecipe(recipe)`        | Whether the recipe compiles the same for every brand theme. If not, it can't be static yet                                                                                                                             |
+| `<StaticStyles id styles />` | Puts compiled CSS on the page once, through the Emotion cache (SSR, nonce and stylis plugins work as they do now)                                                                                                      |
+
+## Moving a component
+
+1. Rewrite its `variant()` calls as one recipe and style it with
+   `recipe.styles`. Still Emotion; snapshots and visuals shouldn't change. This
+   step is safe to ship alone.
+2. Add `expect(checkRecipe(recipe).pass).toBe(true)` to its tests. If it fails,
+   the recipe uses a per-brand value (see the rules) and stays on step 1.
+3. Compile it once at module scope and render it:
+
+   ```tsx
+   const styles = compileRecipe(chip);
+
+   export const Chip = ({ className, ...props }: ChipProps) => {
+     const [variants, rest] = chip.splitProps(props);
+     return (
+       <>
+         <StaticStyles id={chip.className} styles={styles} />
+         <Box className={cx(chip.classNames(variants), className)} {...rest} />
+       </>
+     );
+   };
+   ```
+
+   Style props and `styled(Chip)` still work and still win: they're Emotion,
+   unlayered, and the recipe is in `@layer recipes`.
+
+4. Later, a build step writes `compileRecipe` output to a generated module (or
+   a stylesheet), so it doesn't run in the browser at all. Components don't
+   change for that.
+
+## Rules for a recipe that compiles
+
+- **Colors are roles.** They compile to `var(--colors-<role>)`, the same for
+  every brand and mode.
+- **No per-brand values.** Fonts, font weights and elevation are still literal
+  values per theme, so `fontFamily: 'accent'` fails `checkRecipe`. Those move
+  to CSS variables in phase 2 of the plan.
+- **No render-time values.** Nothing from props beyond the variant groups, no
+  `useTheme()`, no polished math. Those stay in Emotion next to the recipe.
+- **Always logical properties.** Static CSS can't follow `useLogicalProperties`,
+  so `height` compiles to `block-size` and `px` to `padding-inline-*`. Same
+  rendering in left-to-right horizontal text; under `dir="rtl"` inline spacing
+  follows the text direction even if the app uses physical mode.
+- **`className` is unique,** `gamut-<component>`. It's the class prefix and the
+  `StaticStyles` id.
+
+## Not done
+
+- No build step: `compileRecipe` runs once per module in the browser.
+- No boolean variants yet, so `states()` (`disabled`, `active`, …) stays in
+  Emotion next to the recipe. Panda and Chakra take `true` / `false` keys;
+  that's the shape to add.
+- Delivery is the Emotion cache. React 19's `<style href precedence>` or an
+  imported stylesheet would replace `StaticStyles`'s insides only.
+- `checkRecipe` covers the brand themes. The old themes (core, admin, …) join
+  once they're rebuilt as brands.
+- Types are as strict as `css()`: selections are checked, style values only as
+  far as `css()` checks them.
diff --git a/packages/gamut-styles/src/static/StaticStyles.tsx b/packages/gamut-styles/src/static/StaticStyles.tsx
new file mode 100644
index 0000000000..6cbd5aa538
--- /dev/null
+++ b/packages/gamut-styles/src/static/StaticStyles.tsx
@@ -0,0 +1,74 @@
+import type { EmotionCache, SerializedStyles } from '@emotion/react';
+import { withEmotionCache } from '@emotion/react';
+import * as React from 'react';
+
+/*
+ * Puts a compiled stylesheet on the page once, however many components render
+ * it. A component that has moved to a recipe renders
+ * `<StaticStyles id={recipe.className} styles={compiledCss} />` next to its
+ * element.
+ *
+ * For now it goes through the Emotion cache, the same way Emotion inserts a
+ * class:
+ * - one copy per page, deduplicated on `id` through `cache.inserted`;
+ * - SSR, CSP nonces, a custom container and gamut's stylis plugins all work
+ *   the way they already do;
+ * - React 17, 18 and 19.
+ *
+ * Swapping the delivery later (React 19's `<style href precedence>`, or a
+ * stylesheet the app imports) only changes this file. See static/README.md.
+ */
+
+export interface StaticStylesProps {
+  /* Unique per stylesheet. A recipe's className. */
+  id: string;
+  /* compileRecipe output. Never user input: it's written into a <style>. */
+  styles: string;
+}
+
+const isBrowser = typeof document !== 'undefined';
+
+/*
+ * React 17 has no useInsertionEffect. Emotion falls back to inserting during
+ * render there, and so does this. The name is split so bundlers don't warn
+ * about a missing export on React 17.
+ */
+const useInsertionEffect: (effect: () => void) => void =
+  (React as unknown as Record<string, typeof React.useLayoutEffect>)[
+    `useInsertion${'Effect'}`
+  ] ?? ((effect: () => void) => effect());
+
+const insert = (cache: EmotionCache, id: string, styles: string) => {
+  if (cache.inserted[id] !== undefined) return undefined;
+  const serialized: SerializedStyles = { name: id, styles, next: undefined };
+  return cache.insert('', serialized, cache.sheet, true) as string | undefined;
+};
+
+export const StaticStyles = withEmotionCache<StaticStylesProps>(
+  ({ id, styles }, cache) => {
+    /*
+     * On the server, Emotion's default cache returns the rules instead of
+     * inserting them, and they're rendered inline. On the client, the cache
+     * moves those tags into its container before hydration and marks `id` as
+     * inserted, so nothing is inserted twice.
+     */
+    const ssrRules = isBrowser ? undefined : insert(cache, id, styles);
+
+    useInsertionEffect(() => {
+      if (isBrowser) insert(cache, id, styles);
+    });
+
+    if (!ssrRules) return null;
+    return (
+      <style
+        /* How Emotion renders SSR styles, except `</style` is escaped. */
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{
+          __html: ssrRules.replace(/<\/style/gi, '<\\/style'),
+        }}
+        data-emotion={`${cache.key} ${id}`}
+        nonce={cache.sheet.nonce}
+      />
+    );
+  }
+);
diff --git a/packages/gamut-styles/src/static/__tests__/StaticStyles.ssr.test.tsx b/packages/gamut-styles/src/static/__tests__/StaticStyles.ssr.test.tsx
new file mode 100644
index 0000000000..1c6a404e19
--- /dev/null
+++ b/packages/gamut-styles/src/static/__tests__/StaticStyles.ssr.test.tsx
@@ -0,0 +1,36 @@
+/**
+ * @jest-environment node
+ */
+import { renderToString } from 'react-dom/server';
+
+import { GamutProvider } from '../../GamutProvider';
+import { skillsoftTheme } from '../../themes';
+import { compileRecipe, defineRecipe, StaticStyles } from '..';
+
+const box = defineRecipe({
+  className: 'gamut-ssr-box',
+  base: { bg: 'surface-default' },
+});
+const styles = compileRecipe(box);
+
+const Box = () => (
+  <>
+    <StaticStyles id={box.className} styles={styles} />
+    <div className={box.classNames()} />
+  </>
+);
+
+describe('StaticStyles on the server', () => {
+  it('renders the stylesheet inline once, with the nonce', () => {
+    const html = renderToString(
+      <GamutProvider nonce="abc" theme={skillsoftTheme} useGlobals={false}>
+        <Box />
+        <Box />
+      </GamutProvider>
+    );
+    const tags = html.match(/<style[^>]*data-emotion="gamut gamut-ssr-box"/g);
+    expect(tags).toHaveLength(1);
+    expect(html).toContain('nonce="abc"');
+    expect(html).toContain('@layer recipes{.gamut-ssr-box{');
+  });
+});
diff --git a/packages/gamut-styles/src/static/__tests__/recipe.test.tsx b/packages/gamut-styles/src/static/__tests__/recipe.test.tsx
new file mode 100644
index 0000000000..e2eb18fcd9
--- /dev/null
+++ b/packages/gamut-styles/src/static/__tests__/recipe.test.tsx
@@ -0,0 +1,157 @@
+import { matchers } from '@emotion/jest';
+import styled from '@emotion/styled';
+import { render } from '@testing-library/react';
+
+import { createEmotionCache } from '../../cache';
+import { GamutProvider } from '../../GamutProvider';
+import { skillsoftTheme } from '../../themes';
+import { checkRecipe, compileRecipe, defineRecipe, StaticStyles } from '..';
+
+expect.extend(matchers);
+
+const chip = defineRecipe({
+  className: 'gamut-chip',
+  base: { display: 'inline-flex', borderRadius: 'md', bg: 'surface-default' },
+  variants: {
+    intent: {
+      primary: { bg: 'action-primary', color: 'text-inverse' },
+      danger: { bg: 'action-danger', color: 'text-inverse' },
+    },
+    size: {
+      sm: { height: '1.5rem', fontSize: 14 },
+      md: { height: '2rem', fontSize: 16 },
+    },
+  },
+  defaultVariants: { intent: 'primary', size: 'md' },
+  compoundVariants: [
+    { intent: 'danger', size: 'sm', css: { textDecoration: 'underline' } },
+  ],
+});
+
+describe('defineRecipe', () => {
+  it('names a class per selected variant, with defaults filled in', () => {
+    expect(chip.classNames()).toBe(
+      'gamut-chip gamut-chip--intent_primary gamut-chip--size_md'
+    );
+    expect(chip.classNames({ intent: 'danger', size: false })).toBe(
+      'gamut-chip gamut-chip--intent_danger'
+    );
+  });
+
+  it('type-checks selections', () => {
+    // @ts-expect-error not one of the intents
+    expect(chip.classNames({ intent: 'nope' })).toContain('gamut-chip');
+  });
+
+  it('splits variant props from the rest', () => {
+    const [variants, rest] = chip.splitProps({
+      intent: 'danger' as const,
+      id: 'x',
+    });
+    expect(variants).toEqual({ intent: 'danger' });
+    expect(rest).toEqual({ id: 'x' });
+  });
+
+  it('styles through Emotion the same way variant() does', () => {
+    const Chip = styled.div(chip.styles);
+    const { container } = render(
+      <GamutProvider theme={skillsoftTheme}>
+        <Chip intent="danger" size="sm" />
+      </GamutProvider>
+    );
+    const el = container.firstChild;
+    expect(el).toHaveStyleRule(
+      'background-color',
+      'var(--colors-action-danger)'
+    );
+    expect(el).toHaveStyleRule('height', '1.5rem');
+    expect(el).toHaveStyleRule('text-decoration', 'underline');
+  });
+});
+
+describe('compileRecipe', () => {
+  const output = compileRecipe(chip);
+
+  it('writes every rule into @layer recipes', () => {
+    expect(output.startsWith('@layer recipes{')).toBe(true);
+    expect(output).toContain(
+      '.gamut-chip{display:inline-flex;border-radius:4px;background-color:var(--colors-surface-default);}'
+    );
+    expect(output).not.toContain('label');
+  });
+
+  it('always writes logical properties', () => {
+    expect(output).toContain('block-size:1.5rem;');
+    expect(compileRecipe(chip, { useLogicalProperties: false })).toContain(
+      'height:1.5rem;'
+    );
+  });
+
+  it('keeps spaces inside values', () => {
+    const bordered = defineRecipe({
+      className: 'gamut-bordered',
+      base: { gridTemplateColumns: '1fr 2fr' },
+    });
+    expect(compileRecipe(bordered)).toContain('grid-template-columns:1fr 2fr;');
+  });
+
+  it('points colors at the role variables, not values', () => {
+    expect(output).toContain(
+      '.gamut-chip--intent_danger{color:var(--colors-text-inverse);background-color:var(--colors-action-danger);}'
+    );
+  });
+
+  it('gives compound variants both classes, so they win on specificity', () => {
+    expect(output).toContain(
+      '.gamut-chip--intent_danger.gamut-chip--size_sm{text-decoration:underline;}'
+    );
+  });
+});
+
+describe('checkRecipe', () => {
+  it('passes a recipe that only uses roles and shared scales', () => {
+    expect(checkRecipe(chip)).toEqual({ pass: true, differs: [] });
+  });
+
+  it('fails a value that changes with the brand', () => {
+    const titled = defineRecipe({
+      className: 'gamut-titled',
+      base: { fontFamily: 'accent' },
+    });
+    expect(checkRecipe(titled).pass).toBe(false);
+  });
+
+  it('names the brands that differ', () => {
+    const titled = defineRecipe({
+      className: 'gamut-titled',
+      base: { fontFamily: 'accent' },
+    });
+    expect(checkRecipe(titled).differs).toEqual(['originalCodecademy']);
+  });
+});
+
+describe('StaticStyles', () => {
+  const styles = compileRecipe(chip);
+  const Chip = () => (
+    <>
+      <StaticStyles id={chip.className} styles={styles} />
+      <span className={chip.classNames()} />
+    </>
+  );
+
+  it('inserts the stylesheet once, however many times it renders', () => {
+    const cache = createEmotionCache({ speedy: false });
+    render(
+      <GamutProvider cache={cache} theme={skillsoftTheme} useGlobals={false}>
+        <Chip />
+        <Chip />
+        <Chip />
+      </GamutProvider>
+    );
+    const sheets = Array.from(document.querySelectorAll('style')).filter((s) =>
+      s.textContent?.includes('.gamut-chip{')
+    );
+    expect(sheets).toHaveLength(1);
+    expect(cache.inserted[chip.className]).toBe(true);
+  });
+});
diff --git a/packages/gamut-styles/src/static/compileRecipe.ts b/packages/gamut-styles/src/static/compileRecipe.ts
new file mode 100644
index 0000000000..95a303a45b
--- /dev/null
+++ b/packages/gamut-styles/src/static/compileRecipe.ts
@@ -0,0 +1,128 @@
+import type { Theme } from '@emotion/react';
+import { css as emotionCss } from '@emotion/react';
+import type { Middleware } from 'stylis';
+import { compile, middleware, serialize, stringify } from 'stylis';
+
+import { originalCodecademyTheme, skillsoftTheme } from '../themes';
+import { css } from '../variance';
+import type { Recipe, StyleObject, VariantGroups } from './defineRecipe';
+import { variantClassName } from './defineRecipe';
+
+/*
+ * Recipe → plain CSS, in `@layer recipes` (declared by tokens.css). Emotion's
+ * styles stay unlayered, so style props and `styled()` overrides still win
+ * over a compiled recipe with no specificity games.
+ *
+ * Always logical properties: static CSS can't follow GamutProvider's
+ * `useLogicalProperties`. In left-to-right, horizontal text they render the
+ * same as physical ones (`block-size` is `height`). Under `dir="rtl"` inline
+ * spacing and borders follow the text direction, physical mode or not.
+ *
+ * The output is unprefixed and doesn't run gamut's stylis plugins. Whatever
+ * delivers it does that: StaticStyles inserts through the Emotion cache,
+ * which runs them, the same as for every other style. A future build step
+ * that writes a stylesheet has to run them itself.
+ */
+
+export const RECIPE_LAYER = 'recipes';
+
+export interface CompileOptions {
+  theme?: Theme;
+  useLogicalProperties?: boolean;
+}
+
+/* Emotion's babel plugin labels css() calls; the cache strips them, so do we. */
+const removeLabel: Middleware = (element) => {
+  if (element.type === 'decl' && element.props === 'label') {
+    element.return = '';
+    element.value = '';
+  }
+  return undefined;
+};
+
+const rule = (selector: string, style: StyleObject, theme: Theme) => {
+  /* A fresh css() each time: it caches the first theme it's called with. */
+  const object = css(style)({ theme });
+  if (!Object.keys(object).length) return '';
+  return serialize(
+    compile(`${selector}{${emotionCss(object as never).styles}}`),
+    middleware([removeLabel, stringify])
+  );
+};
+
+export const compileRecipe = <V extends VariantGroups>(
+  recipe: Recipe<V>,
+  { theme = skillsoftTheme, useLogicalProperties = true }: CompileOptions = {}
+): string => {
+  const { className, base = {} } = recipe.config;
+  const variants = (recipe.config.variants ?? {}) as Record<
+    keyof V,
+    Record<string, StyleObject>
+  >;
+  const compounds = recipe.config.compoundVariants ?? [];
+  const themed = { ...theme, useLogicalProperties } as Theme;
+
+  const rules = [
+    rule(`.${className}`, base, themed),
+    ...recipe.variantKeys.flatMap((group) =>
+      Object.entries(variants[group]).map(([value, style]) =>
+        rule(
+          `.${variantClassName(className, String(group), value)}`,
+          style,
+          themed
+        )
+      )
+    ),
+    ...compounds.map(({ css: style, ...when }) =>
+      rule(
+        Object.entries(when)
+          .map(
+            ([group, value]) =>
+              `.${variantClassName(className, group, String(value))}`
+          )
+          .join(''),
+        style,
+        themed
+      )
+    ),
+  ];
+
+  return `@layer ${RECIPE_LAYER}{${rules.join('')}}`;
+};
+
+/*
+ * A recipe compiles to static CSS only if its output doesn't depend on which
+ * brand theme is active: colors are role variables and the same everywhere,
+ * but fonts, font weights and elevation are still per-theme values. Compile
+ * it for every brand and compare.
+ *
+ * The old themes (core, admin, …) aren't on the color roles, so they're left
+ * out until they're rebuilt as brands.
+ */
+export const STATIC_CASES: Required<CompileOptions>[] = [
+  skillsoftTheme,
+  originalCodecademyTheme,
+].map((theme) => ({
+  theme: theme as unknown as Theme,
+  useLogicalProperties: true,
+}));
+
+export interface StaticCheck {
+  pass: boolean;
+  /* Names of the themes that compiled differently from the first. */
+  differs: string[];
+}
+
+export const checkRecipe = <V extends VariantGroups>(
+  recipe: Recipe<V>,
+  cases: Required<CompileOptions>[] = STATIC_CASES
+): StaticCheck => {
+  const [first, ...rest] = cases.map((options) =>
+    compileRecipe(recipe, options)
+  );
+  const differs = rest
+    .map((output, i) => ({ output, options: cases[i + 1] }))
+    .filter(({ output }) => output !== first)
+    .map(({ options }) => String((options.theme as { name?: string }).name));
+  return { pass: differs.length === 0, differs };
+};
diff --git a/packages/gamut-styles/src/static/defineRecipe.ts b/packages/gamut-styles/src/static/defineRecipe.ts
new file mode 100644
index 0000000000..dab7717118
--- /dev/null
+++ b/packages/gamut-styles/src/static/defineRecipe.ts
@@ -0,0 +1,182 @@
+import type {
+  AbstractProps,
+  CSS,
+  CSSObject,
+  CSSPropMap,
+  CSSProps,
+  SystemProps,
+  ThemeProps,
+} from '@skillsoft/variance';
+import merge from 'lodash/merge';
+
+import { css } from '../variance';
+
+/*
+ * A recipe is a component's styles as data: a base, named groups of variants,
+ * defaults, and compound variants for combinations. It's the shape Chakra and
+ * Panda use (`defineRecipe` / `cva`), written with the same style objects as
+ * gamut's `css()` and `variant()`.
+ *
+ * Because it's data, one recipe can be styled two ways:
+ * - `recipe.styles`, an Emotion style function, for a component that hasn't
+ *   moved yet. It writes what the matching `variant()` calls would.
+ * - `compileRecipe(recipe)`, plain CSS with stable class names, for a
+ *   component that renders `<StaticStyles>` and `recipe.classNames(props)`.
+ *
+ * See static/README.md for the rules a recipe has to follow to compile.
+ */
+
+type System = SystemProps<typeof css extends CSS<infer P> ? P : never>;
+
+/*
+ * Typed the way variant() is: the shapes are inferred from the literal, then
+ * checked as gamut style objects, so role names and scale keys autocomplete.
+ */
+export type StyleObject<Props = AbstractProps> = CSSProps<Props, System>;
+
+/* The inferred shape of a recipe's variants: group → value → style. */
+export type VariantGroups = Record<string, Record<string, AbstractProps>>;
+
+export type RecipeSelection<V extends VariantGroups> = {
+  [K in keyof V]?: keyof V[K] | false;
+};
+
+/* Chakra's and Panda's shape: the groups to match, plus `css`. */
+export type CompoundVariant<V extends VariantGroups, C = AbstractProps> = {
+  [K in keyof V]?: keyof V[K];
+} & { css: StyleObject<C> };
+
+export interface RecipeConfig<
+  V extends VariantGroups,
+  B = AbstractProps,
+  C = AbstractProps
+> {
+  /* Class name prefix, `gamut-<component>`. Has to be unique. */
+  className: string;
+  base?: StyleObject<B>;
+  /*
+   * `V &` gives TypeScript something to infer the literal from; three levels
+   * of mapped types are too deep to infer through. The mapped half checks it.
+   */
+  variants?: V & { [K in keyof V]: CSSPropMap<V[K], System> };
+  defaultVariants?: { [K in keyof V]?: keyof V[K] };
+  compoundVariants?: CompoundVariant<V, C>[];
+}
+
+export interface Recipe<V extends VariantGroups> {
+  className: string;
+  config: RecipeConfig<V>;
+  variantKeys: (keyof V)[];
+  /* The selection with defaults filled in; `false` turns a group off. */
+  resolve: (selection?: RecipeSelection<V>) => RecipeSelection<V>;
+  classNames: (selection?: RecipeSelection<V>) => string;
+  styles: (props: RecipeSelection<V> & ThemeProps) => CSSObject;
+  /* Splits variant props from the rest, so they aren't forwarded. */
+  splitProps: <P extends RecipeSelection<V>>(
+    props: P
+  ) => [RecipeSelection<V>, Omit<P, keyof V>];
+}
+
+export const variantClassName = (
+  className: string,
+  group: string,
+  value: string
+) => `${className}--${group}_${value}`;
+
+export const matchesCompound = <V extends VariantGroups>(
+  compound: CompoundVariant<V, unknown>,
+  selection: RecipeSelection<V>
+) =>
+  Object.entries(compound)
+    .filter(([group]) => group !== 'css')
+    .every(([group, value]) => selection[group] === value);
+
+export const defineRecipe = <
+  V extends VariantGroups = Record<never, never>,
+  B extends AbstractProps = AbstractProps,
+  C extends AbstractProps = AbstractProps
+>(
+  config: RecipeConfig<V, B, C>
+): Recipe<V> => {
+  const { className, base = {}, compoundVariants = [] } = config;
+  const defaultVariants: NonNullable<RecipeConfig<V>['defaultVariants']> =
+    config.defaultVariants ?? {};
+  const variants = (config.variants ?? {}) as Record<
+    keyof V,
+    Record<string, StyleObject>
+  >;
+  const variantKeys = Object.keys(variants) as (keyof V)[];
+
+  const resolve = (selection: RecipeSelection<V> = {}) => {
+    const resolved: RecipeSelection<V> = {};
+    variantKeys.forEach((group) => {
+      const value = selection[group] ?? defaultVariants[group];
+      if (value !== undefined && value !== false) resolved[group] = value;
+    });
+    return resolved;
+  };
+
+  /* Built once, like variant(): css() caches the first theme it sees. */
+  const baseFn = css(base as StyleObject);
+  const variantFns = variantKeys.map(
+    (group) =>
+      [
+        group,
+        Object.fromEntries(
+          Object.entries(variants[group]).map(([value, style]) => [
+            value,
+            css(style),
+          ])
+        ),
+      ] as const
+  );
+  const compoundFns = compoundVariants.map(
+    (compound) => [compound, css(compound.css as StyleObject)] as const
+  );
+
+  return {
+    className,
+    config: config as RecipeConfig<V>,
+    variantKeys,
+    resolve,
+    classNames: (selection) => {
+      const resolved = resolve(selection);
+      return [
+        className,
+        ...variantKeys
+          .filter((group) => resolved[group] !== undefined)
+          .map((group) =>
+            variantClassName(className, String(group), String(resolved[group]))
+          ),
+      ].join(' ');
+    },
+    /*
+     * Same order as the compiled CSS: base, then each group in config order,
+     * then compounds. Compiled compounds also win on specificity.
+     */
+    styles: (props) => {
+      const resolved = resolve(props);
+      const styles: CSSObject = {};
+      merge(styles, baseFn(props));
+      variantFns.forEach(([group, fns]) => {
+        const value = resolved[group];
+        if (value !== undefined) merge(styles, fns[String(value)]?.(props));
+      });
+      compoundFns.forEach(([compound, fn]) => {
+        if (matchesCompound(compound, resolved)) merge(styles, fn(props));
+      });
+      return styles;
+    },
+    splitProps: (props) => {
+      const picked: RecipeSelection<V> = {};
+      const rest = { ...props };
+      variantKeys.forEach((group) => {
+        if (group in rest) {
+          picked[group] = rest[group] as RecipeSelection<V>[keyof V];
+          delete rest[group];
+        }
+      });
+      return [picked, rest];
+    },
+  };
+};
diff --git a/packages/gamut-styles/src/static/index.ts b/packages/gamut-styles/src/static/index.ts
new file mode 100644
index 0000000000..5d9cf0485d
--- /dev/null
+++ b/packages/gamut-styles/src/static/index.ts
@@ -0,0 +1,3 @@
+export * from './defineRecipe';
+export * from './compileRecipe';
+export * from './StaticStyles';
diff --git a/script/jest/base-setup.js b/script/jest/base-setup.js
index 4f2e42d08c..ca793cc877 100644
--- a/script/jest/base-setup.js
+++ b/script/jest/base-setup.js
@@ -4,4 +4,7 @@ Date.now = jest.fn(() => new Date(2011, 6, 1).valueOf());
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 function noop() {}
 
-Object.defineProperty(window, 'scrollTo', { value: noop, writable: true });
+// Tests marked `@jest-environment node` (server rendering) have no window.
+if (typeof window !== 'undefined') {
+  Object.defineProperty(window, 'scrollTo', { value: noop, writable: true });
+}

From afe9a97a78e7e7e15037dce3845976e875b76b12 Mon Sep 17 00:00:00 2001
From: dreamwasp <cass.spain@skillsoft.com>
Date: Tue, 10 Nov 2026 09:09:52 -0500
Subject: [PATCH 2/2] refactor: use the singular --color- prefix for color
 variables

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
---
 .changeset/color-system-brands.md             |    4 +-
 .../skills/gamut-review/SKILL.md              |   40 +-
 .../skills/gamut-style-utilities/SKILL.md     |    2 +-
 packages/gamut-styles/scripts/build-tokens.ts |   12 +-
 .../gamut-styles/scripts/validate-tokens.ts   |    6 +-
 packages/gamut-styles/src/ColorMode.tsx       |    8 +-
 .../src/__tests__/Background.test.tsx         |   10 +-
 .../src/__tests__/GamutProvider.test.tsx      |    8 +-
 .../src/__tests__/stylingContract.test.tsx    |   12 +-
 .../gamut-styles/src/colorSystem/README.md    |   28 +-
 .../src/colorSystem/__tests__/system.test.ts  |    4 +-
 packages/gamut-styles/src/colorSystem/emit.ts |    2 +-
 packages/gamut-styles/src/static/README.md    |    2 +-
 .../src/static/__tests__/recipe.test.tsx      |    6 +-
 .../__snapshots__/theme.test.ts.snap          | 2310 ++++++++---------
 .../themes/__tests__/brandElevation.test.ts   |   12 +-
 .../src/themes/createBrandTheme.ts            |    4 +-
 .../originalCodecademy.dark.tokens.json       |    4 +-
 .../originalCodecademy.light.tokens.json      |    4 +-
 .../src/tokens/generated/dark.tokens.json     |    4 +-
 .../src/tokens/generated/light.tokens.json    |    4 +-
 .../src/tokens/generated/tokens.css           |  606 ++---
 .../src/tokens/generated/tokensCss.ts         |    2 +-
 .../gamut/src/Alert/__tests__/Alert.test.tsx  |   10 +-
 .../lib/VidstackPlayer/vidstack-styles.css    |    8 +-
 .../ColorMode/CssContract.stories.tsx         |   18 +-
 .../integration/__tests__/variance.test.ts    |    2 +-
 .../src/createTheme/createTheme.test.ts       |    8 +-
 .../variance/src/createTheme/createTheme.ts   |   10 +-
 29 files changed, 1575 insertions(+), 1575 deletions(-)

diff --git a/.changeset/color-system-brands.md b/.changeset/color-system-brands.md
index 8816d57e5b..0f902aab2c 100644
--- a/.changeset/color-system-brands.md
+++ b/.changeset/color-system-brands.md
@@ -4,9 +4,9 @@
 '@skillsoft/gamut': minor
 ---
 
-Brands on the generated color system, and `--colors-*` variable names.
+Brands on the generated color system, and `--color-*` variable names.
 
-- **Breaking:** color CSS variables are renamed from `--color-*` to `--colors-*`, in `@skillsoft/variance`'s `createTheme` and in `tokens.css`. Raw CSS that reads `var(--color-…)` has to be updated.
+- **Breaking:** color CSS variables are renamed from `--color-*` to `--color-*`, in `@skillsoft/variance`'s `createTheme` and in `tokens.css`. Raw CSS that reads `var(--color-…)` has to be updated.
 - **Breaking:** `tokens.css` puts its rules in `@layer tokens`, with `reset, base, tokens, recipes, utilities` declared first.
 - Adds `originalCodecademyTheme`, today's core colors, fonts and hard-offset elevation rebuilt on the generated system. `tokens.css` carries a palette block per brand under `[data-brand]`.
 - A brand can override a palette step with an exact hex, or point a role at a different step (and, optionally, a different alpha) in one mode. Overrides go through the same contrast checks as generated values.
diff --git a/packages/gamut-agent-tools/skills/gamut-review/SKILL.md b/packages/gamut-agent-tools/skills/gamut-review/SKILL.md
index 3beed06dd6..353ce56c65 100644
--- a/packages/gamut-agent-tools/skills/gamut-review/SKILL.md
+++ b/packages/gamut-agent-tools/skills/gamut-review/SKILL.md
@@ -19,9 +19,9 @@ Remediation skills: [`gamut-theming`](../gamut-theming/SKILL.md) · [`gamut-colo
 
 Resolve the audit root from the user's path if provided, otherwise the current working directory. Look for `DESIGN.md` at that root (not inside `node_modules` or package subfolders unless the audit path is explicitly that folder).
 
-| Result  | Action                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Found   | Report `✓ DESIGN.md present (<path>)`. Proceed with Checks 1–5 using this file for product/theme context.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| Result  | Action                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Found   | Report `✓ DESIGN.md present (<path>)`. Proceed with Checks 1–5 using this file for product/theme context.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
 | Missing | Report `✗ DESIGN.md not found` as a blocking finding. Include remediation: from the repo root run `gamut plugin install cursor --theme core` (or `percipio`, `lxstudio`, `admin`, `platform`; also `claude`), or manually copy the matching `DESIGN.*.md` from `@skillsoft/gamut` agent-tools and rename to `DESIGN.md`. Still run Checks 1–3 and 5. For Check 4, list hex violations with `palette:` / `semantic:` only where Appendix A/B apply without product YAML — prefix the Hardcoded colors section with `⚠ low confidence — no DESIGN.md` and do not assume Codecademy Core semantics; do not use Appendix B shortcuts as authoritative. |
 
 ---
@@ -30,11 +30,11 @@ Resolve the audit root from the user's path if provided, otherwise the current w
 
 Read `package.json` at the audit root. Inspect `dependencies`, `devDependencies`, and `peerDependencies` combined.
 
-| Package                    | Expectation                                                                                                                                                                                                                                                                                                                                                                                                      |
-| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `@skillsoft/gamut`        | Required — core component library                                                                                                                                                                                                                                                                                                                                                                                |
-| `@skillsoft/gamut-styles` | Recommended — design tokens and theme primitives                                                                                                                                                                                                                                                                                                                                                                 |
-| `@skillsoft/variance`     | Recommended — style-prop system used by Gamut internals                                                                                                                                                                                                                                                                                                                                                          |
+| Package                   | Expectation                                             |
+| ------------------------- | ------------------------------------------------------- |
+| `@skillsoft/gamut`        | Required — core component library                       |
+| `@skillsoft/gamut-styles` | Recommended — design tokens and theme primitives        |
+| `@skillsoft/variance`     | Recommended — style-prop system used by Gamut internals |
 
 ---
 
@@ -48,7 +48,7 @@ Search source files (`.ts`, `.tsx`, `.js`, `.jsx`) for these symbols. Skip `node
 | --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `GamutProvider`                   | Required — must appear at least once (app root wrapper)                                                                                                                                                                                                                                                                                 |
 | `ColorMode`                       | Recommended — enables semantic light/dark theming                                                                                                                                                                                                                                                                                       |
-| `Background`                      | Recommended — semantic surface color via `@skillsoft/gamut-styles`                                                                                                                                                                                                                                                                     |
+| `Background`                      | Recommended — semantic surface color via `@skillsoft/gamut-styles`                                                                                                                                                                                                                                                                      |
 | `declare module '@emotion/react'` | **Required if TypeScript** — `Theme` must be augmented with the active theme type (e.g. `CoreTheme`) so scale props type-check correctly; grep `.d.ts` and `.ts`/`.tsx` source files for this string. **Recommended if not TypeScript** — note that adopting TypeScript is recommended and that `theme.d.ts` will be needed when it is. |
 
 For each found symbol report the first file path where it appears.
@@ -61,8 +61,8 @@ For each found symbol report the first file path where it appears.
 
 Grep source files for any of these patterns. Each match is an error.
 
-| Pattern                         | Reason                                                                  |
-| ------------------------------- | ----------------------------------------------------------------------- |
+| Pattern                        | Reason                                                                  |
+| ------------------------------ | ----------------------------------------------------------------------- |
 | `@skillsoft/gamut/dist/`       | Deep dist import — bypasses public API and breaks on internal refactors |
 | `@skillsoft/gamut/src/`        | Deep src import — not part of the published package                     |
 | `@skillsoft/gamut-styles/src/` | Deep src import — use the package root                                  |
@@ -393,7 +393,7 @@ After the hex scan, grep `.scss`, `.css`, and `.less` files for `var(--` occurre
 
 _Gamut-issued variables_ — skip these:
 
-- `--colors-*` (ColorMode semantic aliases)
+- `--color-*` (ColorMode semantic aliases)
 - `--space*` (spacing scale)
 - `--font*` (font-size scale)
 - `--lineHeight*` (line-height scale)
@@ -406,7 +406,7 @@ Any other name — especially camel-cased semantic names like `--darkNeutralColo
 
 Severity: ✗ error for color-semantic variables (invisible in tests/Storybook without the host stylesheet); ⚠ warning for spacing/sizing variables that duplicate Gamut scale tokens.
 
-Reporting: count unique non-Gamut variable names and list the top offenders with frequency. Do not enumerate every call-site — just the variable names and usage counts. Suggest the nearest Gamut semantic alias where obvious (e.g. `--darkNeutralColor` → `--colors-text`, `--whiteColor` → `--colors-background`).
+Reporting: count unique non-Gamut variable names and list the top offenders with frequency. Do not enumerate every call-site — just the variable names and usage counts. Suggest the nearest Gamut semantic alias where obvious (e.g. `--darkNeutralColor` → `--color-text`, `--whiteColor` → `--color-background`).
 
 ---
 
@@ -414,13 +414,13 @@ Reporting: count unique non-Gamut variable names and list the top offenders with
 
 Grep test files (`**/__tests__/**/*.{ts,tsx}`, `**/*.test.{ts,tsx}`, `**/*.spec.{ts,tsx}`) for these patterns. Skip `node_modules`, `dist`.
 
-| Pattern                                               | Verdict                               | Reason                                                                                                                                                                                                                                  |
-| ----------------------------------------------------- | ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `jest.mock\(.*@skillsoft/gamut`                      | Error                                 | Manual mocking bypasses theme context and produces false-positive tests; prefer `setupRtl` from `@skillsoft/gamut-tests` (or a harness + `setupRtl`); use raw `MockGamutProvider` + `render` only for rare one-offs or Storybook mocks |
-| `jest.mock\(.*@skillsoft/gamut-styles`               | Error                                 | Same issue as above — mocking gamut-styles breaks token resolution                                                                                                                                                                      |
-| `from '@skillsoft/gamut-tests'`                      | Good — report count of files using it | Correct import for `setupRtl` and `MockGamutProvider`                                                                                                                                                                                   |
+| Pattern                                               | Verdict                               | Reason                                                                                                                                                                                                                                 |
+| ----------------------------------------------------- | ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `jest.mock\(.*@skillsoft/gamut`                       | Error                                 | Manual mocking bypasses theme context and produces false-positive tests; prefer `setupRtl` from `@skillsoft/gamut-tests` (or a harness + `setupRtl`); use raw `MockGamutProvider` + `render` only for rare one-offs or Storybook mocks |
+| `jest.mock\(.*@skillsoft/gamut-styles`                | Error                                 | Same issue as above — mocking gamut-styles breaks token resolution                                                                                                                                                                     |
+| `from '@skillsoft/gamut-tests'`                       | Good — report count of files using it | Correct import for `setupRtl` and `MockGamutProvider`                                                                                                                                                                                  |
 | `from 'component-test-setup'` (without gamut-tests)   | Warning                               | Should import `setupRtl` from `@skillsoft/gamut-tests`, not directly from `component-test-setup` — the gamut-tests wrapper adds `MockGamutProvider` automatically                                                                      |
-| `new GamutProvider` or `<GamutProvider` in test files | Warning                               | Prefer `setupRtl`; use `MockGamutProvider` (sets `useCache={false}`, `useGlobals={false}`) in harnesses or stories, not `GamutProvider` directly                                                                                        |
+| `new GamutProvider` or `<GamutProvider` in test files | Warning                               | Prefer `setupRtl`; use `MockGamutProvider` (sets `useCache={false}`, `useGlobals={false}`) in harnesses or stories, not `GamutProvider` directly                                                                                       |
 | `jest.mock\(.*[Gg]amut[Pp]rovider`                    | Warning                               | Mocking any file whose path contains `GamutProvider` (including project-internal wrappers) strips Emotion/theme context; prefer `setupRtl` from `@skillsoft/gamut-tests`                                                               |
 
 Skill reference for remediation: [`gamut-testing`](../gamut-testing/SKILL.md)
@@ -530,7 +530,7 @@ Hardcoded colors                                                         [→ ga
   ✗  src/Card.tsx:22   '#10162F'  →  semantic: text | palette: navy-800 | note: Core light body copy
   ⚠  src/Hero.tsx:14   '#1557FF'  →  semantic: primary (if link/CTA) | palette: blue-500 | note: no exact semantic; confirm theme
   ⚠  src/Nav.tsx:8     '#BADA55'  →  semantic: (n/a) | palette: — | note: no Gamut token
-  ✗  Non-Gamut CSS vars   --darkNeutralColor (8 uses), --whiteColor (5 uses)  →  --colors-text, --colors-background
+  ✗  Non-Gamut CSS vars   --darkNeutralColor (8 uses), --whiteColor (5 uses)  →  --color-text, --color-background
 
 Test setup                                                               [→ gamut-testing]
   ✓  @skillsoft/gamut-tests   used in 12 test files
diff --git a/packages/gamut-agent-tools/skills/gamut-style-utilities/SKILL.md b/packages/gamut-agent-tools/skills/gamut-style-utilities/SKILL.md
index 3538716a27..e4431171f5 100644
--- a/packages/gamut-agent-tools/skills/gamut-style-utilities/SKILL.md
+++ b/packages/gamut-agent-tools/skills/gamut-style-utilities/SKILL.md
@@ -119,7 +119,7 @@ const Sparkline = () => {
 };
 ```
 
-**For colors, `theme.colors[key]` is usually enough — it works with aliases and doesn't need a second lookup step.** `theme.colors[key]` (including semantic aliases like `'primary'` or `'background-current'`) returns a live CSS variable reference (`var(--colors-key)`), which the browser resolves through the normal light/dark cascade. This works as a plain attribute value on DOM-rendered elements — including SVG presentation attributes like `stroke`/`fill` — exactly like `RadialProgress` does it in production: `stroke={theme.colors['background-current']}` (`packages/gamut/src/RadialProgress/index.tsx`). Reach for this first; it's simpler and it's what real Gamut components actually do for imperative SVG color.
+**For colors, `theme.colors[key]` is usually enough — it works with aliases and doesn't need a second lookup step.** `theme.colors[key]` (including semantic aliases like `'primary'` or `'background-current'`) returns a live CSS variable reference (`var(--color-key)`), which the browser resolves through the normal light/dark cascade. This works as a plain attribute value on DOM-rendered elements — including SVG presentation attributes like `stroke`/`fill` — exactly like `RadialProgress` does it in production: `stroke={theme.colors['background-current']}` (`packages/gamut/src/RadialProgress/index.tsx`). Reach for this first; it's simpler and it's what real Gamut components actually do for imperative SVG color.
 
 **The exception**: a `var(...)` string doesn't mean anything to a consumer outside the DOM/CSS rendering pipeline — canvas 2D `fillStyle`, WebGL, or any color-math (contrast calculations, blending) that needs the actual resolved value. For those, use `useColorModes()` instead of bare `useTheme()` — but its `getColorValue()` only accepts a **raw palette key** (`hyper-500`, `navy-800`, …), not an alias: `getColorValue('primary')` silently returns `undefined`, since aliases are never merged into the raw-key map `getColorValue` reads. Resolve the alias first with `isColorAlias`, exactly like `packages/gamut-styles/src/Background.tsx` does before computing contrast:
 
diff --git a/packages/gamut-styles/scripts/build-tokens.ts b/packages/gamut-styles/scripts/build-tokens.ts
index ea4be41924..78b6ac0328 100644
--- a/packages/gamut-styles/scripts/build-tokens.ts
+++ b/packages/gamut-styles/scripts/build-tokens.ts
@@ -45,10 +45,10 @@ const SELECTORS: Record<Mode, string> = {
  *
  * Mode blocks also get:
  * - `color-scheme`, so native controls and scrollbars follow the mode;
- * - `color: var(--colors-text-default)`, because `color` inherits as a computed
+ * - `color: var(--color-text-default)`, because `color` inherits as a computed
  *   value — without it, text under a nested `[data-color-mode]` keeps the
  *   parent mode's color (ColorMode sets it on its wrapper for the same reason);
- * - a default `--colors-background-current`, which ColorMode sets at runtime
+ * - a default `--color-background-current`, which ColorMode sets at runtime
  *   and a CSS-only subtree needs from somewhere.
  */
 StyleDictionary.registerFormat({
@@ -73,8 +73,8 @@ StyleDictionary.registerFormat({
     const modeLines = mode
       ? [
           `  color-scheme: ${mode};`,
-          '  color: var(--colors-text-default);',
-          '  --colors-background-current: var(--colors-surface-default);',
+          '  color: var(--color-text-default);',
+          '  --color-background-current: var(--color-surface-default);',
         ]
       : [];
     return `${header}${options.selector} {\n${[
@@ -98,7 +98,7 @@ const cssFor = async (
     platforms: {
       css: {
         transforms: ['name/kebab', 'color/oklch'],
-        prefix: 'colors',
+        prefix: 'color',
         files: [
           {
             destination: 'unused.css',
@@ -133,7 +133,7 @@ const roleOverrideCss = (
   const lines = [
     ...Object.entries(brand.roles[mode])
       .filter(([token, v]) => v.key !== base.roles[mode][token].key)
-      .map(([token, v]) => `  --colors-${token}: var(--colors-${v.key});`),
+      .map(([token, v]) => `  --color-${token}: var(--color-${v.key});`),
     ...Object.entries(brand.gradients[mode])
       .map(([token, g]) => [token, gradientCssVars(g)] as const)
       .filter(
diff --git a/packages/gamut-styles/scripts/validate-tokens.ts b/packages/gamut-styles/scripts/validate-tokens.ts
index 598aab80de..83dcf8cd33 100644
--- a/packages/gamut-styles/scripts/validate-tokens.ts
+++ b/packages/gamut-styles/scripts/validate-tokens.ts
@@ -85,7 +85,7 @@ const parseCss = (css: string, source: ColorSystem): ColorSystem => {
       slot,
       Object.fromEntries(
         GRADES.map((grade) => {
-          const p = oklch(root[`--colors-palette-${slot}-${grade}`]);
+          const p = oklch(root[`--color-palette-${slot}-${grade}`]);
           return [grade, { grade, l: p.l, c: p.c, h: p.h, hex: '' }];
         })
       ),
@@ -110,13 +110,13 @@ const parseCss = (css: string, source: ColorSystem): ColorSystem => {
         Object.fromEntries(
           ROLES.map((r) => {
             const ref =
-              block[`--colors-${r.token}`].match(/^var\((--[\w-]+)\)$/);
+              block[`--color-${r.token}`].match(/^var\((--[\w-]+)\)$/);
             if (!ref) throw new Error(`${r.token} (${mode}) is not a var()`);
             const p = oklch(root[ref[1]]);
             const value: ResolvedValue = {
               ...p,
               hex: '',
-              key: ref[1].replace(/^--colors-/, ''),
+              key: ref[1].replace(/^--color-/, ''),
             };
             return [r.token, value];
           })
diff --git a/packages/gamut-styles/src/ColorMode.tsx b/packages/gamut-styles/src/ColorMode.tsx
index b77dfce3a4..2f7b04a317 100644
--- a/packages/gamut-styles/src/ColorMode.tsx
+++ b/packages/gamut-styles/src/ColorMode.tsx
@@ -69,7 +69,7 @@ export const modeColorProps = ({
   const { colors } = theme;
   return serializeTokens(
     mapValues(theme?.modes[mode], (color) => colors[color]),
-    'colors',
+    'color',
     theme
   ).variables;
 };
@@ -204,7 +204,7 @@ export const ColorMode = forwardRef<
         variables:
           bg === undefined
             ? {}
-            : { '--colors-background-current': colors[bg] as string },
+            : { '--color-background-current': colors[bg] as string },
       };
     }
     return serializeTokens(
@@ -214,7 +214,7 @@ export const ColorMode = forwardRef<
         }
         return colors[color];
       }),
-      'colors',
+      'color',
       theme
     );
   }, [colors, mode, modes, theme, bg, fromTokensCss]);
@@ -222,7 +222,7 @@ export const ColorMode = forwardRef<
   if (active === mode) {
     const vars = alwaysSetVariables
       ? variables
-      : pick(variables, ['--colors-background-current']);
+      : pick(variables, ['--color-background-current']);
 
     return (
       <BackgroundCurrentContext.Provider
diff --git a/packages/gamut-styles/src/__tests__/Background.test.tsx b/packages/gamut-styles/src/__tests__/Background.test.tsx
index 2a2876ee35..93e6bf9a74 100644
--- a/packages/gamut-styles/src/__tests__/Background.test.tsx
+++ b/packages/gamut-styles/src/__tests__/Background.test.tsx
@@ -39,7 +39,7 @@ describe('Background', () => {
   it('switches the default colormode when contrast standards are not met', () => {
     const { view } = renderView({ bg: 'palette-neutral-dark-1000' });
     expect(view.getByTestId('content').parentElement).toHaveStyleRule(
-      '--colors-background-current',
+      '--color-background-current',
       theme.colors['palette-neutral-dark-1000']
     );
 
@@ -61,12 +61,12 @@ describe('Background', () => {
       ),
     });
     expect(view.getByTestId('content').parentElement).toHaveStyleRule(
-      '--colors-background-current',
+      '--color-background-current',
       theme.colors['palette-neutral-dark-1000']
     );
 
     expect(view.getByTestId('nested-content').parentElement).toHaveStyleRule(
-      '--colors-background-current',
+      '--color-background-current',
       theme.colors['palette-neutral-light-200']
     );
   });
@@ -92,7 +92,7 @@ describe('Background', () => {
   it('it sets the current background color to the specified bg', () => {
     const { view } = renderView({ bg: 'palette-primary-200' });
     expect(view.getByTestId('content').parentElement).toHaveStyleRule(
-      '--colors-background-current',
+      '--color-background-current',
       theme.colors['palette-primary-200']
     );
   });
@@ -100,7 +100,7 @@ describe('Background', () => {
   it('it sets the current background color to the specified bg when switch modes', () => {
     const { view } = renderView({ bg: 'palette-neutral-dark-1000' });
     expect(view.getByTestId('content').parentElement).toHaveStyleRule(
-      '--colors-background-current',
+      '--color-background-current',
       theme.colors['palette-neutral-dark-1000']
     );
   });
diff --git a/packages/gamut-styles/src/__tests__/GamutProvider.test.tsx b/packages/gamut-styles/src/__tests__/GamutProvider.test.tsx
index ba447f13d6..fbd448b1f7 100644
--- a/packages/gamut-styles/src/__tests__/GamutProvider.test.tsx
+++ b/packages/gamut-styles/src/__tests__/GamutProvider.test.tsx
@@ -151,25 +151,25 @@ describe(GamutProvider, () => {
     it('injects tokens.css for a theme on the generated color system', () => {
       renderView({ theme: skillsoftTheme });
 
-      expect(emotionCss()).toContain('--colors-palette-primary-800:');
+      expect(emotionCss()).toContain('--color-palette-primary-800:');
     });
 
     it('does not inject tokens when configured not to', () => {
       renderView({ theme: skillsoftTheme, useTokens: false });
 
-      expect(emotionCss()).not.toContain('--colors-palette-primary-800:');
+      expect(emotionCss()).not.toContain('--color-palette-primary-800:');
     });
 
     it('does not inject tokens without globals', () => {
       renderView({ theme: skillsoftTheme, useGlobals: false });
 
-      expect(emotionCss()).not.toContain('--colors-palette-primary-800:');
+      expect(emotionCss()).not.toContain('--color-palette-primary-800:');
     });
 
     it('does not inject tokens for themes that do not carry them', () => {
       renderView();
 
-      expect(emotionCss()).not.toContain('--colors-palette-primary-800:');
+      expect(emotionCss()).not.toContain('--color-palette-primary-800:');
     });
   });
 });
diff --git a/packages/gamut-styles/src/__tests__/stylingContract.test.tsx b/packages/gamut-styles/src/__tests__/stylingContract.test.tsx
index 061a5f0169..2483c31909 100644
--- a/packages/gamut-styles/src/__tests__/stylingContract.test.tsx
+++ b/packages/gamut-styles/src/__tests__/stylingContract.test.tsx
@@ -80,7 +80,7 @@ const tokensCssVars = (mode: Mode, brand: string): Vars => {
 };
 
 const hasStaticValues = (theme: Theme) =>
-  !Object.keys(theme._variables.root).some((k) => k.startsWith('--colors-'));
+  !Object.keys(theme._variables.root).some((k) => k.startsWith('--color-'));
 
 /* The variables in scope inside a `mode` subtree of `theme`. */
 const varsFor = (theme: Theme, mode: Mode): Vars =>
@@ -208,7 +208,7 @@ describe.each(CASES)('%s, %s', (_, mode, theme) => {
     const vars = { ...varsFor(t, other), ...out };
     const missing = namesOf(t).filter(
       (name) =>
-        !isColor(out[`--colors-${name}`] ?? vars[`--colors-${name}`], vars)
+        !isColor(out[`--color-${name}`] ?? vars[`--color-${name}`], vars)
     );
     expect(missing).toEqual([]);
   });
@@ -272,7 +272,7 @@ describe.each(CASES)('%s, %s', (_, mode, theme) => {
       const expected = t.colors[t.modes[mode][bg as never]];
       let ok = true;
       try {
-        expect(el).toHaveStyleRule('--colors-background-current', expected);
+        expect(el).toHaveStyleRule('--color-background-current', expected);
         expect(el).toHaveStyleRule('background-color', resolvesToColor(vars));
       } catch {
         ok = false;
@@ -296,17 +296,17 @@ describe.each(CASES)('%s, %s', (_, mode, theme) => {
     if (t.contentModes) {
       expect(el.getAttribute('data-color-mode')).toBe(other);
       expect(el.getAttribute('data-brand')).toBe(t.brand);
-      expect(el).not.toHaveStyleRule(`--colors-${someName}`, expect.anything());
+      expect(el).not.toHaveStyleRule(`--color-${someName}`, expect.anything());
     } else {
       expect(el.getAttribute('data-color-mode')).toBeNull();
-      expect(el).toHaveStyleRule(`--colors-${someName}`, expect.anything());
+      expect(el).toHaveStyleRule(`--color-${someName}`, expect.anything());
     }
   });
 });
 
 it('resolves each brand’s roles against its own palette', () => {
   const primary = (theme: Theme) =>
-    resolveVars('var(--colors-action-primary)', varsFor(theme, 'light'));
+    resolveVars('var(--color-action-primary)', varsFor(theme, 'light'));
   /* Same lightness and grade, hyper's hue (274.1°) in place of Sapphire's. */
   expect(primary(THEMES.originalCodecademy)).toBe(
     'oklch(0.4115 0.2344 274.10)'
diff --git a/packages/gamut-styles/src/colorSystem/README.md b/packages/gamut-styles/src/colorSystem/README.md
index a6f53bbd5e..d0e835a06a 100644
--- a/packages/gamut-styles/src/colorSystem/README.md
+++ b/packages/gamut-styles/src/colorSystem/README.md
@@ -22,12 +22,12 @@ brands/skillsoft.ts         one hue per slot (or just `primary`)
 
 Output is checked in at `src/tokens/generated/` and ships as:
 
-| Import                                                            | What                                                                                                                                            |
-| ----------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
-| `@skillsoft/gamut-styles/tokens`                                  | TS constants: `palette`, `roles`, `gradients`, `contentModes` (OKLCH + sRGB per token)                                                          |
-| `@skillsoft/gamut-styles/tokens.css`                              | `--colors-*` / `--gradient-*` custom properties. Palette on `:root`; roles on `:root, [data-color-mode="light"]` and `[data-color-mode="dark"]` |
-| `@skillsoft/gamut-styles/tokens/{palette,light,dark}.tokens.json` | DTCG 2025.10. Colors are `{ colorSpace: "oklch", components, alpha, hex }`                                                                      |
-| `skillsoftTheme` (main entry)                                     | Emotion theme on the new roles; the default theme and what gamut is typed against                                                               |
+| Import                                                            | What                                                                                                                                           |
+| ----------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| `@skillsoft/gamut-styles/tokens`                                  | TS constants: `palette`, `roles`, `gradients`, `contentModes` (OKLCH + sRGB per token)                                                         |
+| `@skillsoft/gamut-styles/tokens.css`                              | `--color-*` / `--gradient-*` custom properties. Palette on `:root`; roles on `:root, [data-color-mode="light"]` and `[data-color-mode="dark"]` |
+| `@skillsoft/gamut-styles/tokens/{palette,light,dark}.tokens.json` | DTCG 2025.10. Colors are `{ colorSpace: "oklch", components, alpha, hex }`                                                                     |
+| `skillsoftTheme` (main entry)                                     | Emotion theme on the new roles; the default theme and what gamut is typed against                                                              |
 
 ## The CSS contract (branch `cass-color-css-contract`)
 
@@ -39,10 +39,10 @@ without React or Emotion; an app that loads it itself can pass
 
 - A mode switch is an attribute: `data-color-mode="light" | "dark"` on any
   element, nested as deep as you like. Mode blocks also set `color-scheme`,
-  `color: var(--colors-text-default)` and a default
-  `--colors-background-current`.
+  `color: var(--color-text-default)` and a default
+  `--color-background-current`.
 - A surface without Emotion: resolve the role to its palette color in the
-  outer mode (`roles[mode][role].ref`), paint `var(--colors-<palette>)`, and
+  outer mode (`roles[mode][role].ref`), paint `var(--color-<palette>)`, and
   set `data-color-mode` to `contentModes[palette]`. The palette color is the
   same in every mode, so the flip can't change the background under it.
 - `Background` reads `theme.contentModes` when the theme has it, and only
@@ -60,15 +60,15 @@ npx nx test gamut-styles                                # guarantees, sandbox pa
 
 ## Naming
 
-- Primitives: `--colors-palette-<slot>-<grade>`, e.g. `--colors-palette-primary-800`.
+- Primitives: `--color-palette-<slot>-<grade>`, e.g. `--color-palette-primary-800`.
   Slots: `neutral-light`, `neutral-dark`, `primary`, `accent`, `accent-alt`,
   `danger`, `warning`, `success`. Not for components; use roles.
-- Translucent primitives: `--colors-palette-primary-600-a6` (6% alpha), `--colors-black-a60`.
-- Roles: `--colors-<role>`, e.g. `--colors-action-primary`.
+- Translucent primitives: `--color-palette-primary-600-a6` (6% alpha), `--color-black-a60`.
+- Roles: `--color-<role>`, e.g. `--color-action-primary`.
 - `white` / `black` keep their bare names (boundary tokens).
 
-The `--colors-` prefix on primitives is there because variance's `addColors`
-always emits `--colors-<key>`; keeping one name for both the Emotion and CSS
+The `--color-` prefix on primitives is there because variance's `addColors`
+always emits `--color-<key>`; keeping one name for both the Emotion and CSS
 routes beat the shorter `--palette-*`.
 
 ## Known gaps
diff --git a/packages/gamut-styles/src/colorSystem/__tests__/system.test.ts b/packages/gamut-styles/src/colorSystem/__tests__/system.test.ts
index 28b6985b10..799374c115 100644
--- a/packages/gamut-styles/src/colorSystem/__tests__/system.test.ts
+++ b/packages/gamut-styles/src/colorSystem/__tests__/system.test.ts
@@ -94,7 +94,7 @@ describe('color system', () => {
     expect(ocd.roles.dark['shadow-ambient'].key).toBe('black-a0');
     /* A bare ref keeps the role's alpha; only shadow-ambient changes. */
     expect(ocd.roles.light['shadow-key'].alpha).toBe(0.16);
-    expect(tokensCss).toContain('--colors-palette-neutral-dark-1100-a0:');
+    expect(tokensCss).toContain('--color-palette-neutral-dark-1100-a0:');
     expect(system.roles.light['shadow-ambient'].alpha).toBe(0.12);
   });
 
@@ -119,7 +119,7 @@ describe('color system', () => {
       .split('[data-brand="originalCodecademy"][data-color-mode="light"] {')[1]
       .split('}')[0];
     expect(ocdLight).toContain(
-      '--gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-300)'
+      '--gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-300)'
     );
   });
 
diff --git a/packages/gamut-styles/src/colorSystem/emit.ts b/packages/gamut-styles/src/colorSystem/emit.ts
index 450e7ae5ca..cff4413b49 100644
--- a/packages/gamut-styles/src/colorSystem/emit.ts
+++ b/packages/gamut-styles/src/colorSystem/emit.ts
@@ -115,7 +115,7 @@ export const gradientCssVars = (gradient: Gradient) =>
     .map(({ ref, radius, at }) => {
       const stops = FALLOFF.map(
         ([pos, alpha]) =>
-          `color-mix(in oklab, var(--colors-${paletteKey(ref)}) ${Number(
+          `color-mix(in oklab, var(--color-${paletteKey(ref)}) ${Number(
             (alpha * 100).toFixed(2)
           )}%, transparent) ${pos}%`
       ).join(', ');
diff --git a/packages/gamut-styles/src/static/README.md b/packages/gamut-styles/src/static/README.md
index 62ef3c0a5c..144b164e9d 100644
--- a/packages/gamut-styles/src/static/README.md
+++ b/packages/gamut-styles/src/static/README.md
@@ -52,7 +52,7 @@ names at render.
 
 ## Rules for a recipe that compiles
 
-- **Colors are roles.** They compile to `var(--colors-<role>)`, the same for
+- **Colors are roles.** They compile to `var(--color-<role>)`, the same for
   every brand and mode.
 - **No per-brand values.** Fonts, font weights and elevation are still literal
   values per theme, so `fontFamily: 'accent'` fails `checkRecipe`. Those move
diff --git a/packages/gamut-styles/src/static/__tests__/recipe.test.tsx b/packages/gamut-styles/src/static/__tests__/recipe.test.tsx
index e2eb18fcd9..3725cd535a 100644
--- a/packages/gamut-styles/src/static/__tests__/recipe.test.tsx
+++ b/packages/gamut-styles/src/static/__tests__/recipe.test.tsx
@@ -62,7 +62,7 @@ describe('defineRecipe', () => {
     const el = container.firstChild;
     expect(el).toHaveStyleRule(
       'background-color',
-      'var(--colors-action-danger)'
+      'var(--color-action-danger)'
     );
     expect(el).toHaveStyleRule('height', '1.5rem');
     expect(el).toHaveStyleRule('text-decoration', 'underline');
@@ -75,7 +75,7 @@ describe('compileRecipe', () => {
   it('writes every rule into @layer recipes', () => {
     expect(output.startsWith('@layer recipes{')).toBe(true);
     expect(output).toContain(
-      '.gamut-chip{display:inline-flex;border-radius:4px;background-color:var(--colors-surface-default);}'
+      '.gamut-chip{display:inline-flex;border-radius:4px;background-color:var(--color-surface-default);}'
     );
     expect(output).not.toContain('label');
   });
@@ -97,7 +97,7 @@ describe('compileRecipe', () => {
 
   it('points colors at the role variables, not values', () => {
     expect(output).toContain(
-      '.gamut-chip--intent_danger{color:var(--colors-text-inverse);background-color:var(--colors-action-danger);}'
+      '.gamut-chip--intent_danger{color:var(--color-text-inverse);background-color:var(--color-action-danger);}'
     );
   });
 
diff --git a/packages/gamut-styles/src/themes/__tests__/__snapshots__/theme.test.ts.snap b/packages/gamut-styles/src/themes/__tests__/__snapshots__/theme.test.ts.snap
index 6c8e3d1251..c5d087b884 100644
--- a/packages/gamut-styles/src/themes/__tests__/__snapshots__/theme.test.ts.snap
+++ b/packages/gamut-styles/src/themes/__tests__/__snapshots__/theme.test.ts.snap
@@ -154,108 +154,108 @@ exports[`themes admin - theme shape 1`] = `
   },
   "_variables": {
     "mode": {
-      "--colors-background": "var(--colors-white)",
-      "--colors-background-contrast": "var(--colors-white)",
-      "--colors-background-current": "var(--colors-white)",
-      "--colors-background-disabled": "var(--colors-navy-200)",
-      "--colors-background-error": "var(--colors-red-0)",
-      "--colors-background-hover": "var(--colors-navy-200)",
-      "--colors-background-primary": "var(--colors-beige)",
-      "--colors-background-selected": "var(--colors-navy-100)",
-      "--colors-background-success": "var(--colors-green-0)",
-      "--colors-background-warning": "var(--colors-yellow-0)",
-      "--colors-border-disabled": "var(--colors-navy-500)",
-      "--colors-border-primary": "var(--colors-navy-800)",
-      "--colors-border-secondary": "var(--colors-navy-600)",
-      "--colors-border-tertiary": "var(--colors-navy-300)",
-      "--colors-danger": "var(--colors-red-500)",
-      "--colors-danger-hover": "var(--colors-red-600)",
-      "--colors-feedback-error": "var(--colors-red-600)",
-      "--colors-feedback-success": "var(--colors-green-700)",
-      "--colors-feedback-warning": "var(--colors-yellow)",
-      "--colors-interface": "var(--colors-hyper-500)",
-      "--colors-interface-hover": "var(--colors-hyper-400)",
-      "--colors-primary": "var(--colors-blue-500)",
-      "--colors-primary-hover": "var(--colors-blue-400)",
-      "--colors-primary-inverse": "var(--colors-yellow-500)",
-      "--colors-secondary": "var(--colors-navy-800)",
-      "--colors-secondary-hover": "var(--colors-navy-700)",
-      "--colors-shadow-primary": "var(--colors-navy-800)",
-      "--colors-shadow-secondary": "var(--colors-navy-600)",
-      "--colors-text": "var(--colors-navy-800)",
-      "--colors-text-accent": "var(--colors-navy-900)",
-      "--colors-text-disabled": "var(--colors-navy-500)",
-      "--colors-text-secondary": "var(--colors-navy-600)",
+      "--color-background": "var(--color-white)",
+      "--color-background-contrast": "var(--color-white)",
+      "--color-background-current": "var(--color-white)",
+      "--color-background-disabled": "var(--color-navy-200)",
+      "--color-background-error": "var(--color-red-0)",
+      "--color-background-hover": "var(--color-navy-200)",
+      "--color-background-primary": "var(--color-beige)",
+      "--color-background-selected": "var(--color-navy-100)",
+      "--color-background-success": "var(--color-green-0)",
+      "--color-background-warning": "var(--color-yellow-0)",
+      "--color-border-disabled": "var(--color-navy-500)",
+      "--color-border-primary": "var(--color-navy-800)",
+      "--color-border-secondary": "var(--color-navy-600)",
+      "--color-border-tertiary": "var(--color-navy-300)",
+      "--color-danger": "var(--color-red-500)",
+      "--color-danger-hover": "var(--color-red-600)",
+      "--color-feedback-error": "var(--color-red-600)",
+      "--color-feedback-success": "var(--color-green-700)",
+      "--color-feedback-warning": "var(--color-yellow)",
+      "--color-interface": "var(--color-hyper-500)",
+      "--color-interface-hover": "var(--color-hyper-400)",
+      "--color-primary": "var(--color-blue-500)",
+      "--color-primary-hover": "var(--color-blue-400)",
+      "--color-primary-inverse": "var(--color-yellow-500)",
+      "--color-secondary": "var(--color-navy-800)",
+      "--color-secondary-hover": "var(--color-navy-700)",
+      "--color-shadow-primary": "var(--color-navy-800)",
+      "--color-shadow-secondary": "var(--color-navy-600)",
+      "--color-text": "var(--color-navy-800)",
+      "--color-text-accent": "var(--color-navy-900)",
+      "--color-text-disabled": "var(--color-navy-500)",
+      "--color-text-secondary": "var(--color-navy-600)",
     },
     "root": {
-      "--colors-beige": "#FFF0E5",
-      "--colors-beige-100": "#FFF0E5",
-      "--colors-black": "#000000",
-      "--colors-blue": "#1557FF",
-      "--colors-blue-0": "#F5FCFF",
-      "--colors-blue-100": "#D3F2FF",
-      "--colors-blue-300": "#66C4FF",
-      "--colors-blue-400": "#3388FF",
-      "--colors-blue-500": "#1557FF",
-      "--colors-blue-800": "#1D2340",
-      "--colors-gray-100": "#F5F5F5",
-      "--colors-gray-200": "#EEEEEE",
-      "--colors-gray-300": "#E0E0E0",
-      "--colors-gray-600": "#9E9E9E",
-      "--colors-gray-800": "#616161",
-      "--colors-gray-900": "#424242",
-      "--colors-green": "#008A27",
-      "--colors-green-0": "#F5FFE3",
-      "--colors-green-100": "#EAFDC6",
-      "--colors-green-400": "#AEE938",
-      "--colors-green-700": "#008A27",
-      "--colors-green-900": "#151C07",
-      "--colors-hyper": "#3A10E5",
-      "--colors-hyper-400": "#5533FF",
-      "--colors-hyper-500": "#3A10E5",
-      "--colors-lightBlue": "#66C4FF",
-      "--colors-lightGreen": "#AEE938",
-      "--colors-navy": "#10162F",
-      "--colors-navy-100": "rgba(16,22,47,0.04)",
-      "--colors-navy-200": "rgba(16,22,47,0.12)",
-      "--colors-navy-300": "rgba(16,22,47,0.28)",
-      "--colors-navy-400": "rgba(16,22,47,0.47)",
-      "--colors-navy-500": "rgba(16,22,47,0.63)",
-      "--colors-navy-600": "rgba(16,22,47,0.75)",
-      "--colors-navy-700": "rgba(16,22,47,0.86)",
-      "--colors-navy-800": "#10162F",
-      "--colors-navy-900": "#0A0D1C",
-      "--colors-orange": "#FF8C00",
-      "--colors-orange-100": "#FFE8CC",
-      "--colors-orange-500": "#FF8C00",
-      "--colors-paleBlue": "#F5FCFF",
-      "--colors-paleGreen": "#F5FFE3",
-      "--colors-palePink": "#FFF5FF",
-      "--colors-paleRed": "#DC5879",
-      "--colors-paleYellow": "#FFFAE5",
-      "--colors-pink": "#F966FF",
-      "--colors-pink-0": "#FFF5FF",
-      "--colors-pink-400": "#F966FF",
-      "--colors-red": "#E91C11",
-      "--colors-red-0": "#FBF1F0",
-      "--colors-red-300": "#E85D7F",
-      "--colors-red-400": "#DC5879",
-      "--colors-red-500": "#E91C11",
-      "--colors-red-600": "#BE1809",
-      "--colors-red-900": "#280503",
-      "--colors-white": "#ffffff",
-      "--colors-white-100": "rgba(255,255,255,0.04)",
-      "--colors-white-200": "rgba(255,255,255,0.09)",
-      "--colors-white-300": "rgba(255,255,255,0.2)",
-      "--colors-white-400": "rgba(255,255,255,0.35)",
-      "--colors-white-500": "rgba(255,255,255,0.5)",
-      "--colors-white-600": "rgba(255,255,255,0.65)",
-      "--colors-white-700": "rgba(255,255,255,0.8)",
-      "--colors-yellow": "#FFD300",
-      "--colors-yellow-0": "#FFFAE5",
-      "--colors-yellow-400": "#CCA900",
-      "--colors-yellow-500": "#FFD300",
-      "--colors-yellow-900": "#211B00",
+      "--color-beige": "#FFF0E5",
+      "--color-beige-100": "#FFF0E5",
+      "--color-black": "#000000",
+      "--color-blue": "#1557FF",
+      "--color-blue-0": "#F5FCFF",
+      "--color-blue-100": "#D3F2FF",
+      "--color-blue-300": "#66C4FF",
+      "--color-blue-400": "#3388FF",
+      "--color-blue-500": "#1557FF",
+      "--color-blue-800": "#1D2340",
+      "--color-gray-100": "#F5F5F5",
+      "--color-gray-200": "#EEEEEE",
+      "--color-gray-300": "#E0E0E0",
+      "--color-gray-600": "#9E9E9E",
+      "--color-gray-800": "#616161",
+      "--color-gray-900": "#424242",
+      "--color-green": "#008A27",
+      "--color-green-0": "#F5FFE3",
+      "--color-green-100": "#EAFDC6",
+      "--color-green-400": "#AEE938",
+      "--color-green-700": "#008A27",
+      "--color-green-900": "#151C07",
+      "--color-hyper": "#3A10E5",
+      "--color-hyper-400": "#5533FF",
+      "--color-hyper-500": "#3A10E5",
+      "--color-lightBlue": "#66C4FF",
+      "--color-lightGreen": "#AEE938",
+      "--color-navy": "#10162F",
+      "--color-navy-100": "rgba(16,22,47,0.04)",
+      "--color-navy-200": "rgba(16,22,47,0.12)",
+      "--color-navy-300": "rgba(16,22,47,0.28)",
+      "--color-navy-400": "rgba(16,22,47,0.47)",
+      "--color-navy-500": "rgba(16,22,47,0.63)",
+      "--color-navy-600": "rgba(16,22,47,0.75)",
+      "--color-navy-700": "rgba(16,22,47,0.86)",
+      "--color-navy-800": "#10162F",
+      "--color-navy-900": "#0A0D1C",
+      "--color-orange": "#FF8C00",
+      "--color-orange-100": "#FFE8CC",
+      "--color-orange-500": "#FF8C00",
+      "--color-paleBlue": "#F5FCFF",
+      "--color-paleGreen": "#F5FFE3",
+      "--color-palePink": "#FFF5FF",
+      "--color-paleRed": "#DC5879",
+      "--color-paleYellow": "#FFFAE5",
+      "--color-pink": "#F966FF",
+      "--color-pink-0": "#FFF5FF",
+      "--color-pink-400": "#F966FF",
+      "--color-red": "#E91C11",
+      "--color-red-0": "#FBF1F0",
+      "--color-red-300": "#E85D7F",
+      "--color-red-400": "#DC5879",
+      "--color-red-500": "#E91C11",
+      "--color-red-600": "#BE1809",
+      "--color-red-900": "#280503",
+      "--color-white": "#ffffff",
+      "--color-white-100": "rgba(255,255,255,0.04)",
+      "--color-white-200": "rgba(255,255,255,0.09)",
+      "--color-white-300": "rgba(255,255,255,0.2)",
+      "--color-white-400": "rgba(255,255,255,0.35)",
+      "--color-white-500": "rgba(255,255,255,0.5)",
+      "--color-white-600": "rgba(255,255,255,0.65)",
+      "--color-white-700": "rgba(255,255,255,0.8)",
+      "--color-yellow": "#FFD300",
+      "--color-yellow-0": "#FFFAE5",
+      "--color-yellow-400": "#CCA900",
+      "--color-yellow-500": "#FFD300",
+      "--color-yellow-900": "#211B00",
       "--elements-headerHeight": "4rem",
       "--elements-headerZ": 15,
       "@media only screen and (min-width: 1024px)": {
@@ -272,8 +272,8 @@ exports[`themes admin - theme shape 1`] = `
     "xl": "16px",
   },
   "borders": {
-    "1": "1px solid var(--colors-border-primary)",
-    "2": "2px solid var(--colors-border-primary)",
+    "1": "1px solid var(--color-border-primary)",
+    "2": "2px solid var(--color-border-primary)",
   },
   "breakpoints": {
     "c_base": "@container (min-width: 1px)",
@@ -289,117 +289,117 @@ exports[`themes admin - theme shape 1`] = `
     "xs": "@media only screen and (min-width: 480px)",
   },
   "colors": {
-    "background": "var(--colors-background)",
-    "background-contrast": "var(--colors-background-contrast)",
-    "background-current": "var(--colors-background-current)",
-    "background-disabled": "var(--colors-background-disabled)",
-    "background-error": "var(--colors-background-error)",
-    "background-hover": "var(--colors-background-hover)",
-    "background-primary": "var(--colors-background-primary)",
-    "background-selected": "var(--colors-background-selected)",
-    "background-success": "var(--colors-background-success)",
-    "background-warning": "var(--colors-background-warning)",
-    "beige": "var(--colors-beige)",
-    "beige-100": "var(--colors-beige-100)",
-    "black": "var(--colors-black)",
-    "blue": "var(--colors-blue)",
-    "blue-0": "var(--colors-blue-0)",
-    "blue-100": "var(--colors-blue-100)",
-    "blue-300": "var(--colors-blue-300)",
-    "blue-400": "var(--colors-blue-400)",
-    "blue-500": "var(--colors-blue-500)",
-    "blue-800": "var(--colors-blue-800)",
-    "border-disabled": "var(--colors-border-disabled)",
-    "border-primary": "var(--colors-border-primary)",
-    "border-secondary": "var(--colors-border-secondary)",
-    "border-tertiary": "var(--colors-border-tertiary)",
-    "danger": "var(--colors-danger)",
-    "danger-hover": "var(--colors-danger-hover)",
-    "feedback-error": "var(--colors-feedback-error)",
-    "feedback-success": "var(--colors-feedback-success)",
-    "feedback-warning": "var(--colors-feedback-warning)",
-    "gray-100": "var(--colors-gray-100)",
-    "gray-200": "var(--colors-gray-200)",
-    "gray-300": "var(--colors-gray-300)",
-    "gray-600": "var(--colors-gray-600)",
-    "gray-800": "var(--colors-gray-800)",
-    "gray-900": "var(--colors-gray-900)",
-    "green": "var(--colors-green)",
-    "green-0": "var(--colors-green-0)",
-    "green-100": "var(--colors-green-100)",
-    "green-400": "var(--colors-green-400)",
-    "green-700": "var(--colors-green-700)",
-    "green-900": "var(--colors-green-900)",
-    "hyper": "var(--colors-hyper)",
-    "hyper-400": "var(--colors-hyper-400)",
-    "hyper-500": "var(--colors-hyper-500)",
-    "interface": "var(--colors-interface)",
-    "interface-hover": "var(--colors-interface-hover)",
-    "lightBlue": "var(--colors-lightBlue)",
-    "lightGreen": "var(--colors-lightGreen)",
-    "navy": "var(--colors-navy)",
-    "navy-100": "var(--colors-navy-100)",
-    "navy-200": "var(--colors-navy-200)",
-    "navy-300": "var(--colors-navy-300)",
-    "navy-400": "var(--colors-navy-400)",
-    "navy-500": "var(--colors-navy-500)",
-    "navy-600": "var(--colors-navy-600)",
-    "navy-700": "var(--colors-navy-700)",
-    "navy-800": "var(--colors-navy-800)",
-    "navy-900": "var(--colors-navy-900)",
-    "orange": "var(--colors-orange)",
-    "orange-100": "var(--colors-orange-100)",
-    "orange-500": "var(--colors-orange-500)",
-    "paleBlue": "var(--colors-paleBlue)",
-    "paleGreen": "var(--colors-paleGreen)",
-    "palePink": "var(--colors-palePink)",
-    "paleRed": "var(--colors-paleRed)",
-    "paleYellow": "var(--colors-paleYellow)",
-    "pink": "var(--colors-pink)",
-    "pink-0": "var(--colors-pink-0)",
-    "pink-400": "var(--colors-pink-400)",
-    "primary": "var(--colors-primary)",
-    "primary-hover": "var(--colors-primary-hover)",
-    "primary-inverse": "var(--colors-primary-inverse)",
-    "red": "var(--colors-red)",
-    "red-0": "var(--colors-red-0)",
-    "red-300": "var(--colors-red-300)",
-    "red-400": "var(--colors-red-400)",
-    "red-500": "var(--colors-red-500)",
-    "red-600": "var(--colors-red-600)",
-    "red-900": "var(--colors-red-900)",
-    "secondary": "var(--colors-secondary)",
-    "secondary-hover": "var(--colors-secondary-hover)",
-    "shadow-primary": "var(--colors-shadow-primary)",
-    "shadow-secondary": "var(--colors-shadow-secondary)",
-    "text": "var(--colors-text)",
-    "text-accent": "var(--colors-text-accent)",
-    "text-disabled": "var(--colors-text-disabled)",
-    "text-secondary": "var(--colors-text-secondary)",
-    "white": "var(--colors-white)",
-    "white-100": "var(--colors-white-100)",
-    "white-200": "var(--colors-white-200)",
-    "white-300": "var(--colors-white-300)",
-    "white-400": "var(--colors-white-400)",
-    "white-500": "var(--colors-white-500)",
-    "white-600": "var(--colors-white-600)",
-    "white-700": "var(--colors-white-700)",
-    "yellow": "var(--colors-yellow)",
-    "yellow-0": "var(--colors-yellow-0)",
-    "yellow-400": "var(--colors-yellow-400)",
-    "yellow-500": "var(--colors-yellow-500)",
-    "yellow-900": "var(--colors-yellow-900)",
+    "background": "var(--color-background)",
+    "background-contrast": "var(--color-background-contrast)",
+    "background-current": "var(--color-background-current)",
+    "background-disabled": "var(--color-background-disabled)",
+    "background-error": "var(--color-background-error)",
+    "background-hover": "var(--color-background-hover)",
+    "background-primary": "var(--color-background-primary)",
+    "background-selected": "var(--color-background-selected)",
+    "background-success": "var(--color-background-success)",
+    "background-warning": "var(--color-background-warning)",
+    "beige": "var(--color-beige)",
+    "beige-100": "var(--color-beige-100)",
+    "black": "var(--color-black)",
+    "blue": "var(--color-blue)",
+    "blue-0": "var(--color-blue-0)",
+    "blue-100": "var(--color-blue-100)",
+    "blue-300": "var(--color-blue-300)",
+    "blue-400": "var(--color-blue-400)",
+    "blue-500": "var(--color-blue-500)",
+    "blue-800": "var(--color-blue-800)",
+    "border-disabled": "var(--color-border-disabled)",
+    "border-primary": "var(--color-border-primary)",
+    "border-secondary": "var(--color-border-secondary)",
+    "border-tertiary": "var(--color-border-tertiary)",
+    "danger": "var(--color-danger)",
+    "danger-hover": "var(--color-danger-hover)",
+    "feedback-error": "var(--color-feedback-error)",
+    "feedback-success": "var(--color-feedback-success)",
+    "feedback-warning": "var(--color-feedback-warning)",
+    "gray-100": "var(--color-gray-100)",
+    "gray-200": "var(--color-gray-200)",
+    "gray-300": "var(--color-gray-300)",
+    "gray-600": "var(--color-gray-600)",
+    "gray-800": "var(--color-gray-800)",
+    "gray-900": "var(--color-gray-900)",
+    "green": "var(--color-green)",
+    "green-0": "var(--color-green-0)",
+    "green-100": "var(--color-green-100)",
+    "green-400": "var(--color-green-400)",
+    "green-700": "var(--color-green-700)",
+    "green-900": "var(--color-green-900)",
+    "hyper": "var(--color-hyper)",
+    "hyper-400": "var(--color-hyper-400)",
+    "hyper-500": "var(--color-hyper-500)",
+    "interface": "var(--color-interface)",
+    "interface-hover": "var(--color-interface-hover)",
+    "lightBlue": "var(--color-lightBlue)",
+    "lightGreen": "var(--color-lightGreen)",
+    "navy": "var(--color-navy)",
+    "navy-100": "var(--color-navy-100)",
+    "navy-200": "var(--color-navy-200)",
+    "navy-300": "var(--color-navy-300)",
+    "navy-400": "var(--color-navy-400)",
+    "navy-500": "var(--color-navy-500)",
+    "navy-600": "var(--color-navy-600)",
+    "navy-700": "var(--color-navy-700)",
+    "navy-800": "var(--color-navy-800)",
+    "navy-900": "var(--color-navy-900)",
+    "orange": "var(--color-orange)",
+    "orange-100": "var(--color-orange-100)",
+    "orange-500": "var(--color-orange-500)",
+    "paleBlue": "var(--color-paleBlue)",
+    "paleGreen": "var(--color-paleGreen)",
+    "palePink": "var(--color-palePink)",
+    "paleRed": "var(--color-paleRed)",
+    "paleYellow": "var(--color-paleYellow)",
+    "pink": "var(--color-pink)",
+    "pink-0": "var(--color-pink-0)",
+    "pink-400": "var(--color-pink-400)",
+    "primary": "var(--color-primary)",
+    "primary-hover": "var(--color-primary-hover)",
+    "primary-inverse": "var(--color-primary-inverse)",
+    "red": "var(--color-red)",
+    "red-0": "var(--color-red-0)",
+    "red-300": "var(--color-red-300)",
+    "red-400": "var(--color-red-400)",
+    "red-500": "var(--color-red-500)",
+    "red-600": "var(--color-red-600)",
+    "red-900": "var(--color-red-900)",
+    "secondary": "var(--color-secondary)",
+    "secondary-hover": "var(--color-secondary-hover)",
+    "shadow-primary": "var(--color-shadow-primary)",
+    "shadow-secondary": "var(--color-shadow-secondary)",
+    "text": "var(--color-text)",
+    "text-accent": "var(--color-text-accent)",
+    "text-disabled": "var(--color-text-disabled)",
+    "text-secondary": "var(--color-text-secondary)",
+    "white": "var(--color-white)",
+    "white-100": "var(--color-white-100)",
+    "white-200": "var(--color-white-200)",
+    "white-300": "var(--color-white-300)",
+    "white-400": "var(--color-white-400)",
+    "white-500": "var(--color-white-500)",
+    "white-600": "var(--color-white-600)",
+    "white-700": "var(--color-white-700)",
+    "yellow": "var(--color-yellow)",
+    "yellow-0": "var(--color-yellow-0)",
+    "yellow-400": "var(--color-yellow-400)",
+    "yellow-500": "var(--color-yellow-500)",
+    "yellow-900": "var(--color-yellow-900)",
   },
   "elements": {
     "headerHeight": "var(--elements-headerHeight)",
     "headerZ": "var(--elements-headerZ)",
   },
   "elevation": {
-    "hover-shadow": "-8px 8px 0 0 var(--colors-shadow-primary)",
+    "hover-shadow": "-8px 8px 0 0 var(--color-shadow-primary)",
     "hover-transform": "translate(4px, -4px)",
-    "hoverMirrored-shadow": "8px 8px 0 0 var(--colors-shadow-primary)",
+    "hoverMirrored-shadow": "8px 8px 0 0 var(--color-shadow-primary)",
     "hoverMirrored-transform": "translate(-4px, -4px)",
-    "rest-shadow": "0 0 0 0 var(--colors-shadow-primary)",
+    "rest-shadow": "0 0 0 0 var(--color-shadow-primary)",
     "rest-transform": "none",
   },
   "fontFamily": {
@@ -678,108 +678,108 @@ exports[`themes core - theme shape 1`] = `
   },
   "_variables": {
     "mode": {
-      "--colors-background": "var(--colors-white)",
-      "--colors-background-contrast": "var(--colors-white)",
-      "--colors-background-current": "var(--colors-white)",
-      "--colors-background-disabled": "var(--colors-navy-200)",
-      "--colors-background-error": "var(--colors-red-0)",
-      "--colors-background-hover": "var(--colors-navy-200)",
-      "--colors-background-primary": "var(--colors-beige)",
-      "--colors-background-selected": "var(--colors-navy-100)",
-      "--colors-background-success": "var(--colors-green-0)",
-      "--colors-background-warning": "var(--colors-yellow-0)",
-      "--colors-border-disabled": "var(--colors-navy-500)",
-      "--colors-border-primary": "var(--colors-navy-800)",
-      "--colors-border-secondary": "var(--colors-navy-600)",
-      "--colors-border-tertiary": "var(--colors-navy-300)",
-      "--colors-danger": "var(--colors-red-500)",
-      "--colors-danger-hover": "var(--colors-red-600)",
-      "--colors-feedback-error": "var(--colors-red-600)",
-      "--colors-feedback-success": "var(--colors-green-700)",
-      "--colors-feedback-warning": "var(--colors-yellow)",
-      "--colors-interface": "var(--colors-hyper-500)",
-      "--colors-interface-hover": "var(--colors-hyper-400)",
-      "--colors-primary": "var(--colors-hyper-500)",
-      "--colors-primary-hover": "var(--colors-hyper-400)",
-      "--colors-primary-inverse": "var(--colors-yellow-500)",
-      "--colors-secondary": "var(--colors-navy-800)",
-      "--colors-secondary-hover": "var(--colors-navy-700)",
-      "--colors-shadow-primary": "var(--colors-navy-800)",
-      "--colors-shadow-secondary": "var(--colors-navy-600)",
-      "--colors-text": "var(--colors-navy-800)",
-      "--colors-text-accent": "var(--colors-navy-900)",
-      "--colors-text-disabled": "var(--colors-navy-500)",
-      "--colors-text-secondary": "var(--colors-navy-600)",
+      "--color-background": "var(--color-white)",
+      "--color-background-contrast": "var(--color-white)",
+      "--color-background-current": "var(--color-white)",
+      "--color-background-disabled": "var(--color-navy-200)",
+      "--color-background-error": "var(--color-red-0)",
+      "--color-background-hover": "var(--color-navy-200)",
+      "--color-background-primary": "var(--color-beige)",
+      "--color-background-selected": "var(--color-navy-100)",
+      "--color-background-success": "var(--color-green-0)",
+      "--color-background-warning": "var(--color-yellow-0)",
+      "--color-border-disabled": "var(--color-navy-500)",
+      "--color-border-primary": "var(--color-navy-800)",
+      "--color-border-secondary": "var(--color-navy-600)",
+      "--color-border-tertiary": "var(--color-navy-300)",
+      "--color-danger": "var(--color-red-500)",
+      "--color-danger-hover": "var(--color-red-600)",
+      "--color-feedback-error": "var(--color-red-600)",
+      "--color-feedback-success": "var(--color-green-700)",
+      "--color-feedback-warning": "var(--color-yellow)",
+      "--color-interface": "var(--color-hyper-500)",
+      "--color-interface-hover": "var(--color-hyper-400)",
+      "--color-primary": "var(--color-hyper-500)",
+      "--color-primary-hover": "var(--color-hyper-400)",
+      "--color-primary-inverse": "var(--color-yellow-500)",
+      "--color-secondary": "var(--color-navy-800)",
+      "--color-secondary-hover": "var(--color-navy-700)",
+      "--color-shadow-primary": "var(--color-navy-800)",
+      "--color-shadow-secondary": "var(--color-navy-600)",
+      "--color-text": "var(--color-navy-800)",
+      "--color-text-accent": "var(--color-navy-900)",
+      "--color-text-disabled": "var(--color-navy-500)",
+      "--color-text-secondary": "var(--color-navy-600)",
     },
     "root": {
-      "--colors-beige": "#FFF0E5",
-      "--colors-beige-100": "#FFF0E5",
-      "--colors-black": "#000000",
-      "--colors-blue": "#1557FF",
-      "--colors-blue-0": "#F5FCFF",
-      "--colors-blue-100": "#D3F2FF",
-      "--colors-blue-300": "#66C4FF",
-      "--colors-blue-400": "#3388FF",
-      "--colors-blue-500": "#1557FF",
-      "--colors-blue-800": "#1D2340",
-      "--colors-gray-100": "#F5F5F5",
-      "--colors-gray-200": "#EEEEEE",
-      "--colors-gray-300": "#E0E0E0",
-      "--colors-gray-600": "#9E9E9E",
-      "--colors-gray-800": "#616161",
-      "--colors-gray-900": "#424242",
-      "--colors-green": "#008A27",
-      "--colors-green-0": "#F5FFE3",
-      "--colors-green-100": "#EAFDC6",
-      "--colors-green-400": "#AEE938",
-      "--colors-green-700": "#008A27",
-      "--colors-green-900": "#151C07",
-      "--colors-hyper": "#3A10E5",
-      "--colors-hyper-400": "#5533FF",
-      "--colors-hyper-500": "#3A10E5",
-      "--colors-lightBlue": "#66C4FF",
-      "--colors-lightGreen": "#AEE938",
-      "--colors-navy": "#10162F",
-      "--colors-navy-100": "rgba(16,22,47,0.04)",
-      "--colors-navy-200": "rgba(16,22,47,0.12)",
-      "--colors-navy-300": "rgba(16,22,47,0.28)",
-      "--colors-navy-400": "rgba(16,22,47,0.47)",
-      "--colors-navy-500": "rgba(16,22,47,0.63)",
-      "--colors-navy-600": "rgba(16,22,47,0.75)",
-      "--colors-navy-700": "rgba(16,22,47,0.86)",
-      "--colors-navy-800": "#10162F",
-      "--colors-navy-900": "#0A0D1C",
-      "--colors-orange": "#FF8C00",
-      "--colors-orange-100": "#FFE8CC",
-      "--colors-orange-500": "#FF8C00",
-      "--colors-paleBlue": "#F5FCFF",
-      "--colors-paleGreen": "#F5FFE3",
-      "--colors-palePink": "#FFF5FF",
-      "--colors-paleRed": "#DC5879",
-      "--colors-paleYellow": "#FFFAE5",
-      "--colors-pink": "#F966FF",
-      "--colors-pink-0": "#FFF5FF",
-      "--colors-pink-400": "#F966FF",
-      "--colors-red": "#E91C11",
-      "--colors-red-0": "#FBF1F0",
-      "--colors-red-300": "#E85D7F",
-      "--colors-red-400": "#DC5879",
-      "--colors-red-500": "#E91C11",
-      "--colors-red-600": "#BE1809",
-      "--colors-red-900": "#280503",
-      "--colors-white": "#ffffff",
-      "--colors-white-100": "rgba(255,255,255,0.04)",
-      "--colors-white-200": "rgba(255,255,255,0.09)",
-      "--colors-white-300": "rgba(255,255,255,0.2)",
-      "--colors-white-400": "rgba(255,255,255,0.35)",
-      "--colors-white-500": "rgba(255,255,255,0.5)",
-      "--colors-white-600": "rgba(255,255,255,0.65)",
-      "--colors-white-700": "rgba(255,255,255,0.8)",
-      "--colors-yellow": "#FFD300",
-      "--colors-yellow-0": "#FFFAE5",
-      "--colors-yellow-400": "#CCA900",
-      "--colors-yellow-500": "#FFD300",
-      "--colors-yellow-900": "#211B00",
+      "--color-beige": "#FFF0E5",
+      "--color-beige-100": "#FFF0E5",
+      "--color-black": "#000000",
+      "--color-blue": "#1557FF",
+      "--color-blue-0": "#F5FCFF",
+      "--color-blue-100": "#D3F2FF",
+      "--color-blue-300": "#66C4FF",
+      "--color-blue-400": "#3388FF",
+      "--color-blue-500": "#1557FF",
+      "--color-blue-800": "#1D2340",
+      "--color-gray-100": "#F5F5F5",
+      "--color-gray-200": "#EEEEEE",
+      "--color-gray-300": "#E0E0E0",
+      "--color-gray-600": "#9E9E9E",
+      "--color-gray-800": "#616161",
+      "--color-gray-900": "#424242",
+      "--color-green": "#008A27",
+      "--color-green-0": "#F5FFE3",
+      "--color-green-100": "#EAFDC6",
+      "--color-green-400": "#AEE938",
+      "--color-green-700": "#008A27",
+      "--color-green-900": "#151C07",
+      "--color-hyper": "#3A10E5",
+      "--color-hyper-400": "#5533FF",
+      "--color-hyper-500": "#3A10E5",
+      "--color-lightBlue": "#66C4FF",
+      "--color-lightGreen": "#AEE938",
+      "--color-navy": "#10162F",
+      "--color-navy-100": "rgba(16,22,47,0.04)",
+      "--color-navy-200": "rgba(16,22,47,0.12)",
+      "--color-navy-300": "rgba(16,22,47,0.28)",
+      "--color-navy-400": "rgba(16,22,47,0.47)",
+      "--color-navy-500": "rgba(16,22,47,0.63)",
+      "--color-navy-600": "rgba(16,22,47,0.75)",
+      "--color-navy-700": "rgba(16,22,47,0.86)",
+      "--color-navy-800": "#10162F",
+      "--color-navy-900": "#0A0D1C",
+      "--color-orange": "#FF8C00",
+      "--color-orange-100": "#FFE8CC",
+      "--color-orange-500": "#FF8C00",
+      "--color-paleBlue": "#F5FCFF",
+      "--color-paleGreen": "#F5FFE3",
+      "--color-palePink": "#FFF5FF",
+      "--color-paleRed": "#DC5879",
+      "--color-paleYellow": "#FFFAE5",
+      "--color-pink": "#F966FF",
+      "--color-pink-0": "#FFF5FF",
+      "--color-pink-400": "#F966FF",
+      "--color-red": "#E91C11",
+      "--color-red-0": "#FBF1F0",
+      "--color-red-300": "#E85D7F",
+      "--color-red-400": "#DC5879",
+      "--color-red-500": "#E91C11",
+      "--color-red-600": "#BE1809",
+      "--color-red-900": "#280503",
+      "--color-white": "#ffffff",
+      "--color-white-100": "rgba(255,255,255,0.04)",
+      "--color-white-200": "rgba(255,255,255,0.09)",
+      "--color-white-300": "rgba(255,255,255,0.2)",
+      "--color-white-400": "rgba(255,255,255,0.35)",
+      "--color-white-500": "rgba(255,255,255,0.5)",
+      "--color-white-600": "rgba(255,255,255,0.65)",
+      "--color-white-700": "rgba(255,255,255,0.8)",
+      "--color-yellow": "#FFD300",
+      "--color-yellow-0": "#FFFAE5",
+      "--color-yellow-400": "#CCA900",
+      "--color-yellow-500": "#FFD300",
+      "--color-yellow-900": "#211B00",
       "--elements-headerHeight": "4rem",
       "--elements-headerZ": 15,
       "@media only screen and (min-width: 1024px)": {
@@ -796,8 +796,8 @@ exports[`themes core - theme shape 1`] = `
     "xl": "16px",
   },
   "borders": {
-    "1": "1px solid var(--colors-border-primary)",
-    "2": "2px solid var(--colors-border-primary)",
+    "1": "1px solid var(--color-border-primary)",
+    "2": "2px solid var(--color-border-primary)",
   },
   "breakpoints": {
     "c_base": "@container (min-width: 1px)",
@@ -813,117 +813,117 @@ exports[`themes core - theme shape 1`] = `
     "xs": "@media only screen and (min-width: 480px)",
   },
   "colors": {
-    "background": "var(--colors-background)",
-    "background-contrast": "var(--colors-background-contrast)",
-    "background-current": "var(--colors-background-current)",
-    "background-disabled": "var(--colors-background-disabled)",
-    "background-error": "var(--colors-background-error)",
-    "background-hover": "var(--colors-background-hover)",
-    "background-primary": "var(--colors-background-primary)",
-    "background-selected": "var(--colors-background-selected)",
-    "background-success": "var(--colors-background-success)",
-    "background-warning": "var(--colors-background-warning)",
-    "beige": "var(--colors-beige)",
-    "beige-100": "var(--colors-beige-100)",
-    "black": "var(--colors-black)",
-    "blue": "var(--colors-blue)",
-    "blue-0": "var(--colors-blue-0)",
-    "blue-100": "var(--colors-blue-100)",
-    "blue-300": "var(--colors-blue-300)",
-    "blue-400": "var(--colors-blue-400)",
-    "blue-500": "var(--colors-blue-500)",
-    "blue-800": "var(--colors-blue-800)",
-    "border-disabled": "var(--colors-border-disabled)",
-    "border-primary": "var(--colors-border-primary)",
-    "border-secondary": "var(--colors-border-secondary)",
-    "border-tertiary": "var(--colors-border-tertiary)",
-    "danger": "var(--colors-danger)",
-    "danger-hover": "var(--colors-danger-hover)",
-    "feedback-error": "var(--colors-feedback-error)",
-    "feedback-success": "var(--colors-feedback-success)",
-    "feedback-warning": "var(--colors-feedback-warning)",
-    "gray-100": "var(--colors-gray-100)",
-    "gray-200": "var(--colors-gray-200)",
-    "gray-300": "var(--colors-gray-300)",
-    "gray-600": "var(--colors-gray-600)",
-    "gray-800": "var(--colors-gray-800)",
-    "gray-900": "var(--colors-gray-900)",
-    "green": "var(--colors-green)",
-    "green-0": "var(--colors-green-0)",
-    "green-100": "var(--colors-green-100)",
-    "green-400": "var(--colors-green-400)",
-    "green-700": "var(--colors-green-700)",
-    "green-900": "var(--colors-green-900)",
-    "hyper": "var(--colors-hyper)",
-    "hyper-400": "var(--colors-hyper-400)",
-    "hyper-500": "var(--colors-hyper-500)",
-    "interface": "var(--colors-interface)",
-    "interface-hover": "var(--colors-interface-hover)",
-    "lightBlue": "var(--colors-lightBlue)",
-    "lightGreen": "var(--colors-lightGreen)",
-    "navy": "var(--colors-navy)",
-    "navy-100": "var(--colors-navy-100)",
-    "navy-200": "var(--colors-navy-200)",
-    "navy-300": "var(--colors-navy-300)",
-    "navy-400": "var(--colors-navy-400)",
-    "navy-500": "var(--colors-navy-500)",
-    "navy-600": "var(--colors-navy-600)",
-    "navy-700": "var(--colors-navy-700)",
-    "navy-800": "var(--colors-navy-800)",
-    "navy-900": "var(--colors-navy-900)",
-    "orange": "var(--colors-orange)",
-    "orange-100": "var(--colors-orange-100)",
-    "orange-500": "var(--colors-orange-500)",
-    "paleBlue": "var(--colors-paleBlue)",
-    "paleGreen": "var(--colors-paleGreen)",
-    "palePink": "var(--colors-palePink)",
-    "paleRed": "var(--colors-paleRed)",
-    "paleYellow": "var(--colors-paleYellow)",
-    "pink": "var(--colors-pink)",
-    "pink-0": "var(--colors-pink-0)",
-    "pink-400": "var(--colors-pink-400)",
-    "primary": "var(--colors-primary)",
-    "primary-hover": "var(--colors-primary-hover)",
-    "primary-inverse": "var(--colors-primary-inverse)",
-    "red": "var(--colors-red)",
-    "red-0": "var(--colors-red-0)",
-    "red-300": "var(--colors-red-300)",
-    "red-400": "var(--colors-red-400)",
-    "red-500": "var(--colors-red-500)",
-    "red-600": "var(--colors-red-600)",
-    "red-900": "var(--colors-red-900)",
-    "secondary": "var(--colors-secondary)",
-    "secondary-hover": "var(--colors-secondary-hover)",
-    "shadow-primary": "var(--colors-shadow-primary)",
-    "shadow-secondary": "var(--colors-shadow-secondary)",
-    "text": "var(--colors-text)",
-    "text-accent": "var(--colors-text-accent)",
-    "text-disabled": "var(--colors-text-disabled)",
-    "text-secondary": "var(--colors-text-secondary)",
-    "white": "var(--colors-white)",
-    "white-100": "var(--colors-white-100)",
-    "white-200": "var(--colors-white-200)",
-    "white-300": "var(--colors-white-300)",
-    "white-400": "var(--colors-white-400)",
-    "white-500": "var(--colors-white-500)",
-    "white-600": "var(--colors-white-600)",
-    "white-700": "var(--colors-white-700)",
-    "yellow": "var(--colors-yellow)",
-    "yellow-0": "var(--colors-yellow-0)",
-    "yellow-400": "var(--colors-yellow-400)",
-    "yellow-500": "var(--colors-yellow-500)",
-    "yellow-900": "var(--colors-yellow-900)",
+    "background": "var(--color-background)",
+    "background-contrast": "var(--color-background-contrast)",
+    "background-current": "var(--color-background-current)",
+    "background-disabled": "var(--color-background-disabled)",
+    "background-error": "var(--color-background-error)",
+    "background-hover": "var(--color-background-hover)",
+    "background-primary": "var(--color-background-primary)",
+    "background-selected": "var(--color-background-selected)",
+    "background-success": "var(--color-background-success)",
+    "background-warning": "var(--color-background-warning)",
+    "beige": "var(--color-beige)",
+    "beige-100": "var(--color-beige-100)",
+    "black": "var(--color-black)",
+    "blue": "var(--color-blue)",
+    "blue-0": "var(--color-blue-0)",
+    "blue-100": "var(--color-blue-100)",
+    "blue-300": "var(--color-blue-300)",
+    "blue-400": "var(--color-blue-400)",
+    "blue-500": "var(--color-blue-500)",
+    "blue-800": "var(--color-blue-800)",
+    "border-disabled": "var(--color-border-disabled)",
+    "border-primary": "var(--color-border-primary)",
+    "border-secondary": "var(--color-border-secondary)",
+    "border-tertiary": "var(--color-border-tertiary)",
+    "danger": "var(--color-danger)",
+    "danger-hover": "var(--color-danger-hover)",
+    "feedback-error": "var(--color-feedback-error)",
+    "feedback-success": "var(--color-feedback-success)",
+    "feedback-warning": "var(--color-feedback-warning)",
+    "gray-100": "var(--color-gray-100)",
+    "gray-200": "var(--color-gray-200)",
+    "gray-300": "var(--color-gray-300)",
+    "gray-600": "var(--color-gray-600)",
+    "gray-800": "var(--color-gray-800)",
+    "gray-900": "var(--color-gray-900)",
+    "green": "var(--color-green)",
+    "green-0": "var(--color-green-0)",
+    "green-100": "var(--color-green-100)",
+    "green-400": "var(--color-green-400)",
+    "green-700": "var(--color-green-700)",
+    "green-900": "var(--color-green-900)",
+    "hyper": "var(--color-hyper)",
+    "hyper-400": "var(--color-hyper-400)",
+    "hyper-500": "var(--color-hyper-500)",
+    "interface": "var(--color-interface)",
+    "interface-hover": "var(--color-interface-hover)",
+    "lightBlue": "var(--color-lightBlue)",
+    "lightGreen": "var(--color-lightGreen)",
+    "navy": "var(--color-navy)",
+    "navy-100": "var(--color-navy-100)",
+    "navy-200": "var(--color-navy-200)",
+    "navy-300": "var(--color-navy-300)",
+    "navy-400": "var(--color-navy-400)",
+    "navy-500": "var(--color-navy-500)",
+    "navy-600": "var(--color-navy-600)",
+    "navy-700": "var(--color-navy-700)",
+    "navy-800": "var(--color-navy-800)",
+    "navy-900": "var(--color-navy-900)",
+    "orange": "var(--color-orange)",
+    "orange-100": "var(--color-orange-100)",
+    "orange-500": "var(--color-orange-500)",
+    "paleBlue": "var(--color-paleBlue)",
+    "paleGreen": "var(--color-paleGreen)",
+    "palePink": "var(--color-palePink)",
+    "paleRed": "var(--color-paleRed)",
+    "paleYellow": "var(--color-paleYellow)",
+    "pink": "var(--color-pink)",
+    "pink-0": "var(--color-pink-0)",
+    "pink-400": "var(--color-pink-400)",
+    "primary": "var(--color-primary)",
+    "primary-hover": "var(--color-primary-hover)",
+    "primary-inverse": "var(--color-primary-inverse)",
+    "red": "var(--color-red)",
+    "red-0": "var(--color-red-0)",
+    "red-300": "var(--color-red-300)",
+    "red-400": "var(--color-red-400)",
+    "red-500": "var(--color-red-500)",
+    "red-600": "var(--color-red-600)",
+    "red-900": "var(--color-red-900)",
+    "secondary": "var(--color-secondary)",
+    "secondary-hover": "var(--color-secondary-hover)",
+    "shadow-primary": "var(--color-shadow-primary)",
+    "shadow-secondary": "var(--color-shadow-secondary)",
+    "text": "var(--color-text)",
+    "text-accent": "var(--color-text-accent)",
+    "text-disabled": "var(--color-text-disabled)",
+    "text-secondary": "var(--color-text-secondary)",
+    "white": "var(--color-white)",
+    "white-100": "var(--color-white-100)",
+    "white-200": "var(--color-white-200)",
+    "white-300": "var(--color-white-300)",
+    "white-400": "var(--color-white-400)",
+    "white-500": "var(--color-white-500)",
+    "white-600": "var(--color-white-600)",
+    "white-700": "var(--color-white-700)",
+    "yellow": "var(--color-yellow)",
+    "yellow-0": "var(--color-yellow-0)",
+    "yellow-400": "var(--color-yellow-400)",
+    "yellow-500": "var(--color-yellow-500)",
+    "yellow-900": "var(--color-yellow-900)",
   },
   "elements": {
     "headerHeight": "var(--elements-headerHeight)",
     "headerZ": "var(--elements-headerZ)",
   },
   "elevation": {
-    "hover-shadow": "-8px 8px 0 0 var(--colors-shadow-primary)",
+    "hover-shadow": "-8px 8px 0 0 var(--color-shadow-primary)",
     "hover-transform": "translate(4px, -4px)",
-    "hoverMirrored-shadow": "8px 8px 0 0 var(--colors-shadow-primary)",
+    "hoverMirrored-shadow": "8px 8px 0 0 var(--color-shadow-primary)",
     "hoverMirrored-transform": "translate(-4px, -4px)",
-    "rest-shadow": "0 0 0 0 var(--colors-shadow-primary)",
+    "rest-shadow": "0 0 0 0 var(--color-shadow-primary)",
     "rest-transform": "none",
   },
   "fontFamily": {
@@ -1205,111 +1205,111 @@ exports[`themes lxStudio - theme shape 1`] = `
   },
   "_variables": {
     "mode": {
-      "--colors-background": "var(--colors-white)",
-      "--colors-background-contrast": "var(--colors-white)",
-      "--colors-background-current": "var(--colors-white)",
-      "--colors-background-disabled": "var(--colors-navy-200)",
-      "--colors-background-error": "var(--colors-red-0)",
-      "--colors-background-hover": "var(--colors-navy-200)",
-      "--colors-background-primary": "var(--colors-lxStudioBgPrimary)",
-      "--colors-background-selected": "var(--colors-navy-100)",
-      "--colors-background-success": "var(--colors-green-0)",
-      "--colors-background-warning": "var(--colors-yellow-0)",
-      "--colors-border-disabled": "var(--colors-navy-300)",
-      "--colors-border-primary": "var(--colors-navy-400)",
-      "--colors-border-secondary": "var(--colors-navy-600)",
-      "--colors-border-tertiary": "var(--colors-navy-800)",
-      "--colors-danger": "var(--colors-red-500)",
-      "--colors-danger-hover": "var(--colors-red-600)",
-      "--colors-feedback-error": "var(--colors-red-600)",
-      "--colors-feedback-success": "var(--colors-lxStudioSuccess)",
-      "--colors-feedback-warning": "var(--colors-yellow)",
-      "--colors-interface": "var(--colors-hyper-500)",
-      "--colors-interface-hover": "var(--colors-hyper-400)",
-      "--colors-primary": "var(--colors-sapphire)",
-      "--colors-primary-hover": "var(--colors-navy-800)",
-      "--colors-primary-inverse": "var(--colors-yellow-500)",
-      "--colors-secondary": "var(--colors-navy-800)",
-      "--colors-secondary-hover": "var(--colors-navy-700)",
-      "--colors-shadow-primary": "var(--colors-navy-200)",
-      "--colors-shadow-secondary": "var(--colors-navy-600)",
-      "--colors-text": "var(--colors-navy-800)",
-      "--colors-text-accent": "var(--colors-navy-900)",
-      "--colors-text-disabled": "var(--colors-navy-500)",
-      "--colors-text-secondary": "var(--colors-navy-600)",
+      "--color-background": "var(--color-white)",
+      "--color-background-contrast": "var(--color-white)",
+      "--color-background-current": "var(--color-white)",
+      "--color-background-disabled": "var(--color-navy-200)",
+      "--color-background-error": "var(--color-red-0)",
+      "--color-background-hover": "var(--color-navy-200)",
+      "--color-background-primary": "var(--color-lxStudioBgPrimary)",
+      "--color-background-selected": "var(--color-navy-100)",
+      "--color-background-success": "var(--color-green-0)",
+      "--color-background-warning": "var(--color-yellow-0)",
+      "--color-border-disabled": "var(--color-navy-300)",
+      "--color-border-primary": "var(--color-navy-400)",
+      "--color-border-secondary": "var(--color-navy-600)",
+      "--color-border-tertiary": "var(--color-navy-800)",
+      "--color-danger": "var(--color-red-500)",
+      "--color-danger-hover": "var(--color-red-600)",
+      "--color-feedback-error": "var(--color-red-600)",
+      "--color-feedback-success": "var(--color-lxStudioSuccess)",
+      "--color-feedback-warning": "var(--color-yellow)",
+      "--color-interface": "var(--color-hyper-500)",
+      "--color-interface-hover": "var(--color-hyper-400)",
+      "--color-primary": "var(--color-sapphire)",
+      "--color-primary-hover": "var(--color-navy-800)",
+      "--color-primary-inverse": "var(--color-yellow-500)",
+      "--color-secondary": "var(--color-navy-800)",
+      "--color-secondary-hover": "var(--color-navy-700)",
+      "--color-shadow-primary": "var(--color-navy-200)",
+      "--color-shadow-secondary": "var(--color-navy-600)",
+      "--color-text": "var(--color-navy-800)",
+      "--color-text-accent": "var(--color-navy-900)",
+      "--color-text-disabled": "var(--color-navy-500)",
+      "--color-text-secondary": "var(--color-navy-600)",
     },
     "root": {
-      "--colors-beige": "#FFF0E5",
-      "--colors-beige-100": "#FFF0E5",
-      "--colors-black": "#000000",
-      "--colors-blue": "#1557FF",
-      "--colors-blue-0": "#F5FCFF",
-      "--colors-blue-100": "#D3F2FF",
-      "--colors-blue-300": "#66C4FF",
-      "--colors-blue-400": "#3388FF",
-      "--colors-blue-500": "#1557FF",
-      "--colors-blue-800": "#1D2340",
-      "--colors-gray-100": "#F5F5F5",
-      "--colors-gray-200": "#EEEEEE",
-      "--colors-gray-300": "#E0E0E0",
-      "--colors-gray-600": "#9E9E9E",
-      "--colors-gray-800": "#616161",
-      "--colors-gray-900": "#424242",
-      "--colors-green": "#008A27",
-      "--colors-green-0": "#F5FFE3",
-      "--colors-green-100": "#EAFDC6",
-      "--colors-green-400": "#AEE938",
-      "--colors-green-700": "#008A27",
-      "--colors-green-900": "#151C07",
-      "--colors-hyper": "#3A10E5",
-      "--colors-hyper-400": "#5533FF",
-      "--colors-hyper-500": "#3A10E5",
-      "--colors-lightBlue": "#66C4FF",
-      "--colors-lightGreen": "#AEE938",
-      "--colors-lxStudioBgPrimary": "#FAFBFC",
-      "--colors-lxStudioSuccess": "#06844F",
-      "--colors-navy": "#10162F",
-      "--colors-navy-100": "rgba(16,22,47,0.04)",
-      "--colors-navy-200": "rgba(16,22,47,0.12)",
-      "--colors-navy-300": "rgba(16,22,47,0.28)",
-      "--colors-navy-400": "rgba(16,22,47,0.47)",
-      "--colors-navy-500": "rgba(16,22,47,0.63)",
-      "--colors-navy-600": "rgba(16,22,47,0.75)",
-      "--colors-navy-700": "rgba(16,22,47,0.86)",
-      "--colors-navy-800": "#10162F",
-      "--colors-navy-900": "#0A0D1C",
-      "--colors-orange": "#FF8C00",
-      "--colors-orange-100": "#FFE8CC",
-      "--colors-orange-500": "#FF8C00",
-      "--colors-paleBlue": "#F5FCFF",
-      "--colors-paleGreen": "#F5FFE3",
-      "--colors-palePink": "#FFF5FF",
-      "--colors-paleRed": "#DC5879",
-      "--colors-paleYellow": "#FFFAE5",
-      "--colors-pink": "#F966FF",
-      "--colors-pink-0": "#FFF5FF",
-      "--colors-pink-400": "#F966FF",
-      "--colors-red": "#E91C11",
-      "--colors-red-0": "#FBF1F0",
-      "--colors-red-300": "#E85D7F",
-      "--colors-red-400": "#DC5879",
-      "--colors-red-500": "#E91C11",
-      "--colors-red-600": "#BE1809",
-      "--colors-red-900": "#280503",
-      "--colors-sapphire": "#1C50BB",
-      "--colors-white": "#ffffff",
-      "--colors-white-100": "rgba(255,255,255,0.04)",
-      "--colors-white-200": "rgba(255,255,255,0.09)",
-      "--colors-white-300": "rgba(255,255,255,0.2)",
-      "--colors-white-400": "rgba(255,255,255,0.35)",
-      "--colors-white-500": "rgba(255,255,255,0.5)",
-      "--colors-white-600": "rgba(255,255,255,0.65)",
-      "--colors-white-700": "rgba(255,255,255,0.8)",
-      "--colors-yellow": "#FFD300",
-      "--colors-yellow-0": "#FFFAE5",
-      "--colors-yellow-400": "#CCA900",
-      "--colors-yellow-500": "#FFD300",
-      "--colors-yellow-900": "#211B00",
+      "--color-beige": "#FFF0E5",
+      "--color-beige-100": "#FFF0E5",
+      "--color-black": "#000000",
+      "--color-blue": "#1557FF",
+      "--color-blue-0": "#F5FCFF",
+      "--color-blue-100": "#D3F2FF",
+      "--color-blue-300": "#66C4FF",
+      "--color-blue-400": "#3388FF",
+      "--color-blue-500": "#1557FF",
+      "--color-blue-800": "#1D2340",
+      "--color-gray-100": "#F5F5F5",
+      "--color-gray-200": "#EEEEEE",
+      "--color-gray-300": "#E0E0E0",
+      "--color-gray-600": "#9E9E9E",
+      "--color-gray-800": "#616161",
+      "--color-gray-900": "#424242",
+      "--color-green": "#008A27",
+      "--color-green-0": "#F5FFE3",
+      "--color-green-100": "#EAFDC6",
+      "--color-green-400": "#AEE938",
+      "--color-green-700": "#008A27",
+      "--color-green-900": "#151C07",
+      "--color-hyper": "#3A10E5",
+      "--color-hyper-400": "#5533FF",
+      "--color-hyper-500": "#3A10E5",
+      "--color-lightBlue": "#66C4FF",
+      "--color-lightGreen": "#AEE938",
+      "--color-lxStudioBgPrimary": "#FAFBFC",
+      "--color-lxStudioSuccess": "#06844F",
+      "--color-navy": "#10162F",
+      "--color-navy-100": "rgba(16,22,47,0.04)",
+      "--color-navy-200": "rgba(16,22,47,0.12)",
+      "--color-navy-300": "rgba(16,22,47,0.28)",
+      "--color-navy-400": "rgba(16,22,47,0.47)",
+      "--color-navy-500": "rgba(16,22,47,0.63)",
+      "--color-navy-600": "rgba(16,22,47,0.75)",
+      "--color-navy-700": "rgba(16,22,47,0.86)",
+      "--color-navy-800": "#10162F",
+      "--color-navy-900": "#0A0D1C",
+      "--color-orange": "#FF8C00",
+      "--color-orange-100": "#FFE8CC",
+      "--color-orange-500": "#FF8C00",
+      "--color-paleBlue": "#F5FCFF",
+      "--color-paleGreen": "#F5FFE3",
+      "--color-palePink": "#FFF5FF",
+      "--color-paleRed": "#DC5879",
+      "--color-paleYellow": "#FFFAE5",
+      "--color-pink": "#F966FF",
+      "--color-pink-0": "#FFF5FF",
+      "--color-pink-400": "#F966FF",
+      "--color-red": "#E91C11",
+      "--color-red-0": "#FBF1F0",
+      "--color-red-300": "#E85D7F",
+      "--color-red-400": "#DC5879",
+      "--color-red-500": "#E91C11",
+      "--color-red-600": "#BE1809",
+      "--color-red-900": "#280503",
+      "--color-sapphire": "#1C50BB",
+      "--color-white": "#ffffff",
+      "--color-white-100": "rgba(255,255,255,0.04)",
+      "--color-white-200": "rgba(255,255,255,0.09)",
+      "--color-white-300": "rgba(255,255,255,0.2)",
+      "--color-white-400": "rgba(255,255,255,0.35)",
+      "--color-white-500": "rgba(255,255,255,0.5)",
+      "--color-white-600": "rgba(255,255,255,0.65)",
+      "--color-white-700": "rgba(255,255,255,0.8)",
+      "--color-yellow": "#FFD300",
+      "--color-yellow-0": "#FFFAE5",
+      "--color-yellow-400": "#CCA900",
+      "--color-yellow-500": "#FFD300",
+      "--color-yellow-900": "#211B00",
       "--elements-headerHeight": "4rem",
       "--elements-headerZ": 15,
       "@media only screen and (min-width: 1024px)": {
@@ -1326,8 +1326,8 @@ exports[`themes lxStudio - theme shape 1`] = `
     "xl": "16px",
   },
   "borders": {
-    "1": "1px solid var(--colors-border-primary)",
-    "2": "2px solid var(--colors-border-primary)",
+    "1": "1px solid var(--color-border-primary)",
+    "2": "2px solid var(--color-border-primary)",
   },
   "breakpoints": {
     "c_base": "@container (min-width: 1px)",
@@ -1343,120 +1343,120 @@ exports[`themes lxStudio - theme shape 1`] = `
     "xs": "@media only screen and (min-width: 480px)",
   },
   "colors": {
-    "background": "var(--colors-background)",
-    "background-contrast": "var(--colors-background-contrast)",
-    "background-current": "var(--colors-background-current)",
-    "background-disabled": "var(--colors-background-disabled)",
-    "background-error": "var(--colors-background-error)",
-    "background-hover": "var(--colors-background-hover)",
-    "background-primary": "var(--colors-background-primary)",
-    "background-selected": "var(--colors-background-selected)",
-    "background-success": "var(--colors-background-success)",
-    "background-warning": "var(--colors-background-warning)",
-    "beige": "var(--colors-beige)",
-    "beige-100": "var(--colors-beige-100)",
-    "black": "var(--colors-black)",
-    "blue": "var(--colors-blue)",
-    "blue-0": "var(--colors-blue-0)",
-    "blue-100": "var(--colors-blue-100)",
-    "blue-300": "var(--colors-blue-300)",
-    "blue-400": "var(--colors-blue-400)",
-    "blue-500": "var(--colors-blue-500)",
-    "blue-800": "var(--colors-blue-800)",
-    "border-disabled": "var(--colors-border-disabled)",
-    "border-primary": "var(--colors-border-primary)",
-    "border-secondary": "var(--colors-border-secondary)",
-    "border-tertiary": "var(--colors-border-tertiary)",
-    "danger": "var(--colors-danger)",
-    "danger-hover": "var(--colors-danger-hover)",
-    "feedback-error": "var(--colors-feedback-error)",
-    "feedback-success": "var(--colors-feedback-success)",
-    "feedback-warning": "var(--colors-feedback-warning)",
-    "gray-100": "var(--colors-gray-100)",
-    "gray-200": "var(--colors-gray-200)",
-    "gray-300": "var(--colors-gray-300)",
-    "gray-600": "var(--colors-gray-600)",
-    "gray-800": "var(--colors-gray-800)",
-    "gray-900": "var(--colors-gray-900)",
-    "green": "var(--colors-green)",
-    "green-0": "var(--colors-green-0)",
-    "green-100": "var(--colors-green-100)",
-    "green-400": "var(--colors-green-400)",
-    "green-700": "var(--colors-green-700)",
-    "green-900": "var(--colors-green-900)",
-    "hyper": "var(--colors-hyper)",
-    "hyper-400": "var(--colors-hyper-400)",
-    "hyper-500": "var(--colors-hyper-500)",
-    "interface": "var(--colors-interface)",
-    "interface-hover": "var(--colors-interface-hover)",
-    "lightBlue": "var(--colors-lightBlue)",
-    "lightGreen": "var(--colors-lightGreen)",
-    "lxStudioBgPrimary": "var(--colors-lxStudioBgPrimary)",
-    "lxStudioSuccess": "var(--colors-lxStudioSuccess)",
-    "navy": "var(--colors-navy)",
-    "navy-100": "var(--colors-navy-100)",
-    "navy-200": "var(--colors-navy-200)",
-    "navy-300": "var(--colors-navy-300)",
-    "navy-400": "var(--colors-navy-400)",
-    "navy-500": "var(--colors-navy-500)",
-    "navy-600": "var(--colors-navy-600)",
-    "navy-700": "var(--colors-navy-700)",
-    "navy-800": "var(--colors-navy-800)",
-    "navy-900": "var(--colors-navy-900)",
-    "orange": "var(--colors-orange)",
-    "orange-100": "var(--colors-orange-100)",
-    "orange-500": "var(--colors-orange-500)",
-    "paleBlue": "var(--colors-paleBlue)",
-    "paleGreen": "var(--colors-paleGreen)",
-    "palePink": "var(--colors-palePink)",
-    "paleRed": "var(--colors-paleRed)",
-    "paleYellow": "var(--colors-paleYellow)",
-    "pink": "var(--colors-pink)",
-    "pink-0": "var(--colors-pink-0)",
-    "pink-400": "var(--colors-pink-400)",
-    "primary": "var(--colors-primary)",
-    "primary-hover": "var(--colors-primary-hover)",
-    "primary-inverse": "var(--colors-primary-inverse)",
-    "red": "var(--colors-red)",
-    "red-0": "var(--colors-red-0)",
-    "red-300": "var(--colors-red-300)",
-    "red-400": "var(--colors-red-400)",
-    "red-500": "var(--colors-red-500)",
-    "red-600": "var(--colors-red-600)",
-    "red-900": "var(--colors-red-900)",
-    "sapphire": "var(--colors-sapphire)",
-    "secondary": "var(--colors-secondary)",
-    "secondary-hover": "var(--colors-secondary-hover)",
-    "shadow-primary": "var(--colors-shadow-primary)",
-    "shadow-secondary": "var(--colors-shadow-secondary)",
-    "text": "var(--colors-text)",
-    "text-accent": "var(--colors-text-accent)",
-    "text-disabled": "var(--colors-text-disabled)",
-    "text-secondary": "var(--colors-text-secondary)",
-    "white": "var(--colors-white)",
-    "white-100": "var(--colors-white-100)",
-    "white-200": "var(--colors-white-200)",
-    "white-300": "var(--colors-white-300)",
-    "white-400": "var(--colors-white-400)",
-    "white-500": "var(--colors-white-500)",
-    "white-600": "var(--colors-white-600)",
-    "white-700": "var(--colors-white-700)",
-    "yellow": "var(--colors-yellow)",
-    "yellow-0": "var(--colors-yellow-0)",
-    "yellow-400": "var(--colors-yellow-400)",
-    "yellow-500": "var(--colors-yellow-500)",
-    "yellow-900": "var(--colors-yellow-900)",
+    "background": "var(--color-background)",
+    "background-contrast": "var(--color-background-contrast)",
+    "background-current": "var(--color-background-current)",
+    "background-disabled": "var(--color-background-disabled)",
+    "background-error": "var(--color-background-error)",
+    "background-hover": "var(--color-background-hover)",
+    "background-primary": "var(--color-background-primary)",
+    "background-selected": "var(--color-background-selected)",
+    "background-success": "var(--color-background-success)",
+    "background-warning": "var(--color-background-warning)",
+    "beige": "var(--color-beige)",
+    "beige-100": "var(--color-beige-100)",
+    "black": "var(--color-black)",
+    "blue": "var(--color-blue)",
+    "blue-0": "var(--color-blue-0)",
+    "blue-100": "var(--color-blue-100)",
+    "blue-300": "var(--color-blue-300)",
+    "blue-400": "var(--color-blue-400)",
+    "blue-500": "var(--color-blue-500)",
+    "blue-800": "var(--color-blue-800)",
+    "border-disabled": "var(--color-border-disabled)",
+    "border-primary": "var(--color-border-primary)",
+    "border-secondary": "var(--color-border-secondary)",
+    "border-tertiary": "var(--color-border-tertiary)",
+    "danger": "var(--color-danger)",
+    "danger-hover": "var(--color-danger-hover)",
+    "feedback-error": "var(--color-feedback-error)",
+    "feedback-success": "var(--color-feedback-success)",
+    "feedback-warning": "var(--color-feedback-warning)",
+    "gray-100": "var(--color-gray-100)",
+    "gray-200": "var(--color-gray-200)",
+    "gray-300": "var(--color-gray-300)",
+    "gray-600": "var(--color-gray-600)",
+    "gray-800": "var(--color-gray-800)",
+    "gray-900": "var(--color-gray-900)",
+    "green": "var(--color-green)",
+    "green-0": "var(--color-green-0)",
+    "green-100": "var(--color-green-100)",
+    "green-400": "var(--color-green-400)",
+    "green-700": "var(--color-green-700)",
+    "green-900": "var(--color-green-900)",
+    "hyper": "var(--color-hyper)",
+    "hyper-400": "var(--color-hyper-400)",
+    "hyper-500": "var(--color-hyper-500)",
+    "interface": "var(--color-interface)",
+    "interface-hover": "var(--color-interface-hover)",
+    "lightBlue": "var(--color-lightBlue)",
+    "lightGreen": "var(--color-lightGreen)",
+    "lxStudioBgPrimary": "var(--color-lxStudioBgPrimary)",
+    "lxStudioSuccess": "var(--color-lxStudioSuccess)",
+    "navy": "var(--color-navy)",
+    "navy-100": "var(--color-navy-100)",
+    "navy-200": "var(--color-navy-200)",
+    "navy-300": "var(--color-navy-300)",
+    "navy-400": "var(--color-navy-400)",
+    "navy-500": "var(--color-navy-500)",
+    "navy-600": "var(--color-navy-600)",
+    "navy-700": "var(--color-navy-700)",
+    "navy-800": "var(--color-navy-800)",
+    "navy-900": "var(--color-navy-900)",
+    "orange": "var(--color-orange)",
+    "orange-100": "var(--color-orange-100)",
+    "orange-500": "var(--color-orange-500)",
+    "paleBlue": "var(--color-paleBlue)",
+    "paleGreen": "var(--color-paleGreen)",
+    "palePink": "var(--color-palePink)",
+    "paleRed": "var(--color-paleRed)",
+    "paleYellow": "var(--color-paleYellow)",
+    "pink": "var(--color-pink)",
+    "pink-0": "var(--color-pink-0)",
+    "pink-400": "var(--color-pink-400)",
+    "primary": "var(--color-primary)",
+    "primary-hover": "var(--color-primary-hover)",
+    "primary-inverse": "var(--color-primary-inverse)",
+    "red": "var(--color-red)",
+    "red-0": "var(--color-red-0)",
+    "red-300": "var(--color-red-300)",
+    "red-400": "var(--color-red-400)",
+    "red-500": "var(--color-red-500)",
+    "red-600": "var(--color-red-600)",
+    "red-900": "var(--color-red-900)",
+    "sapphire": "var(--color-sapphire)",
+    "secondary": "var(--color-secondary)",
+    "secondary-hover": "var(--color-secondary-hover)",
+    "shadow-primary": "var(--color-shadow-primary)",
+    "shadow-secondary": "var(--color-shadow-secondary)",
+    "text": "var(--color-text)",
+    "text-accent": "var(--color-text-accent)",
+    "text-disabled": "var(--color-text-disabled)",
+    "text-secondary": "var(--color-text-secondary)",
+    "white": "var(--color-white)",
+    "white-100": "var(--color-white-100)",
+    "white-200": "var(--color-white-200)",
+    "white-300": "var(--color-white-300)",
+    "white-400": "var(--color-white-400)",
+    "white-500": "var(--color-white-500)",
+    "white-600": "var(--color-white-600)",
+    "white-700": "var(--color-white-700)",
+    "yellow": "var(--color-yellow)",
+    "yellow-0": "var(--color-yellow-0)",
+    "yellow-400": "var(--color-yellow-400)",
+    "yellow-500": "var(--color-yellow-500)",
+    "yellow-900": "var(--color-yellow-900)",
   },
   "elements": {
     "headerHeight": "var(--elements-headerHeight)",
     "headerZ": "var(--elements-headerZ)",
   },
   "elevation": {
-    "hover-shadow": "-8px 8px 0 0 var(--colors-shadow-primary)",
+    "hover-shadow": "-8px 8px 0 0 var(--color-shadow-primary)",
     "hover-transform": "translate(4px, -4px)",
-    "hoverMirrored-shadow": "8px 8px 0 0 var(--colors-shadow-primary)",
+    "hoverMirrored-shadow": "8px 8px 0 0 var(--color-shadow-primary)",
     "hoverMirrored-transform": "translate(-4px, -4px)",
-    "rest-shadow": "0 0 0 0 var(--colors-shadow-primary)",
+    "rest-shadow": "0 0 0 0 var(--color-shadow-primary)",
     "rest-transform": "none",
   },
   "fontFamily": {
@@ -1753,124 +1753,124 @@ exports[`themes percipio - theme shape 1`] = `
   },
   "_variables": {
     "mode": {
-      "--colors-background": "var(--colors-white)",
-      "--colors-background-contrast": "var(--colors-white)",
-      "--colors-background-current": "var(--colors-white)",
-      "--colors-background-disabled": "var(--colors-navy-200)",
-      "--colors-background-error": "var(--colors-percipioBgError)",
-      "--colors-background-hover": "var(--colors-navy-200)",
-      "--colors-background-primary": "var(--colors-percipioBgPrimary)",
-      "--colors-background-selected": "var(--colors-navy-100)",
-      "--colors-background-success": "var(--colors-percipioBgSuccess)",
-      "--colors-background-warning": "var(--colors-percipioBgWarning)",
-      "--colors-border-disabled": "var(--colors-navy-300)",
-      "--colors-border-primary": "var(--colors-navy-400)",
-      "--colors-border-secondary": "var(--colors-navy-600)",
-      "--colors-border-tertiary": "var(--colors-navy-800)",
-      "--colors-danger": "var(--colors-percipioDanger)",
-      "--colors-danger-hover": "var(--colors-percipioActionDangerHover)",
-      "--colors-feedback-error": "var(--colors-percipioDanger)",
-      "--colors-feedback-success": "var(--colors-percipioFeedbackSuccess)",
-      "--colors-feedback-warning": "var(--colors-percipioFeedbackWarning)",
-      "--colors-interface": "var(--colors-sapphire)",
-      "--colors-interface-hover": "var(--colors-percipioActionPrimaryHover)",
-      "--colors-primary": "var(--colors-sapphire)",
-      "--colors-primary-hover": "var(--colors-percipioActionPrimaryHover)",
-      "--colors-primary-inverse": "var(--colors-white)",
-      "--colors-secondary": "var(--colors-percipioActionSecondary)",
-      "--colors-secondary-hover": "var(--colors-percipioActionSecondaryHover)",
-      "--colors-shadow-primary": "var(--colors-navy-200)",
-      "--colors-shadow-secondary": "var(--colors-navy-400)",
-      "--colors-text": "var(--colors-percipioTextPrimary)",
-      "--colors-text-accent": "var(--colors-percipioTextAccent)",
-      "--colors-text-disabled": "var(--colors-percipioTextDisabled)",
-      "--colors-text-secondary": "var(--colors-percipioTextSecondary)",
+      "--color-background": "var(--color-white)",
+      "--color-background-contrast": "var(--color-white)",
+      "--color-background-current": "var(--color-white)",
+      "--color-background-disabled": "var(--color-navy-200)",
+      "--color-background-error": "var(--color-percipioBgError)",
+      "--color-background-hover": "var(--color-navy-200)",
+      "--color-background-primary": "var(--color-percipioBgPrimary)",
+      "--color-background-selected": "var(--color-navy-100)",
+      "--color-background-success": "var(--color-percipioBgSuccess)",
+      "--color-background-warning": "var(--color-percipioBgWarning)",
+      "--color-border-disabled": "var(--color-navy-300)",
+      "--color-border-primary": "var(--color-navy-400)",
+      "--color-border-secondary": "var(--color-navy-600)",
+      "--color-border-tertiary": "var(--color-navy-800)",
+      "--color-danger": "var(--color-percipioDanger)",
+      "--color-danger-hover": "var(--color-percipioActionDangerHover)",
+      "--color-feedback-error": "var(--color-percipioDanger)",
+      "--color-feedback-success": "var(--color-percipioFeedbackSuccess)",
+      "--color-feedback-warning": "var(--color-percipioFeedbackWarning)",
+      "--color-interface": "var(--color-sapphire)",
+      "--color-interface-hover": "var(--color-percipioActionPrimaryHover)",
+      "--color-primary": "var(--color-sapphire)",
+      "--color-primary-hover": "var(--color-percipioActionPrimaryHover)",
+      "--color-primary-inverse": "var(--color-white)",
+      "--color-secondary": "var(--color-percipioActionSecondary)",
+      "--color-secondary-hover": "var(--color-percipioActionSecondaryHover)",
+      "--color-shadow-primary": "var(--color-navy-200)",
+      "--color-shadow-secondary": "var(--color-navy-400)",
+      "--color-text": "var(--color-percipioTextPrimary)",
+      "--color-text-accent": "var(--color-percipioTextAccent)",
+      "--color-text-disabled": "var(--color-percipioTextDisabled)",
+      "--color-text-secondary": "var(--color-percipioTextSecondary)",
     },
     "root": {
-      "--colors-beige": "#FFF0E5",
-      "--colors-beige-100": "#FFF0E5",
-      "--colors-black": "#000000",
-      "--colors-blue": "#1557FF",
-      "--colors-blue-0": "#F5FCFF",
-      "--colors-blue-100": "#D3F2FF",
-      "--colors-blue-300": "#66C4FF",
-      "--colors-blue-400": "#3388FF",
-      "--colors-blue-500": "#1557FF",
-      "--colors-blue-800": "#1D2340",
-      "--colors-gray-100": "#F5F5F5",
-      "--colors-gray-200": "#EEEEEE",
-      "--colors-gray-300": "#E0E0E0",
-      "--colors-gray-600": "#9E9E9E",
-      "--colors-gray-800": "#616161",
-      "--colors-gray-900": "#424242",
-      "--colors-green": "#008A27",
-      "--colors-green-0": "#F5FFE3",
-      "--colors-green-100": "#EAFDC6",
-      "--colors-green-400": "#AEE938",
-      "--colors-green-700": "#008A27",
-      "--colors-green-900": "#151C07",
-      "--colors-hyper": "#3A10E5",
-      "--colors-hyper-400": "#5533FF",
-      "--colors-hyper-500": "#3A10E5",
-      "--colors-lightBlue": "#66C4FF",
-      "--colors-lightGreen": "#AEE938",
-      "--colors-navy": "#10162F",
-      "--colors-navy-100": "rgba(16,22,47,0.04)",
-      "--colors-navy-200": "rgba(16,22,47,0.12)",
-      "--colors-navy-300": "rgba(16,22,47,0.28)",
-      "--colors-navy-400": "rgba(16,22,47,0.47)",
-      "--colors-navy-500": "rgba(16,22,47,0.63)",
-      "--colors-navy-600": "rgba(16,22,47,0.75)",
-      "--colors-navy-700": "rgba(16,22,47,0.86)",
-      "--colors-navy-800": "#10162F",
-      "--colors-navy-900": "#0A0D1C",
-      "--colors-orange": "#FF8C00",
-      "--colors-orange-100": "#FFE8CC",
-      "--colors-orange-500": "#FF8C00",
-      "--colors-paleBlue": "#F5FCFF",
-      "--colors-paleGreen": "#F5FFE3",
-      "--colors-palePink": "#FFF5FF",
-      "--colors-paleRed": "#DC5879",
-      "--colors-paleYellow": "#FFFAE5",
-      "--colors-percipioActionDangerHover": "#A52020",
-      "--colors-percipioActionPrimaryHover": "#141C36",
-      "--colors-percipioActionSecondary": "#6A6E75",
-      "--colors-percipioActionSecondaryHover": "rgba(106, 110, 117, 0.86)",
-      "--colors-percipioBgError": "#FFF1F5",
-      "--colors-percipioBgPrimary": "#FAFBFC",
-      "--colors-percipioBgSuccess": "#EEF7F3",
-      "--colors-percipioBgWarning": "#FFF7E0",
-      "--colors-percipioDanger": "#B83C3C",
-      "--colors-percipioFeedbackSuccess": "#1B8057",
-      "--colors-percipioFeedbackWarning": "#EF5B0D",
-      "--colors-percipioTextAccent": "#222325",
-      "--colors-percipioTextDisabled": "#AFB6C2",
-      "--colors-percipioTextPrimary": "#222325",
-      "--colors-percipioTextSecondary": "rgba(34, 35, 37, 0.75)",
-      "--colors-pink": "#F966FF",
-      "--colors-pink-0": "#FFF5FF",
-      "--colors-pink-400": "#F966FF",
-      "--colors-red": "#E91C11",
-      "--colors-red-0": "#FBF1F0",
-      "--colors-red-300": "#E85D7F",
-      "--colors-red-400": "#DC5879",
-      "--colors-red-500": "#E91C11",
-      "--colors-red-600": "#BE1809",
-      "--colors-red-900": "#280503",
-      "--colors-sapphire": "#1C50BB",
-      "--colors-white": "#ffffff",
-      "--colors-white-100": "rgba(255,255,255,0.04)",
-      "--colors-white-200": "rgba(255,255,255,0.09)",
-      "--colors-white-300": "rgba(255,255,255,0.2)",
-      "--colors-white-400": "rgba(255,255,255,0.35)",
-      "--colors-white-500": "rgba(255,255,255,0.5)",
-      "--colors-white-600": "rgba(255,255,255,0.65)",
-      "--colors-white-700": "rgba(255,255,255,0.8)",
-      "--colors-yellow": "#FFD300",
-      "--colors-yellow-0": "#FFFAE5",
-      "--colors-yellow-400": "#CCA900",
-      "--colors-yellow-500": "#FFD300",
-      "--colors-yellow-900": "#211B00",
+      "--color-beige": "#FFF0E5",
+      "--color-beige-100": "#FFF0E5",
+      "--color-black": "#000000",
+      "--color-blue": "#1557FF",
+      "--color-blue-0": "#F5FCFF",
+      "--color-blue-100": "#D3F2FF",
+      "--color-blue-300": "#66C4FF",
+      "--color-blue-400": "#3388FF",
+      "--color-blue-500": "#1557FF",
+      "--color-blue-800": "#1D2340",
+      "--color-gray-100": "#F5F5F5",
+      "--color-gray-200": "#EEEEEE",
+      "--color-gray-300": "#E0E0E0",
+      "--color-gray-600": "#9E9E9E",
+      "--color-gray-800": "#616161",
+      "--color-gray-900": "#424242",
+      "--color-green": "#008A27",
+      "--color-green-0": "#F5FFE3",
+      "--color-green-100": "#EAFDC6",
+      "--color-green-400": "#AEE938",
+      "--color-green-700": "#008A27",
+      "--color-green-900": "#151C07",
+      "--color-hyper": "#3A10E5",
+      "--color-hyper-400": "#5533FF",
+      "--color-hyper-500": "#3A10E5",
+      "--color-lightBlue": "#66C4FF",
+      "--color-lightGreen": "#AEE938",
+      "--color-navy": "#10162F",
+      "--color-navy-100": "rgba(16,22,47,0.04)",
+      "--color-navy-200": "rgba(16,22,47,0.12)",
+      "--color-navy-300": "rgba(16,22,47,0.28)",
+      "--color-navy-400": "rgba(16,22,47,0.47)",
+      "--color-navy-500": "rgba(16,22,47,0.63)",
+      "--color-navy-600": "rgba(16,22,47,0.75)",
+      "--color-navy-700": "rgba(16,22,47,0.86)",
+      "--color-navy-800": "#10162F",
+      "--color-navy-900": "#0A0D1C",
+      "--color-orange": "#FF8C00",
+      "--color-orange-100": "#FFE8CC",
+      "--color-orange-500": "#FF8C00",
+      "--color-paleBlue": "#F5FCFF",
+      "--color-paleGreen": "#F5FFE3",
+      "--color-palePink": "#FFF5FF",
+      "--color-paleRed": "#DC5879",
+      "--color-paleYellow": "#FFFAE5",
+      "--color-percipioActionDangerHover": "#A52020",
+      "--color-percipioActionPrimaryHover": "#141C36",
+      "--color-percipioActionSecondary": "#6A6E75",
+      "--color-percipioActionSecondaryHover": "rgba(106, 110, 117, 0.86)",
+      "--color-percipioBgError": "#FFF1F5",
+      "--color-percipioBgPrimary": "#FAFBFC",
+      "--color-percipioBgSuccess": "#EEF7F3",
+      "--color-percipioBgWarning": "#FFF7E0",
+      "--color-percipioDanger": "#B83C3C",
+      "--color-percipioFeedbackSuccess": "#1B8057",
+      "--color-percipioFeedbackWarning": "#EF5B0D",
+      "--color-percipioTextAccent": "#222325",
+      "--color-percipioTextDisabled": "#AFB6C2",
+      "--color-percipioTextPrimary": "#222325",
+      "--color-percipioTextSecondary": "rgba(34, 35, 37, 0.75)",
+      "--color-pink": "#F966FF",
+      "--color-pink-0": "#FFF5FF",
+      "--color-pink-400": "#F966FF",
+      "--color-red": "#E91C11",
+      "--color-red-0": "#FBF1F0",
+      "--color-red-300": "#E85D7F",
+      "--color-red-400": "#DC5879",
+      "--color-red-500": "#E91C11",
+      "--color-red-600": "#BE1809",
+      "--color-red-900": "#280503",
+      "--color-sapphire": "#1C50BB",
+      "--color-white": "#ffffff",
+      "--color-white-100": "rgba(255,255,255,0.04)",
+      "--color-white-200": "rgba(255,255,255,0.09)",
+      "--color-white-300": "rgba(255,255,255,0.2)",
+      "--color-white-400": "rgba(255,255,255,0.35)",
+      "--color-white-500": "rgba(255,255,255,0.5)",
+      "--color-white-600": "rgba(255,255,255,0.65)",
+      "--color-white-700": "rgba(255,255,255,0.8)",
+      "--color-yellow": "#FFD300",
+      "--color-yellow-0": "#FFFAE5",
+      "--color-yellow-400": "#CCA900",
+      "--color-yellow-500": "#FFD300",
+      "--color-yellow-900": "#211B00",
       "--elements-headerHeight": "4rem",
       "--elements-headerZ": 15,
       "@media only screen and (min-width: 1024px)": {
@@ -1887,8 +1887,8 @@ exports[`themes percipio - theme shape 1`] = `
     "xl": "16px",
   },
   "borders": {
-    "1": "1px solid var(--colors-border-primary)",
-    "2": "2px solid var(--colors-border-primary)",
+    "1": "1px solid var(--color-border-primary)",
+    "2": "2px solid var(--color-border-primary)",
   },
   "breakpoints": {
     "c_base": "@container (min-width: 1px)",
@@ -1904,133 +1904,133 @@ exports[`themes percipio - theme shape 1`] = `
     "xs": "@media only screen and (min-width: 480px)",
   },
   "colors": {
-    "background": "var(--colors-background)",
-    "background-contrast": "var(--colors-background-contrast)",
-    "background-current": "var(--colors-background-current)",
-    "background-disabled": "var(--colors-background-disabled)",
-    "background-error": "var(--colors-background-error)",
-    "background-hover": "var(--colors-background-hover)",
-    "background-primary": "var(--colors-background-primary)",
-    "background-selected": "var(--colors-background-selected)",
-    "background-success": "var(--colors-background-success)",
-    "background-warning": "var(--colors-background-warning)",
-    "beige": "var(--colors-beige)",
-    "beige-100": "var(--colors-beige-100)",
-    "black": "var(--colors-black)",
-    "blue": "var(--colors-blue)",
-    "blue-0": "var(--colors-blue-0)",
-    "blue-100": "var(--colors-blue-100)",
-    "blue-300": "var(--colors-blue-300)",
-    "blue-400": "var(--colors-blue-400)",
-    "blue-500": "var(--colors-blue-500)",
-    "blue-800": "var(--colors-blue-800)",
-    "border-disabled": "var(--colors-border-disabled)",
-    "border-primary": "var(--colors-border-primary)",
-    "border-secondary": "var(--colors-border-secondary)",
-    "border-tertiary": "var(--colors-border-tertiary)",
-    "danger": "var(--colors-danger)",
-    "danger-hover": "var(--colors-danger-hover)",
-    "feedback-error": "var(--colors-feedback-error)",
-    "feedback-success": "var(--colors-feedback-success)",
-    "feedback-warning": "var(--colors-feedback-warning)",
-    "gray-100": "var(--colors-gray-100)",
-    "gray-200": "var(--colors-gray-200)",
-    "gray-300": "var(--colors-gray-300)",
-    "gray-600": "var(--colors-gray-600)",
-    "gray-800": "var(--colors-gray-800)",
-    "gray-900": "var(--colors-gray-900)",
-    "green": "var(--colors-green)",
-    "green-0": "var(--colors-green-0)",
-    "green-100": "var(--colors-green-100)",
-    "green-400": "var(--colors-green-400)",
-    "green-700": "var(--colors-green-700)",
-    "green-900": "var(--colors-green-900)",
-    "hyper": "var(--colors-hyper)",
-    "hyper-400": "var(--colors-hyper-400)",
-    "hyper-500": "var(--colors-hyper-500)",
-    "interface": "var(--colors-interface)",
-    "interface-hover": "var(--colors-interface-hover)",
-    "lightBlue": "var(--colors-lightBlue)",
-    "lightGreen": "var(--colors-lightGreen)",
-    "navy": "var(--colors-navy)",
-    "navy-100": "var(--colors-navy-100)",
-    "navy-200": "var(--colors-navy-200)",
-    "navy-300": "var(--colors-navy-300)",
-    "navy-400": "var(--colors-navy-400)",
-    "navy-500": "var(--colors-navy-500)",
-    "navy-600": "var(--colors-navy-600)",
-    "navy-700": "var(--colors-navy-700)",
-    "navy-800": "var(--colors-navy-800)",
-    "navy-900": "var(--colors-navy-900)",
-    "orange": "var(--colors-orange)",
-    "orange-100": "var(--colors-orange-100)",
-    "orange-500": "var(--colors-orange-500)",
-    "paleBlue": "var(--colors-paleBlue)",
-    "paleGreen": "var(--colors-paleGreen)",
-    "palePink": "var(--colors-palePink)",
-    "paleRed": "var(--colors-paleRed)",
-    "paleYellow": "var(--colors-paleYellow)",
-    "percipioActionDangerHover": "var(--colors-percipioActionDangerHover)",
-    "percipioActionPrimaryHover": "var(--colors-percipioActionPrimaryHover)",
-    "percipioActionSecondary": "var(--colors-percipioActionSecondary)",
-    "percipioActionSecondaryHover": "var(--colors-percipioActionSecondaryHover)",
-    "percipioBgError": "var(--colors-percipioBgError)",
-    "percipioBgPrimary": "var(--colors-percipioBgPrimary)",
-    "percipioBgSuccess": "var(--colors-percipioBgSuccess)",
-    "percipioBgWarning": "var(--colors-percipioBgWarning)",
-    "percipioDanger": "var(--colors-percipioDanger)",
-    "percipioFeedbackSuccess": "var(--colors-percipioFeedbackSuccess)",
-    "percipioFeedbackWarning": "var(--colors-percipioFeedbackWarning)",
-    "percipioTextAccent": "var(--colors-percipioTextAccent)",
-    "percipioTextDisabled": "var(--colors-percipioTextDisabled)",
-    "percipioTextPrimary": "var(--colors-percipioTextPrimary)",
-    "percipioTextSecondary": "var(--colors-percipioTextSecondary)",
-    "pink": "var(--colors-pink)",
-    "pink-0": "var(--colors-pink-0)",
-    "pink-400": "var(--colors-pink-400)",
-    "primary": "var(--colors-primary)",
-    "primary-hover": "var(--colors-primary-hover)",
-    "primary-inverse": "var(--colors-primary-inverse)",
-    "red": "var(--colors-red)",
-    "red-0": "var(--colors-red-0)",
-    "red-300": "var(--colors-red-300)",
-    "red-400": "var(--colors-red-400)",
-    "red-500": "var(--colors-red-500)",
-    "red-600": "var(--colors-red-600)",
-    "red-900": "var(--colors-red-900)",
-    "sapphire": "var(--colors-sapphire)",
-    "secondary": "var(--colors-secondary)",
-    "secondary-hover": "var(--colors-secondary-hover)",
-    "shadow-primary": "var(--colors-shadow-primary)",
-    "shadow-secondary": "var(--colors-shadow-secondary)",
-    "text": "var(--colors-text)",
-    "text-accent": "var(--colors-text-accent)",
-    "text-disabled": "var(--colors-text-disabled)",
-    "text-secondary": "var(--colors-text-secondary)",
-    "white": "var(--colors-white)",
-    "white-100": "var(--colors-white-100)",
-    "white-200": "var(--colors-white-200)",
-    "white-300": "var(--colors-white-300)",
-    "white-400": "var(--colors-white-400)",
-    "white-500": "var(--colors-white-500)",
-    "white-600": "var(--colors-white-600)",
-    "white-700": "var(--colors-white-700)",
-    "yellow": "var(--colors-yellow)",
-    "yellow-0": "var(--colors-yellow-0)",
-    "yellow-400": "var(--colors-yellow-400)",
-    "yellow-500": "var(--colors-yellow-500)",
-    "yellow-900": "var(--colors-yellow-900)",
+    "background": "var(--color-background)",
+    "background-contrast": "var(--color-background-contrast)",
+    "background-current": "var(--color-background-current)",
+    "background-disabled": "var(--color-background-disabled)",
+    "background-error": "var(--color-background-error)",
+    "background-hover": "var(--color-background-hover)",
+    "background-primary": "var(--color-background-primary)",
+    "background-selected": "var(--color-background-selected)",
+    "background-success": "var(--color-background-success)",
+    "background-warning": "var(--color-background-warning)",
+    "beige": "var(--color-beige)",
+    "beige-100": "var(--color-beige-100)",
+    "black": "var(--color-black)",
+    "blue": "var(--color-blue)",
+    "blue-0": "var(--color-blue-0)",
+    "blue-100": "var(--color-blue-100)",
+    "blue-300": "var(--color-blue-300)",
+    "blue-400": "var(--color-blue-400)",
+    "blue-500": "var(--color-blue-500)",
+    "blue-800": "var(--color-blue-800)",
+    "border-disabled": "var(--color-border-disabled)",
+    "border-primary": "var(--color-border-primary)",
+    "border-secondary": "var(--color-border-secondary)",
+    "border-tertiary": "var(--color-border-tertiary)",
+    "danger": "var(--color-danger)",
+    "danger-hover": "var(--color-danger-hover)",
+    "feedback-error": "var(--color-feedback-error)",
+    "feedback-success": "var(--color-feedback-success)",
+    "feedback-warning": "var(--color-feedback-warning)",
+    "gray-100": "var(--color-gray-100)",
+    "gray-200": "var(--color-gray-200)",
+    "gray-300": "var(--color-gray-300)",
+    "gray-600": "var(--color-gray-600)",
+    "gray-800": "var(--color-gray-800)",
+    "gray-900": "var(--color-gray-900)",
+    "green": "var(--color-green)",
+    "green-0": "var(--color-green-0)",
+    "green-100": "var(--color-green-100)",
+    "green-400": "var(--color-green-400)",
+    "green-700": "var(--color-green-700)",
+    "green-900": "var(--color-green-900)",
+    "hyper": "var(--color-hyper)",
+    "hyper-400": "var(--color-hyper-400)",
+    "hyper-500": "var(--color-hyper-500)",
+    "interface": "var(--color-interface)",
+    "interface-hover": "var(--color-interface-hover)",
+    "lightBlue": "var(--color-lightBlue)",
+    "lightGreen": "var(--color-lightGreen)",
+    "navy": "var(--color-navy)",
+    "navy-100": "var(--color-navy-100)",
+    "navy-200": "var(--color-navy-200)",
+    "navy-300": "var(--color-navy-300)",
+    "navy-400": "var(--color-navy-400)",
+    "navy-500": "var(--color-navy-500)",
+    "navy-600": "var(--color-navy-600)",
+    "navy-700": "var(--color-navy-700)",
+    "navy-800": "var(--color-navy-800)",
+    "navy-900": "var(--color-navy-900)",
+    "orange": "var(--color-orange)",
+    "orange-100": "var(--color-orange-100)",
+    "orange-500": "var(--color-orange-500)",
+    "paleBlue": "var(--color-paleBlue)",
+    "paleGreen": "var(--color-paleGreen)",
+    "palePink": "var(--color-palePink)",
+    "paleRed": "var(--color-paleRed)",
+    "paleYellow": "var(--color-paleYellow)",
+    "percipioActionDangerHover": "var(--color-percipioActionDangerHover)",
+    "percipioActionPrimaryHover": "var(--color-percipioActionPrimaryHover)",
+    "percipioActionSecondary": "var(--color-percipioActionSecondary)",
+    "percipioActionSecondaryHover": "var(--color-percipioActionSecondaryHover)",
+    "percipioBgError": "var(--color-percipioBgError)",
+    "percipioBgPrimary": "var(--color-percipioBgPrimary)",
+    "percipioBgSuccess": "var(--color-percipioBgSuccess)",
+    "percipioBgWarning": "var(--color-percipioBgWarning)",
+    "percipioDanger": "var(--color-percipioDanger)",
+    "percipioFeedbackSuccess": "var(--color-percipioFeedbackSuccess)",
+    "percipioFeedbackWarning": "var(--color-percipioFeedbackWarning)",
+    "percipioTextAccent": "var(--color-percipioTextAccent)",
+    "percipioTextDisabled": "var(--color-percipioTextDisabled)",
+    "percipioTextPrimary": "var(--color-percipioTextPrimary)",
+    "percipioTextSecondary": "var(--color-percipioTextSecondary)",
+    "pink": "var(--color-pink)",
+    "pink-0": "var(--color-pink-0)",
+    "pink-400": "var(--color-pink-400)",
+    "primary": "var(--color-primary)",
+    "primary-hover": "var(--color-primary-hover)",
+    "primary-inverse": "var(--color-primary-inverse)",
+    "red": "var(--color-red)",
+    "red-0": "var(--color-red-0)",
+    "red-300": "var(--color-red-300)",
+    "red-400": "var(--color-red-400)",
+    "red-500": "var(--color-red-500)",
+    "red-600": "var(--color-red-600)",
+    "red-900": "var(--color-red-900)",
+    "sapphire": "var(--color-sapphire)",
+    "secondary": "var(--color-secondary)",
+    "secondary-hover": "var(--color-secondary-hover)",
+    "shadow-primary": "var(--color-shadow-primary)",
+    "shadow-secondary": "var(--color-shadow-secondary)",
+    "text": "var(--color-text)",
+    "text-accent": "var(--color-text-accent)",
+    "text-disabled": "var(--color-text-disabled)",
+    "text-secondary": "var(--color-text-secondary)",
+    "white": "var(--color-white)",
+    "white-100": "var(--color-white-100)",
+    "white-200": "var(--color-white-200)",
+    "white-300": "var(--color-white-300)",
+    "white-400": "var(--color-white-400)",
+    "white-500": "var(--color-white-500)",
+    "white-600": "var(--color-white-600)",
+    "white-700": "var(--color-white-700)",
+    "yellow": "var(--color-yellow)",
+    "yellow-0": "var(--color-yellow-0)",
+    "yellow-400": "var(--color-yellow-400)",
+    "yellow-500": "var(--color-yellow-500)",
+    "yellow-900": "var(--color-yellow-900)",
   },
   "elements": {
     "headerHeight": "var(--elements-headerHeight)",
     "headerZ": "var(--elements-headerZ)",
   },
   "elevation": {
-    "hover-shadow": "0 1px 4px 0 var(--colors-shadow-primary), 0 2px 11px 0 var(--colors-shadow-secondary)",
+    "hover-shadow": "0 1px 4px 0 var(--color-shadow-primary), 0 2px 11px 0 var(--color-shadow-secondary)",
     "hover-transform": "none",
-    "hoverMirrored-shadow": "0 1px 4px 0 var(--colors-shadow-primary), 0 2px 11px 0 var(--colors-shadow-secondary)",
+    "hoverMirrored-shadow": "0 1px 4px 0 var(--color-shadow-primary), 0 2px 11px 0 var(--color-shadow-secondary)",
     "hoverMirrored-transform": "none",
-    "rest-shadow": "0 1px 4px 0 var(--colors-shadow-primary), 0 2px 7px 0 var(--colors-shadow-primary)",
+    "rest-shadow": "0 1px 4px 0 var(--color-shadow-primary), 0 2px 7px 0 var(--color-shadow-primary)",
     "rest-transform": "none",
   },
   "fontFamily": {
@@ -2381,154 +2381,154 @@ exports[`themes platform - theme shape 1`] = `
   },
   "_variables": {
     "mode": {
-      "--colors-background": "var(--colors-navy-800)",
-      "--colors-background-contrast": "var(--colors-black)",
-      "--colors-background-current": "var(--colors-navy-800)",
-      "--colors-background-disabled": "var(--colors-white-200)",
-      "--colors-background-error": "var(--colors-red-900)",
-      "--colors-background-hover": "var(--colors-white-200)",
-      "--colors-background-primary": "var(--colors-navy-900)",
-      "--colors-background-selected": "var(--colors-white-100)",
-      "--colors-background-success": "var(--colors-green-900)",
-      "--colors-background-warning": "var(--colors-yellow-900)",
-      "--colors-border-disabled": "var(--colors-white-500)",
-      "--colors-border-primary": "var(--colors-white)",
-      "--colors-border-secondary": "var(--colors-white-600)",
-      "--colors-border-tertiary": "var(--colors-white-300)",
-      "--colors-danger": "var(--colors-red-300)",
-      "--colors-danger-hover": "var(--colors-red-400)",
-      "--colors-editor-annotation": "var(--colors-red-300)",
-      "--colors-editor-atom": "var(--colors-pink-400)",
-      "--colors-editor-attribute": "var(--colors-green-400)",
-      "--colors-editor-basic": "var(--colors-white)",
-      "--colors-editor-comment": "var(--colors-comment-dark)",
-      "--colors-editor-constant": "var(--colors-orange-500)",
-      "--colors-editor-decoration": "var(--colors-red-300)",
-      "--colors-editor-invalid": "var(--colors-red-300)",
-      "--colors-editor-key": "var(--colors-blue-300)",
-      "--colors-editor-keyword": "var(--colors-purple-300)",
-      "--colors-editor-number": "var(--colors-red-300)",
-      "--colors-editor-operator": "var(--colors-red-300)",
-      "--colors-editor-predefined": "var(--colors-white)",
-      "--colors-editor-property": "var(--colors-red-300)",
-      "--colors-editor-regexp": "var(--colors-green-400)",
-      "--colors-editor-string": "var(--colors-yellow-500)",
-      "--colors-editor-tag": "var(--colors-red-300)",
-      "--colors-editor-text": "var(--colors-orange-500)",
-      "--colors-editor-ui-background": "var(--colors-navy-900)",
-      "--colors-editor-ui-indent-active": "var(--colors-indent-active-dark)",
-      "--colors-editor-ui-indent-inactive": "var(--colors-indent-inactive-dark)",
-      "--colors-editor-ui-line-number-active": "var(--colors-line-number-active-dark)",
-      "--colors-editor-ui-line-number-inactive": "var(--colors-line-number-inactive-dark)",
-      "--colors-editor-ui-text": "var(--colors-white)",
-      "--colors-editor-value": "var(--colors-yellow-500)",
-      "--colors-editor-variable": "var(--colors-green-400)",
-      "--colors-feedback-error": "var(--colors-red-300)",
-      "--colors-feedback-success": "var(--colors-green-400)",
-      "--colors-feedback-warning": "var(--colors-yellow-0)",
-      "--colors-interface": "var(--colors-yellow-500)",
-      "--colors-interface-hover": "var(--colors-yellow-400)",
-      "--colors-primary": "var(--colors-yellow-500)",
-      "--colors-primary-hover": "var(--colors-yellow-400)",
-      "--colors-primary-inverse": "var(--colors-hyper-500)",
-      "--colors-secondary": "var(--colors-white)",
-      "--colors-secondary-hover": "var(--colors-white-700)",
-      "--colors-shadow-primary": "var(--colors-white)",
-      "--colors-shadow-secondary": "var(--colors-white-600)",
-      "--colors-text": "var(--colors-white)",
-      "--colors-text-accent": "var(--colors-beige)",
-      "--colors-text-disabled": "var(--colors-white-500)",
-      "--colors-text-secondary": "var(--colors-white-600)",
+      "--color-background": "var(--color-navy-800)",
+      "--color-background-contrast": "var(--color-black)",
+      "--color-background-current": "var(--color-navy-800)",
+      "--color-background-disabled": "var(--color-white-200)",
+      "--color-background-error": "var(--color-red-900)",
+      "--color-background-hover": "var(--color-white-200)",
+      "--color-background-primary": "var(--color-navy-900)",
+      "--color-background-selected": "var(--color-white-100)",
+      "--color-background-success": "var(--color-green-900)",
+      "--color-background-warning": "var(--color-yellow-900)",
+      "--color-border-disabled": "var(--color-white-500)",
+      "--color-border-primary": "var(--color-white)",
+      "--color-border-secondary": "var(--color-white-600)",
+      "--color-border-tertiary": "var(--color-white-300)",
+      "--color-danger": "var(--color-red-300)",
+      "--color-danger-hover": "var(--color-red-400)",
+      "--color-editor-annotation": "var(--color-red-300)",
+      "--color-editor-atom": "var(--color-pink-400)",
+      "--color-editor-attribute": "var(--color-green-400)",
+      "--color-editor-basic": "var(--color-white)",
+      "--color-editor-comment": "var(--color-comment-dark)",
+      "--color-editor-constant": "var(--color-orange-500)",
+      "--color-editor-decoration": "var(--color-red-300)",
+      "--color-editor-invalid": "var(--color-red-300)",
+      "--color-editor-key": "var(--color-blue-300)",
+      "--color-editor-keyword": "var(--color-purple-300)",
+      "--color-editor-number": "var(--color-red-300)",
+      "--color-editor-operator": "var(--color-red-300)",
+      "--color-editor-predefined": "var(--color-white)",
+      "--color-editor-property": "var(--color-red-300)",
+      "--color-editor-regexp": "var(--color-green-400)",
+      "--color-editor-string": "var(--color-yellow-500)",
+      "--color-editor-tag": "var(--color-red-300)",
+      "--color-editor-text": "var(--color-orange-500)",
+      "--color-editor-ui-background": "var(--color-navy-900)",
+      "--color-editor-ui-indent-active": "var(--color-indent-active-dark)",
+      "--color-editor-ui-indent-inactive": "var(--color-indent-inactive-dark)",
+      "--color-editor-ui-line-number-active": "var(--color-line-number-active-dark)",
+      "--color-editor-ui-line-number-inactive": "var(--color-line-number-inactive-dark)",
+      "--color-editor-ui-text": "var(--color-white)",
+      "--color-editor-value": "var(--color-yellow-500)",
+      "--color-editor-variable": "var(--color-green-400)",
+      "--color-feedback-error": "var(--color-red-300)",
+      "--color-feedback-success": "var(--color-green-400)",
+      "--color-feedback-warning": "var(--color-yellow-0)",
+      "--color-interface": "var(--color-yellow-500)",
+      "--color-interface-hover": "var(--color-yellow-400)",
+      "--color-primary": "var(--color-yellow-500)",
+      "--color-primary-hover": "var(--color-yellow-400)",
+      "--color-primary-inverse": "var(--color-hyper-500)",
+      "--color-secondary": "var(--color-white)",
+      "--color-secondary-hover": "var(--color-white-700)",
+      "--color-shadow-primary": "var(--color-white)",
+      "--color-shadow-secondary": "var(--color-white-600)",
+      "--color-text": "var(--color-white)",
+      "--color-text-accent": "var(--color-beige)",
+      "--color-text-disabled": "var(--color-white-500)",
+      "--color-text-secondary": "var(--color-white-600)",
     },
     "root": {
-      "--colors-beige": "#FFF0E5",
-      "--colors-beige-0": "#FFFBF8",
-      "--colors-beige-100": "#FFF0E5",
-      "--colors-black": "#000000",
-      "--colors-blue": "#1557FF",
-      "--colors-blue-0": "#F5FCFF",
-      "--colors-blue-100": "#D3F2FF",
-      "--colors-blue-300": "#66C4FF",
-      "--colors-blue-400": "#3388FF",
-      "--colors-blue-500": "#1557FF",
-      "--colors-blue-800": "#1D2340",
-      "--colors-comment-dark": "#84868D",
-      "--colors-comment-light": "#686C7B",
-      "--colors-gold": "#8A7300",
-      "--colors-gold-800": "#8A7300",
-      "--colors-gray-100": "#F5F5F5",
-      "--colors-gray-200": "#EEEEEE",
-      "--colors-gray-300": "#E0E0E0",
-      "--colors-gray-600": "#9E9E9E",
-      "--colors-gray-800": "#616161",
-      "--colors-gray-900": "#424242",
-      "--colors-green": "#008A27",
-      "--colors-green-0": "#F5FFE3",
-      "--colors-green-100": "#EAFDC6",
-      "--colors-green-400": "#AEE938",
-      "--colors-green-700": "#008A27",
-      "--colors-green-900": "#151C07",
-      "--colors-hyper": "#3A10E5",
-      "--colors-hyper-400": "#5533FF",
-      "--colors-hyper-500": "#3A10E5",
-      "--colors-indent-active-dark": "#3B3D49",
-      "--colors-indent-active-light": "#BCBDC4",
-      "--colors-indent-inactive-dark": "#5F616B",
-      "--colors-indent-inactive-light": "#8E919D",
-      "--colors-lightBeige": "#FFFBF8",
-      "--colors-lightBlue": "#66C4FF",
-      "--colors-lightGreen": "#AEE938",
-      "--colors-line-number-active-dark": "#CECFD2",
-      "--colors-line-number-active-light": "#31374C",
-      "--colors-line-number-inactive-dark": "#84868D",
-      "--colors-line-number-inactive-light": "#686C7B",
-      "--colors-navy": "#10162F",
-      "--colors-navy-100": "rgba(16,22,47,0.04)",
-      "--colors-navy-200": "rgba(16,22,47,0.12)",
-      "--colors-navy-300": "rgba(16,22,47,0.28)",
-      "--colors-navy-400": "rgba(16,22,47,0.47)",
-      "--colors-navy-500": "rgba(16,22,47,0.63)",
-      "--colors-navy-600": "rgba(16,22,47,0.75)",
-      "--colors-navy-700": "rgba(16,22,47,0.86)",
-      "--colors-navy-800": "#10162F",
-      "--colors-navy-900": "#0A0D1C",
-      "--colors-orange": "#FF8C00",
-      "--colors-orange-100": "#FFE8CC",
-      "--colors-orange-500": "#FF8C00",
-      "--colors-orange-800": "#D14900",
-      "--colors-paleBlue": "#F5FCFF",
-      "--colors-paleGreen": "#F5FFE3",
-      "--colors-palePink": "#FFF5FF",
-      "--colors-paleRed": "#DC5879",
-      "--colors-paleYellow": "#FFFAE5",
-      "--colors-pink": "#F966FF",
-      "--colors-pink-0": "#FFF5FF",
-      "--colors-pink-400": "#F966FF",
-      "--colors-pink-800": "#CA00D1",
-      "--colors-purple": "#B3CCFF",
-      "--colors-purple-300": "#B3CCFF",
-      "--colors-red": "#E91C11",
-      "--colors-red-0": "#FBF1F0",
-      "--colors-red-300": "#E85D7F",
-      "--colors-red-400": "#DC5879",
-      "--colors-red-500": "#E91C11",
-      "--colors-red-600": "#BE1809",
-      "--colors-red-900": "#280503",
-      "--colors-teal": "#006D82",
-      "--colors-teal-500": "#006D82",
-      "--colors-white": "#ffffff",
-      "--colors-white-100": "rgba(255,255,255,0.04)",
-      "--colors-white-200": "rgba(255,255,255,0.09)",
-      "--colors-white-300": "rgba(255,255,255,0.2)",
-      "--colors-white-400": "rgba(255,255,255,0.35)",
-      "--colors-white-500": "rgba(255,255,255,0.5)",
-      "--colors-white-600": "rgba(255,255,255,0.65)",
-      "--colors-white-700": "rgba(255,255,255,0.8)",
-      "--colors-yellow": "#FFD300",
-      "--colors-yellow-0": "#FFFAE5",
-      "--colors-yellow-400": "#CCA900",
-      "--colors-yellow-500": "#FFD300",
-      "--colors-yellow-900": "#211B00",
+      "--color-beige": "#FFF0E5",
+      "--color-beige-0": "#FFFBF8",
+      "--color-beige-100": "#FFF0E5",
+      "--color-black": "#000000",
+      "--color-blue": "#1557FF",
+      "--color-blue-0": "#F5FCFF",
+      "--color-blue-100": "#D3F2FF",
+      "--color-blue-300": "#66C4FF",
+      "--color-blue-400": "#3388FF",
+      "--color-blue-500": "#1557FF",
+      "--color-blue-800": "#1D2340",
+      "--color-comment-dark": "#84868D",
+      "--color-comment-light": "#686C7B",
+      "--color-gold": "#8A7300",
+      "--color-gold-800": "#8A7300",
+      "--color-gray-100": "#F5F5F5",
+      "--color-gray-200": "#EEEEEE",
+      "--color-gray-300": "#E0E0E0",
+      "--color-gray-600": "#9E9E9E",
+      "--color-gray-800": "#616161",
+      "--color-gray-900": "#424242",
+      "--color-green": "#008A27",
+      "--color-green-0": "#F5FFE3",
+      "--color-green-100": "#EAFDC6",
+      "--color-green-400": "#AEE938",
+      "--color-green-700": "#008A27",
+      "--color-green-900": "#151C07",
+      "--color-hyper": "#3A10E5",
+      "--color-hyper-400": "#5533FF",
+      "--color-hyper-500": "#3A10E5",
+      "--color-indent-active-dark": "#3B3D49",
+      "--color-indent-active-light": "#BCBDC4",
+      "--color-indent-inactive-dark": "#5F616B",
+      "--color-indent-inactive-light": "#8E919D",
+      "--color-lightBeige": "#FFFBF8",
+      "--color-lightBlue": "#66C4FF",
+      "--color-lightGreen": "#AEE938",
+      "--color-line-number-active-dark": "#CECFD2",
+      "--color-line-number-active-light": "#31374C",
+      "--color-line-number-inactive-dark": "#84868D",
+      "--color-line-number-inactive-light": "#686C7B",
+      "--color-navy": "#10162F",
+      "--color-navy-100": "rgba(16,22,47,0.04)",
+      "--color-navy-200": "rgba(16,22,47,0.12)",
+      "--color-navy-300": "rgba(16,22,47,0.28)",
+      "--color-navy-400": "rgba(16,22,47,0.47)",
+      "--color-navy-500": "rgba(16,22,47,0.63)",
+      "--color-navy-600": "rgba(16,22,47,0.75)",
+      "--color-navy-700": "rgba(16,22,47,0.86)",
+      "--color-navy-800": "#10162F",
+      "--color-navy-900": "#0A0D1C",
+      "--color-orange": "#FF8C00",
+      "--color-orange-100": "#FFE8CC",
+      "--color-orange-500": "#FF8C00",
+      "--color-orange-800": "#D14900",
+      "--color-paleBlue": "#F5FCFF",
+      "--color-paleGreen": "#F5FFE3",
+      "--color-palePink": "#FFF5FF",
+      "--color-paleRed": "#DC5879",
+      "--color-paleYellow": "#FFFAE5",
+      "--color-pink": "#F966FF",
+      "--color-pink-0": "#FFF5FF",
+      "--color-pink-400": "#F966FF",
+      "--color-pink-800": "#CA00D1",
+      "--color-purple": "#B3CCFF",
+      "--color-purple-300": "#B3CCFF",
+      "--color-red": "#E91C11",
+      "--color-red-0": "#FBF1F0",
+      "--color-red-300": "#E85D7F",
+      "--color-red-400": "#DC5879",
+      "--color-red-500": "#E91C11",
+      "--color-red-600": "#BE1809",
+      "--color-red-900": "#280503",
+      "--color-teal": "#006D82",
+      "--color-teal-500": "#006D82",
+      "--color-white": "#ffffff",
+      "--color-white-100": "rgba(255,255,255,0.04)",
+      "--color-white-200": "rgba(255,255,255,0.09)",
+      "--color-white-300": "rgba(255,255,255,0.2)",
+      "--color-white-400": "rgba(255,255,255,0.35)",
+      "--color-white-500": "rgba(255,255,255,0.5)",
+      "--color-white-600": "rgba(255,255,255,0.65)",
+      "--color-white-700": "rgba(255,255,255,0.8)",
+      "--color-yellow": "#FFD300",
+      "--color-yellow-0": "#FFFAE5",
+      "--color-yellow-400": "#CCA900",
+      "--color-yellow-500": "#FFD300",
+      "--color-yellow-900": "#211B00",
       "--elements-headerHeight": "4rem",
       "--elements-headerZ": 15,
       "@media only screen and (min-width: 1024px)": {
@@ -2545,8 +2545,8 @@ exports[`themes platform - theme shape 1`] = `
     "xl": "16px",
   },
   "borders": {
-    "1": "1px solid var(--colors-border-primary)",
-    "2": "2px solid var(--colors-border-primary)",
+    "1": "1px solid var(--color-border-primary)",
+    "2": "2px solid var(--color-border-primary)",
   },
   "breakpoints": {
     "c_base": "@container (min-width: 1px)",
@@ -2562,163 +2562,163 @@ exports[`themes platform - theme shape 1`] = `
     "xs": "@media only screen and (min-width: 480px)",
   },
   "colors": {
-    "background": "var(--colors-background)",
-    "background-contrast": "var(--colors-background-contrast)",
-    "background-current": "var(--colors-background-current)",
-    "background-disabled": "var(--colors-background-disabled)",
-    "background-error": "var(--colors-background-error)",
-    "background-hover": "var(--colors-background-hover)",
-    "background-primary": "var(--colors-background-primary)",
-    "background-selected": "var(--colors-background-selected)",
-    "background-success": "var(--colors-background-success)",
-    "background-warning": "var(--colors-background-warning)",
-    "beige": "var(--colors-beige)",
-    "beige-0": "var(--colors-beige-0)",
-    "beige-100": "var(--colors-beige-100)",
-    "black": "var(--colors-black)",
-    "blue": "var(--colors-blue)",
-    "blue-0": "var(--colors-blue-0)",
-    "blue-100": "var(--colors-blue-100)",
-    "blue-300": "var(--colors-blue-300)",
-    "blue-400": "var(--colors-blue-400)",
-    "blue-500": "var(--colors-blue-500)",
-    "blue-800": "var(--colors-blue-800)",
-    "border-disabled": "var(--colors-border-disabled)",
-    "border-primary": "var(--colors-border-primary)",
-    "border-secondary": "var(--colors-border-secondary)",
-    "border-tertiary": "var(--colors-border-tertiary)",
-    "comment-dark": "var(--colors-comment-dark)",
-    "comment-light": "var(--colors-comment-light)",
-    "danger": "var(--colors-danger)",
-    "danger-hover": "var(--colors-danger-hover)",
-    "editor-annotation": "var(--colors-editor-annotation)",
-    "editor-atom": "var(--colors-editor-atom)",
-    "editor-attribute": "var(--colors-editor-attribute)",
-    "editor-basic": "var(--colors-editor-basic)",
-    "editor-comment": "var(--colors-editor-comment)",
-    "editor-constant": "var(--colors-editor-constant)",
-    "editor-decoration": "var(--colors-editor-decoration)",
-    "editor-invalid": "var(--colors-editor-invalid)",
-    "editor-key": "var(--colors-editor-key)",
-    "editor-keyword": "var(--colors-editor-keyword)",
-    "editor-number": "var(--colors-editor-number)",
-    "editor-operator": "var(--colors-editor-operator)",
-    "editor-predefined": "var(--colors-editor-predefined)",
-    "editor-property": "var(--colors-editor-property)",
-    "editor-regexp": "var(--colors-editor-regexp)",
-    "editor-string": "var(--colors-editor-string)",
-    "editor-tag": "var(--colors-editor-tag)",
-    "editor-text": "var(--colors-editor-text)",
-    "editor-ui-background": "var(--colors-editor-ui-background)",
-    "editor-ui-indent-active": "var(--colors-editor-ui-indent-active)",
-    "editor-ui-indent-inactive": "var(--colors-editor-ui-indent-inactive)",
-    "editor-ui-line-number-active": "var(--colors-editor-ui-line-number-active)",
-    "editor-ui-line-number-inactive": "var(--colors-editor-ui-line-number-inactive)",
-    "editor-ui-text": "var(--colors-editor-ui-text)",
-    "editor-value": "var(--colors-editor-value)",
-    "editor-variable": "var(--colors-editor-variable)",
-    "feedback-error": "var(--colors-feedback-error)",
-    "feedback-success": "var(--colors-feedback-success)",
-    "feedback-warning": "var(--colors-feedback-warning)",
-    "gold": "var(--colors-gold)",
-    "gold-800": "var(--colors-gold-800)",
-    "gray-100": "var(--colors-gray-100)",
-    "gray-200": "var(--colors-gray-200)",
-    "gray-300": "var(--colors-gray-300)",
-    "gray-600": "var(--colors-gray-600)",
-    "gray-800": "var(--colors-gray-800)",
-    "gray-900": "var(--colors-gray-900)",
-    "green": "var(--colors-green)",
-    "green-0": "var(--colors-green-0)",
-    "green-100": "var(--colors-green-100)",
-    "green-400": "var(--colors-green-400)",
-    "green-700": "var(--colors-green-700)",
-    "green-900": "var(--colors-green-900)",
-    "hyper": "var(--colors-hyper)",
-    "hyper-400": "var(--colors-hyper-400)",
-    "hyper-500": "var(--colors-hyper-500)",
-    "indent-active-dark": "var(--colors-indent-active-dark)",
-    "indent-active-light": "var(--colors-indent-active-light)",
-    "indent-inactive-dark": "var(--colors-indent-inactive-dark)",
-    "indent-inactive-light": "var(--colors-indent-inactive-light)",
-    "interface": "var(--colors-interface)",
-    "interface-hover": "var(--colors-interface-hover)",
-    "lightBeige": "var(--colors-lightBeige)",
-    "lightBlue": "var(--colors-lightBlue)",
-    "lightGreen": "var(--colors-lightGreen)",
-    "line-number-active-dark": "var(--colors-line-number-active-dark)",
-    "line-number-active-light": "var(--colors-line-number-active-light)",
-    "line-number-inactive-dark": "var(--colors-line-number-inactive-dark)",
-    "line-number-inactive-light": "var(--colors-line-number-inactive-light)",
-    "navy": "var(--colors-navy)",
-    "navy-100": "var(--colors-navy-100)",
-    "navy-200": "var(--colors-navy-200)",
-    "navy-300": "var(--colors-navy-300)",
-    "navy-400": "var(--colors-navy-400)",
-    "navy-500": "var(--colors-navy-500)",
-    "navy-600": "var(--colors-navy-600)",
-    "navy-700": "var(--colors-navy-700)",
-    "navy-800": "var(--colors-navy-800)",
-    "navy-900": "var(--colors-navy-900)",
-    "orange": "var(--colors-orange)",
-    "orange-100": "var(--colors-orange-100)",
-    "orange-500": "var(--colors-orange-500)",
-    "orange-800": "var(--colors-orange-800)",
-    "paleBlue": "var(--colors-paleBlue)",
-    "paleGreen": "var(--colors-paleGreen)",
-    "palePink": "var(--colors-palePink)",
-    "paleRed": "var(--colors-paleRed)",
-    "paleYellow": "var(--colors-paleYellow)",
-    "pink": "var(--colors-pink)",
-    "pink-0": "var(--colors-pink-0)",
-    "pink-400": "var(--colors-pink-400)",
-    "pink-800": "var(--colors-pink-800)",
-    "primary": "var(--colors-primary)",
-    "primary-hover": "var(--colors-primary-hover)",
-    "primary-inverse": "var(--colors-primary-inverse)",
-    "purple": "var(--colors-purple)",
-    "purple-300": "var(--colors-purple-300)",
-    "red": "var(--colors-red)",
-    "red-0": "var(--colors-red-0)",
-    "red-300": "var(--colors-red-300)",
-    "red-400": "var(--colors-red-400)",
-    "red-500": "var(--colors-red-500)",
-    "red-600": "var(--colors-red-600)",
-    "red-900": "var(--colors-red-900)",
-    "secondary": "var(--colors-secondary)",
-    "secondary-hover": "var(--colors-secondary-hover)",
-    "shadow-primary": "var(--colors-shadow-primary)",
-    "shadow-secondary": "var(--colors-shadow-secondary)",
-    "teal": "var(--colors-teal)",
-    "teal-500": "var(--colors-teal-500)",
-    "text": "var(--colors-text)",
-    "text-accent": "var(--colors-text-accent)",
-    "text-disabled": "var(--colors-text-disabled)",
-    "text-secondary": "var(--colors-text-secondary)",
-    "white": "var(--colors-white)",
-    "white-100": "var(--colors-white-100)",
-    "white-200": "var(--colors-white-200)",
-    "white-300": "var(--colors-white-300)",
-    "white-400": "var(--colors-white-400)",
-    "white-500": "var(--colors-white-500)",
-    "white-600": "var(--colors-white-600)",
-    "white-700": "var(--colors-white-700)",
-    "yellow": "var(--colors-yellow)",
-    "yellow-0": "var(--colors-yellow-0)",
-    "yellow-400": "var(--colors-yellow-400)",
-    "yellow-500": "var(--colors-yellow-500)",
-    "yellow-900": "var(--colors-yellow-900)",
+    "background": "var(--color-background)",
+    "background-contrast": "var(--color-background-contrast)",
+    "background-current": "var(--color-background-current)",
+    "background-disabled": "var(--color-background-disabled)",
+    "background-error": "var(--color-background-error)",
+    "background-hover": "var(--color-background-hover)",
+    "background-primary": "var(--color-background-primary)",
+    "background-selected": "var(--color-background-selected)",
+    "background-success": "var(--color-background-success)",
+    "background-warning": "var(--color-background-warning)",
+    "beige": "var(--color-beige)",
+    "beige-0": "var(--color-beige-0)",
+    "beige-100": "var(--color-beige-100)",
+    "black": "var(--color-black)",
+    "blue": "var(--color-blue)",
+    "blue-0": "var(--color-blue-0)",
+    "blue-100": "var(--color-blue-100)",
+    "blue-300": "var(--color-blue-300)",
+    "blue-400": "var(--color-blue-400)",
+    "blue-500": "var(--color-blue-500)",
+    "blue-800": "var(--color-blue-800)",
+    "border-disabled": "var(--color-border-disabled)",
+    "border-primary": "var(--color-border-primary)",
+    "border-secondary": "var(--color-border-secondary)",
+    "border-tertiary": "var(--color-border-tertiary)",
+    "comment-dark": "var(--color-comment-dark)",
+    "comment-light": "var(--color-comment-light)",
+    "danger": "var(--color-danger)",
+    "danger-hover": "var(--color-danger-hover)",
+    "editor-annotation": "var(--color-editor-annotation)",
+    "editor-atom": "var(--color-editor-atom)",
+    "editor-attribute": "var(--color-editor-attribute)",
+    "editor-basic": "var(--color-editor-basic)",
+    "editor-comment": "var(--color-editor-comment)",
+    "editor-constant": "var(--color-editor-constant)",
+    "editor-decoration": "var(--color-editor-decoration)",
+    "editor-invalid": "var(--color-editor-invalid)",
+    "editor-key": "var(--color-editor-key)",
+    "editor-keyword": "var(--color-editor-keyword)",
+    "editor-number": "var(--color-editor-number)",
+    "editor-operator": "var(--color-editor-operator)",
+    "editor-predefined": "var(--color-editor-predefined)",
+    "editor-property": "var(--color-editor-property)",
+    "editor-regexp": "var(--color-editor-regexp)",
+    "editor-string": "var(--color-editor-string)",
+    "editor-tag": "var(--color-editor-tag)",
+    "editor-text": "var(--color-editor-text)",
+    "editor-ui-background": "var(--color-editor-ui-background)",
+    "editor-ui-indent-active": "var(--color-editor-ui-indent-active)",
+    "editor-ui-indent-inactive": "var(--color-editor-ui-indent-inactive)",
+    "editor-ui-line-number-active": "var(--color-editor-ui-line-number-active)",
+    "editor-ui-line-number-inactive": "var(--color-editor-ui-line-number-inactive)",
+    "editor-ui-text": "var(--color-editor-ui-text)",
+    "editor-value": "var(--color-editor-value)",
+    "editor-variable": "var(--color-editor-variable)",
+    "feedback-error": "var(--color-feedback-error)",
+    "feedback-success": "var(--color-feedback-success)",
+    "feedback-warning": "var(--color-feedback-warning)",
+    "gold": "var(--color-gold)",
+    "gold-800": "var(--color-gold-800)",
+    "gray-100": "var(--color-gray-100)",
+    "gray-200": "var(--color-gray-200)",
+    "gray-300": "var(--color-gray-300)",
+    "gray-600": "var(--color-gray-600)",
+    "gray-800": "var(--color-gray-800)",
+    "gray-900": "var(--color-gray-900)",
+    "green": "var(--color-green)",
+    "green-0": "var(--color-green-0)",
+    "green-100": "var(--color-green-100)",
+    "green-400": "var(--color-green-400)",
+    "green-700": "var(--color-green-700)",
+    "green-900": "var(--color-green-900)",
+    "hyper": "var(--color-hyper)",
+    "hyper-400": "var(--color-hyper-400)",
+    "hyper-500": "var(--color-hyper-500)",
+    "indent-active-dark": "var(--color-indent-active-dark)",
+    "indent-active-light": "var(--color-indent-active-light)",
+    "indent-inactive-dark": "var(--color-indent-inactive-dark)",
+    "indent-inactive-light": "var(--color-indent-inactive-light)",
+    "interface": "var(--color-interface)",
+    "interface-hover": "var(--color-interface-hover)",
+    "lightBeige": "var(--color-lightBeige)",
+    "lightBlue": "var(--color-lightBlue)",
+    "lightGreen": "var(--color-lightGreen)",
+    "line-number-active-dark": "var(--color-line-number-active-dark)",
+    "line-number-active-light": "var(--color-line-number-active-light)",
+    "line-number-inactive-dark": "var(--color-line-number-inactive-dark)",
+    "line-number-inactive-light": "var(--color-line-number-inactive-light)",
+    "navy": "var(--color-navy)",
+    "navy-100": "var(--color-navy-100)",
+    "navy-200": "var(--color-navy-200)",
+    "navy-300": "var(--color-navy-300)",
+    "navy-400": "var(--color-navy-400)",
+    "navy-500": "var(--color-navy-500)",
+    "navy-600": "var(--color-navy-600)",
+    "navy-700": "var(--color-navy-700)",
+    "navy-800": "var(--color-navy-800)",
+    "navy-900": "var(--color-navy-900)",
+    "orange": "var(--color-orange)",
+    "orange-100": "var(--color-orange-100)",
+    "orange-500": "var(--color-orange-500)",
+    "orange-800": "var(--color-orange-800)",
+    "paleBlue": "var(--color-paleBlue)",
+    "paleGreen": "var(--color-paleGreen)",
+    "palePink": "var(--color-palePink)",
+    "paleRed": "var(--color-paleRed)",
+    "paleYellow": "var(--color-paleYellow)",
+    "pink": "var(--color-pink)",
+    "pink-0": "var(--color-pink-0)",
+    "pink-400": "var(--color-pink-400)",
+    "pink-800": "var(--color-pink-800)",
+    "primary": "var(--color-primary)",
+    "primary-hover": "var(--color-primary-hover)",
+    "primary-inverse": "var(--color-primary-inverse)",
+    "purple": "var(--color-purple)",
+    "purple-300": "var(--color-purple-300)",
+    "red": "var(--color-red)",
+    "red-0": "var(--color-red-0)",
+    "red-300": "var(--color-red-300)",
+    "red-400": "var(--color-red-400)",
+    "red-500": "var(--color-red-500)",
+    "red-600": "var(--color-red-600)",
+    "red-900": "var(--color-red-900)",
+    "secondary": "var(--color-secondary)",
+    "secondary-hover": "var(--color-secondary-hover)",
+    "shadow-primary": "var(--color-shadow-primary)",
+    "shadow-secondary": "var(--color-shadow-secondary)",
+    "teal": "var(--color-teal)",
+    "teal-500": "var(--color-teal-500)",
+    "text": "var(--color-text)",
+    "text-accent": "var(--color-text-accent)",
+    "text-disabled": "var(--color-text-disabled)",
+    "text-secondary": "var(--color-text-secondary)",
+    "white": "var(--color-white)",
+    "white-100": "var(--color-white-100)",
+    "white-200": "var(--color-white-200)",
+    "white-300": "var(--color-white-300)",
+    "white-400": "var(--color-white-400)",
+    "white-500": "var(--color-white-500)",
+    "white-600": "var(--color-white-600)",
+    "white-700": "var(--color-white-700)",
+    "yellow": "var(--color-yellow)",
+    "yellow-0": "var(--color-yellow-0)",
+    "yellow-400": "var(--color-yellow-400)",
+    "yellow-500": "var(--color-yellow-500)",
+    "yellow-900": "var(--color-yellow-900)",
   },
   "elements": {
     "headerHeight": "var(--elements-headerHeight)",
     "headerZ": "var(--elements-headerZ)",
   },
   "elevation": {
-    "hover-shadow": "-8px 8px 0 0 var(--colors-shadow-primary)",
+    "hover-shadow": "-8px 8px 0 0 var(--color-shadow-primary)",
     "hover-transform": "translate(4px, -4px)",
-    "hoverMirrored-shadow": "8px 8px 0 0 var(--colors-shadow-primary)",
+    "hoverMirrored-shadow": "8px 8px 0 0 var(--color-shadow-primary)",
     "hoverMirrored-transform": "translate(-4px, -4px)",
-    "rest-shadow": "0 0 0 0 var(--colors-shadow-primary)",
+    "rest-shadow": "0 0 0 0 var(--color-shadow-primary)",
     "rest-transform": "none",
   },
   "fontFamily": {
diff --git a/packages/gamut-styles/src/themes/__tests__/brandElevation.test.ts b/packages/gamut-styles/src/themes/__tests__/brandElevation.test.ts
index 614ca9ab22..6df0e5a220 100644
--- a/packages/gamut-styles/src/themes/__tests__/brandElevation.test.ts
+++ b/packages/gamut-styles/src/themes/__tests__/brandElevation.test.ts
@@ -17,26 +17,26 @@ describe('brand elevation', () => {
     for (const state of STATES) {
       const shadow = elevation[`${state}-shadow`];
       expect(shadow).not.toContain('undefined');
-      expect(shadow).toContain('var(--colors-shadow-key)');
-      expect(shadow).toContain('var(--colors-shadow-ambient)');
+      expect(shadow).toContain('var(--color-shadow-key)');
+      expect(shadow).toContain('var(--color-shadow-ambient)');
     }
   });
 
   it('gives Skillsoft the soft raised shadow', () => {
     expect(skillsoftTheme.elevation).toMatchObject({
       'rest-shadow':
-        '0 1px 4px 0 var(--colors-shadow-key), 0 2px 7px 0 var(--colors-shadow-ambient)',
+        '0 1px 4px 0 var(--color-shadow-key), 0 2px 7px 0 var(--color-shadow-ambient)',
       'hover-shadow':
-        '0 2px 6px 0 var(--colors-shadow-key), 0 6px 16px 0 var(--colors-shadow-ambient)',
+        '0 2px 6px 0 var(--color-shadow-key), 0 6px 16px 0 var(--color-shadow-ambient)',
     });
   });
 
   it("gives Original Codecademy old core's hard offset", () => {
     expect(originalCodecademyTheme.elevation).toMatchObject({
       'rest-shadow':
-        '-4px 4px 0 0 var(--colors-shadow-key), 0 0 0 0 var(--colors-shadow-ambient)',
+        '-4px 4px 0 0 var(--color-shadow-key), 0 0 0 0 var(--color-shadow-ambient)',
       'hover-shadow':
-        '-8px 8px 0 0 var(--colors-shadow-key), 0 0 0 0 var(--colors-shadow-ambient)',
+        '-8px 8px 0 0 var(--color-shadow-key), 0 0 0 0 var(--color-shadow-ambient)',
       'hover-transform': 'translate(4px, -4px)',
     });
   });
diff --git a/packages/gamut-styles/src/themes/createBrandTheme.ts b/packages/gamut-styles/src/themes/createBrandTheme.ts
index a386071254..ddff9be111 100644
--- a/packages/gamut-styles/src/themes/createBrandTheme.ts
+++ b/packages/gamut-styles/src/themes/createBrandTheme.ts
@@ -88,7 +88,7 @@ export const createBrandTheme = (
    * `tokensCss` for GamutProvider to inject. It holds every brand, keyed on
    * `data-brand`. The theme doesn't also inject the palette as variables, so
    * the OKLCH in tokens.css is what renders. The theme keeps names
-   * (`var(--colors-*)`), `brand` (ColorMode sets it as `data-brand`), and
+   * (`var(--color-*)`), `brand` (ColorMode sets it as `data-brand`), and
    * `contentModes`, which Background reads instead of measuring contrast.
    * `_getColorValue` still returns sRGB for the components that run polished
    * on it (BarChart).
@@ -102,7 +102,7 @@ export const createBrandTheme = (
       ...built._variables,
       root: pickBy(
         built._variables.root,
-        (_, key) => !key.startsWith('--colors-')
+        (_, key) => !key.startsWith('--color-')
       ),
     },
   };
diff --git a/packages/gamut-styles/src/tokens/generated/brands/originalCodecademy.dark.tokens.json b/packages/gamut-styles/src/tokens/generated/brands/originalCodecademy.dark.tokens.json
index 2b54a0ee01..878b6245e5 100644
--- a/packages/gamut-styles/src/tokens/generated/brands/originalCodecademy.dark.tokens.json
+++ b/packages/gamut-styles/src/tokens/generated/brands/originalCodecademy.dark.tokens.json
@@ -76,7 +76,7 @@
             ]
           ],
           "css": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, oklch(0.3346 0.1696 287.1 / 0.45) 0%, oklch(0.3346 0.1696 287.1 / 0.43) 16%, oklch(0.3346 0.1696 287.1 / 0.24) 36%, oklch(0.3346 0.1696 287.1 / 0.11) 56%, oklch(0.3346 0.1696 287.1 / 0.04) 76%, oklch(0.3346 0.1696 287.1 / 0) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, oklch(0.3346 0.1863 274.1 / 0.45) 0%, oklch(0.3346 0.1863 274.1 / 0.43) 16%, oklch(0.3346 0.1863 274.1 / 0.24) 36%, oklch(0.3346 0.1863 274.1 / 0.11) 56%, oklch(0.3346 0.1863 274.1 / 0.04) 76%, oklch(0.3346 0.1863 274.1 / 0) 100%)",
-          "cssVars": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%)"
+          "cssVars": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%)"
         }
       }
     }
@@ -122,7 +122,7 @@
             ]
           ],
           "css": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, oklch(0.3346 0.1863 274.1 / 0.45) 0%, oklch(0.3346 0.1863 274.1 / 0.43) 16%, oklch(0.3346 0.1863 274.1 / 0.24) 36%, oklch(0.3346 0.1863 274.1 / 0.11) 56%, oklch(0.3346 0.1863 274.1 / 0.04) 76%, oklch(0.3346 0.1863 274.1 / 0) 100%)",
-          "cssVars": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%)"
+          "cssVars": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%)"
         }
       }
     }
diff --git a/packages/gamut-styles/src/tokens/generated/brands/originalCodecademy.light.tokens.json b/packages/gamut-styles/src/tokens/generated/brands/originalCodecademy.light.tokens.json
index 26f2d8578a..7c1b689403 100644
--- a/packages/gamut-styles/src/tokens/generated/brands/originalCodecademy.light.tokens.json
+++ b/packages/gamut-styles/src/tokens/generated/brands/originalCodecademy.light.tokens.json
@@ -76,7 +76,7 @@
             ]
           ],
           "css": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, oklch(0.8497 0.043 287.1 / 0.45) 0%, oklch(0.8497 0.043 287.1 / 0.43) 16%, oklch(0.8497 0.043 287.1 / 0.24) 36%, oklch(0.8497 0.043 287.1 / 0.11) 56%, oklch(0.8497 0.043 287.1 / 0.04) 76%, oklch(0.8497 0.043 287.1 / 0) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, oklch(0.8497 0.0408 274.1 / 0.45) 0%, oklch(0.8497 0.0408 274.1 / 0.43) 16%, oklch(0.8497 0.0408 274.1 / 0.24) 36%, oklch(0.8497 0.0408 274.1 / 0.11) 56%, oklch(0.8497 0.0408 274.1 / 0.04) 76%, oklch(0.8497 0.0408 274.1 / 0) 100%)",
-          "cssVars": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%)"
+          "cssVars": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%)"
         }
       }
     }
@@ -122,7 +122,7 @@
             ]
           ],
           "css": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, oklch(0.8497 0.0408 274.1 / 0.45) 0%, oklch(0.8497 0.0408 274.1 / 0.43) 16%, oklch(0.8497 0.0408 274.1 / 0.24) 36%, oklch(0.8497 0.0408 274.1 / 0.11) 56%, oklch(0.8497 0.0408 274.1 / 0.04) 76%, oklch(0.8497 0.0408 274.1 / 0) 100%)",
-          "cssVars": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%)"
+          "cssVars": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%)"
         }
       }
     }
diff --git a/packages/gamut-styles/src/tokens/generated/dark.tokens.json b/packages/gamut-styles/src/tokens/generated/dark.tokens.json
index 7ecfd089c2..79264f3fd5 100644
--- a/packages/gamut-styles/src/tokens/generated/dark.tokens.json
+++ b/packages/gamut-styles/src/tokens/generated/dark.tokens.json
@@ -76,7 +76,7 @@
             ]
           ],
           "css": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, oklch(0.3346 0.1201 357.3 / 0.45) 0%, oklch(0.3346 0.1201 357.3 / 0.43) 16%, oklch(0.3346 0.1201 357.3 / 0.24) 36%, oklch(0.3346 0.1201 357.3 / 0.11) 56%, oklch(0.3346 0.1201 357.3 / 0.04) 76%, oklch(0.3346 0.1201 357.3 / 0) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, oklch(0.3346 0.1405 262.4 / 0.45) 0%, oklch(0.3346 0.1405 262.4 / 0.43) 16%, oklch(0.3346 0.1405 262.4 / 0.24) 36%, oklch(0.3346 0.1405 262.4 / 0.11) 56%, oklch(0.3346 0.1405 262.4 / 0.04) 76%, oklch(0.3346 0.1405 262.4 / 0) 100%)",
-          "cssVars": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%)"
+          "cssVars": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%)"
         }
       }
     }
@@ -122,7 +122,7 @@
             ]
           ],
           "css": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, oklch(0.3346 0.1405 262.4 / 0.45) 0%, oklch(0.3346 0.1405 262.4 / 0.43) 16%, oklch(0.3346 0.1405 262.4 / 0.24) 36%, oklch(0.3346 0.1405 262.4 / 0.11) 56%, oklch(0.3346 0.1405 262.4 / 0.04) 76%, oklch(0.3346 0.1405 262.4 / 0) 100%)",
-          "cssVars": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%)"
+          "cssVars": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%)"
         }
       }
     }
diff --git a/packages/gamut-styles/src/tokens/generated/light.tokens.json b/packages/gamut-styles/src/tokens/generated/light.tokens.json
index 8a85b5d624..d930273da2 100644
--- a/packages/gamut-styles/src/tokens/generated/light.tokens.json
+++ b/packages/gamut-styles/src/tokens/generated/light.tokens.json
@@ -76,7 +76,7 @@
             ]
           ],
           "css": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, oklch(0.8497 0.0499 357.3 / 0.45) 0%, oklch(0.8497 0.0499 357.3 / 0.43) 16%, oklch(0.8497 0.0499 357.3 / 0.24) 36%, oklch(0.8497 0.0499 357.3 / 0.11) 56%, oklch(0.8497 0.0499 357.3 / 0.04) 76%, oklch(0.8497 0.0499 357.3 / 0) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, oklch(0.8497 0.0407 262.4 / 0.45) 0%, oklch(0.8497 0.0407 262.4 / 0.43) 16%, oklch(0.8497 0.0407 262.4 / 0.24) 36%, oklch(0.8497 0.0407 262.4 / 0.11) 56%, oklch(0.8497 0.0407 262.4 / 0.04) 76%, oklch(0.8497 0.0407 262.4 / 0) 100%)",
-          "cssVars": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%)"
+          "cssVars": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%)"
         }
       }
     }
@@ -122,7 +122,7 @@
             ]
           ],
           "css": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, oklch(0.8497 0.0407 262.4 / 0.45) 0%, oklch(0.8497 0.0407 262.4 / 0.43) 16%, oklch(0.8497 0.0407 262.4 / 0.24) 36%, oklch(0.8497 0.0407 262.4 / 0.11) 56%, oklch(0.8497 0.0407 262.4 / 0.04) 76%, oklch(0.8497 0.0407 262.4 / 0) 100%)",
-          "cssVars": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%)"
+          "cssVars": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%)"
         }
       }
     }
diff --git a/packages/gamut-styles/src/tokens/generated/tokens.css b/packages/gamut-styles/src/tokens/generated/tokens.css
index 5a14b93835..3c44d87e3e 100644
--- a/packages/gamut-styles/src/tokens/generated/tokens.css
+++ b/packages/gamut-styles/src/tokens/generated/tokens.css
@@ -3,325 +3,325 @@
 
 @layer tokens {
   :root, [data-brand="skillsoft"] {
-    --colors-white: oklch(1.0000 0.0000 0.00);
-    --colors-black: oklch(0.0000 0.0000 0.00);
-    --colors-palette-neutral-light-100: oklch(0.9862 0.0041 93.70);
-    --colors-palette-neutral-light-200: oklch(0.9364 0.0075 93.70);
-    --colors-palette-neutral-light-300: oklch(0.8497 0.0191 93.70);
-    --colors-palette-neutral-light-400: oklch(0.7628 0.0218 93.70);
-    --colors-palette-neutral-light-500: oklch(0.6707 0.0241 93.70);
-    --colors-palette-neutral-light-600: oklch(0.5835 0.0239 93.70);
-    --colors-palette-neutral-light-700: oklch(0.4972 0.0193 93.70);
-    --colors-palette-neutral-light-800: oklch(0.4115 0.0151 93.70);
-    --colors-palette-neutral-light-900: oklch(0.3346 0.0120 93.70);
-    --colors-palette-neutral-light-1000: oklch(0.2499 0.0086 93.70);
-    --colors-palette-neutral-light-1100: oklch(0.1925 0.0063 93.70);
-    --colors-palette-neutral-dark-100: oklch(0.9862 0.0012 270.70);
-    --colors-palette-neutral-dark-200: oklch(0.9364 0.0024 270.70);
-    --colors-palette-neutral-dark-300: oklch(0.8497 0.0081 270.70);
-    --colors-palette-neutral-dark-400: oklch(0.7628 0.0168 270.70);
-    --colors-palette-neutral-dark-500: oklch(0.6707 0.0305 270.70);
-    --colors-palette-neutral-dark-600: oklch(0.5835 0.0454 270.70);
-    --colors-palette-neutral-dark-700: oklch(0.4972 0.0538 270.70);
-    --colors-palette-neutral-dark-800: oklch(0.4115 0.0482 270.70);
-    --colors-palette-neutral-dark-900: oklch(0.3346 0.0383 270.70);
-    --colors-palette-neutral-dark-1000: oklch(0.2499 0.0273 270.70);
-    --colors-palette-neutral-dark-1100: oklch(0.1925 0.0200 270.70);
-    --colors-palette-neutral-dark-1100-a16: oklch(0.1925 0.0200 270.70 / 0.16);
-    --colors-palette-neutral-dark-1100-a12: oklch(0.1925 0.0200 270.70 / 0.12);
-    --colors-palette-primary-100: oklch(0.9862 0.0064 262.40);
-    --colors-palette-primary-200: oklch(0.9364 0.0121 262.40);
-    --colors-palette-primary-300: oklch(0.8497 0.0407 262.40);
-    --colors-palette-primary-400: oklch(0.7628 0.0846 262.40);
-    --colors-palette-primary-500: oklch(0.6707 0.1531 262.40);
-    --colors-palette-primary-600: oklch(0.5835 0.2274 262.40);
-    --colors-palette-primary-700: oklch(0.4972 0.2254 262.40);
-    --colors-palette-primary-800: oklch(0.4115 0.1767 262.40);
-    --colors-palette-primary-900: oklch(0.3346 0.1405 262.40);
-    --colors-palette-primary-1000: oklch(0.2499 0.1001 262.40);
-    --colors-palette-primary-1100: oklch(0.1925 0.0734 262.40);
-    --colors-palette-primary-600-a6: oklch(0.5835 0.2274 262.40 / 0.06);
-    --colors-palette-primary-600-a9: oklch(0.5835 0.2274 262.40 / 0.09);
-    --colors-palette-primary-600-a8: oklch(0.5835 0.2274 262.40 / 0.08);
-    --colors-palette-accent-100: oklch(0.9862 0.0073 357.30);
-    --colors-palette-accent-200: oklch(0.9364 0.0141 357.30);
-    --colors-palette-accent-300: oklch(0.8497 0.0499 357.30);
-    --colors-palette-accent-400: oklch(0.7628 0.1100 357.30);
-    --colors-palette-accent-500: oklch(0.6707 0.2144 357.30);
-    --colors-palette-accent-600: oklch(0.5835 0.2380 357.30);
-    --colors-palette-accent-700: oklch(0.4972 0.1927 357.30);
-    --colors-palette-accent-800: oklch(0.4115 0.1511 357.30);
-    --colors-palette-accent-900: oklch(0.3346 0.1201 357.30);
-    --colors-palette-accent-1000: oklch(0.2499 0.0856 357.30);
-    --colors-palette-accent-1100: oklch(0.1925 0.0628 357.30);
-    --colors-palette-accent-alt-100: oklch(0.9862 0.0067 287.10);
-    --colors-palette-accent-alt-200: oklch(0.9364 0.0127 287.10);
-    --colors-palette-accent-alt-300: oklch(0.8497 0.0430 287.10);
-    --colors-palette-accent-alt-400: oklch(0.7628 0.0896 287.10);
-    --colors-palette-accent-alt-500: oklch(0.6707 0.1624 287.10);
-    --colors-palette-accent-alt-600: oklch(0.5835 0.2416 287.10);
-    --colors-palette-accent-alt-700: oklch(0.4972 0.2722 287.10);
-    --colors-palette-accent-alt-800: oklch(0.4115 0.2134 287.10);
-    --colors-palette-accent-alt-900: oklch(0.3346 0.1696 287.10);
-    --colors-palette-accent-alt-1000: oklch(0.2499 0.1209 287.10);
-    --colors-palette-accent-alt-1100: oklch(0.1925 0.0887 287.10);
-    --colors-palette-danger-100: oklch(0.9862 0.0066 17.30);
-    --colors-palette-danger-200: oklch(0.9364 0.0128 17.30);
-    --colors-palette-danger-300: oklch(0.8497 0.0452 17.30);
-    --colors-palette-danger-400: oklch(0.7628 0.0993 17.30);
-    --colors-palette-danger-500: oklch(0.6707 0.1924 17.30);
-    --colors-palette-danger-600: oklch(0.5835 0.2336 17.30);
-    --colors-palette-danger-700: oklch(0.4972 0.1891 17.30);
-    --colors-palette-danger-800: oklch(0.4115 0.1482 17.30);
-    --colors-palette-danger-900: oklch(0.3346 0.1178 17.30);
-    --colors-palette-danger-1000: oklch(0.2499 0.0840 17.30);
-    --colors-palette-danger-1100: oklch(0.1925 0.0616 17.30);
-    --colors-palette-warning-100: oklch(0.9862 0.0160 88.00);
-    --colors-palette-warning-200: oklch(0.9364 0.0300 88.00);
-    --colors-palette-warning-300: oklch(0.8497 0.0955 88.00);
-    --colors-palette-warning-400: oklch(0.7628 0.1091 88.00);
-    --colors-palette-warning-500: oklch(0.6707 0.1206 88.00);
-    --colors-palette-warning-600: oklch(0.5835 0.1192 88.00);
-    --colors-palette-warning-700: oklch(0.4972 0.0965 88.00);
-    --colors-palette-warning-800: oklch(0.4115 0.0757 88.00);
-    --colors-palette-warning-900: oklch(0.3346 0.0601 88.00);
-    --colors-palette-warning-1000: oklch(0.2499 0.0429 88.00);
-    --colors-palette-warning-1100: oklch(0.1925 0.0314 88.00);
-    --colors-palette-success-100: oklch(0.9862 0.0170 200.00);
-    --colors-palette-success-200: oklch(0.9364 0.0318 200.00);
-    --colors-palette-success-300: oklch(0.8497 0.0794 200.00);
-    --colors-palette-success-400: oklch(0.7628 0.0907 200.00);
-    --colors-palette-success-500: oklch(0.6707 0.1003 200.00);
-    --colors-palette-success-600: oklch(0.5835 0.0991 200.00);
-    --colors-palette-success-700: oklch(0.4972 0.0803 200.00);
-    --colors-palette-success-800: oklch(0.4115 0.0629 200.00);
-    --colors-palette-success-900: oklch(0.3346 0.0500 200.00);
-    --colors-palette-success-1000: oklch(0.2499 0.0356 200.00);
-    --colors-palette-success-1100: oklch(0.1925 0.0261 200.00);
-    --colors-black-a32: oklch(0.0000 0.0000 0.00 / 0.32);
-    --colors-black-a24: oklch(0.0000 0.0000 0.00 / 0.24);
-    --colors-black-a60: oklch(0.0000 0.0000 0.00 / 0.6);
+    --color-white: oklch(1.0000 0.0000 0.00);
+    --color-black: oklch(0.0000 0.0000 0.00);
+    --color-palette-neutral-light-100: oklch(0.9862 0.0041 93.70);
+    --color-palette-neutral-light-200: oklch(0.9364 0.0075 93.70);
+    --color-palette-neutral-light-300: oklch(0.8497 0.0191 93.70);
+    --color-palette-neutral-light-400: oklch(0.7628 0.0218 93.70);
+    --color-palette-neutral-light-500: oklch(0.6707 0.0241 93.70);
+    --color-palette-neutral-light-600: oklch(0.5835 0.0239 93.70);
+    --color-palette-neutral-light-700: oklch(0.4972 0.0193 93.70);
+    --color-palette-neutral-light-800: oklch(0.4115 0.0151 93.70);
+    --color-palette-neutral-light-900: oklch(0.3346 0.0120 93.70);
+    --color-palette-neutral-light-1000: oklch(0.2499 0.0086 93.70);
+    --color-palette-neutral-light-1100: oklch(0.1925 0.0063 93.70);
+    --color-palette-neutral-dark-100: oklch(0.9862 0.0012 270.70);
+    --color-palette-neutral-dark-200: oklch(0.9364 0.0024 270.70);
+    --color-palette-neutral-dark-300: oklch(0.8497 0.0081 270.70);
+    --color-palette-neutral-dark-400: oklch(0.7628 0.0168 270.70);
+    --color-palette-neutral-dark-500: oklch(0.6707 0.0305 270.70);
+    --color-palette-neutral-dark-600: oklch(0.5835 0.0454 270.70);
+    --color-palette-neutral-dark-700: oklch(0.4972 0.0538 270.70);
+    --color-palette-neutral-dark-800: oklch(0.4115 0.0482 270.70);
+    --color-palette-neutral-dark-900: oklch(0.3346 0.0383 270.70);
+    --color-palette-neutral-dark-1000: oklch(0.2499 0.0273 270.70);
+    --color-palette-neutral-dark-1100: oklch(0.1925 0.0200 270.70);
+    --color-palette-neutral-dark-1100-a16: oklch(0.1925 0.0200 270.70 / 0.16);
+    --color-palette-neutral-dark-1100-a12: oklch(0.1925 0.0200 270.70 / 0.12);
+    --color-palette-primary-100: oklch(0.9862 0.0064 262.40);
+    --color-palette-primary-200: oklch(0.9364 0.0121 262.40);
+    --color-palette-primary-300: oklch(0.8497 0.0407 262.40);
+    --color-palette-primary-400: oklch(0.7628 0.0846 262.40);
+    --color-palette-primary-500: oklch(0.6707 0.1531 262.40);
+    --color-palette-primary-600: oklch(0.5835 0.2274 262.40);
+    --color-palette-primary-700: oklch(0.4972 0.2254 262.40);
+    --color-palette-primary-800: oklch(0.4115 0.1767 262.40);
+    --color-palette-primary-900: oklch(0.3346 0.1405 262.40);
+    --color-palette-primary-1000: oklch(0.2499 0.1001 262.40);
+    --color-palette-primary-1100: oklch(0.1925 0.0734 262.40);
+    --color-palette-primary-600-a6: oklch(0.5835 0.2274 262.40 / 0.06);
+    --color-palette-primary-600-a9: oklch(0.5835 0.2274 262.40 / 0.09);
+    --color-palette-primary-600-a8: oklch(0.5835 0.2274 262.40 / 0.08);
+    --color-palette-accent-100: oklch(0.9862 0.0073 357.30);
+    --color-palette-accent-200: oklch(0.9364 0.0141 357.30);
+    --color-palette-accent-300: oklch(0.8497 0.0499 357.30);
+    --color-palette-accent-400: oklch(0.7628 0.1100 357.30);
+    --color-palette-accent-500: oklch(0.6707 0.2144 357.30);
+    --color-palette-accent-600: oklch(0.5835 0.2380 357.30);
+    --color-palette-accent-700: oklch(0.4972 0.1927 357.30);
+    --color-palette-accent-800: oklch(0.4115 0.1511 357.30);
+    --color-palette-accent-900: oklch(0.3346 0.1201 357.30);
+    --color-palette-accent-1000: oklch(0.2499 0.0856 357.30);
+    --color-palette-accent-1100: oklch(0.1925 0.0628 357.30);
+    --color-palette-accent-alt-100: oklch(0.9862 0.0067 287.10);
+    --color-palette-accent-alt-200: oklch(0.9364 0.0127 287.10);
+    --color-palette-accent-alt-300: oklch(0.8497 0.0430 287.10);
+    --color-palette-accent-alt-400: oklch(0.7628 0.0896 287.10);
+    --color-palette-accent-alt-500: oklch(0.6707 0.1624 287.10);
+    --color-palette-accent-alt-600: oklch(0.5835 0.2416 287.10);
+    --color-palette-accent-alt-700: oklch(0.4972 0.2722 287.10);
+    --color-palette-accent-alt-800: oklch(0.4115 0.2134 287.10);
+    --color-palette-accent-alt-900: oklch(0.3346 0.1696 287.10);
+    --color-palette-accent-alt-1000: oklch(0.2499 0.1209 287.10);
+    --color-palette-accent-alt-1100: oklch(0.1925 0.0887 287.10);
+    --color-palette-danger-100: oklch(0.9862 0.0066 17.30);
+    --color-palette-danger-200: oklch(0.9364 0.0128 17.30);
+    --color-palette-danger-300: oklch(0.8497 0.0452 17.30);
+    --color-palette-danger-400: oklch(0.7628 0.0993 17.30);
+    --color-palette-danger-500: oklch(0.6707 0.1924 17.30);
+    --color-palette-danger-600: oklch(0.5835 0.2336 17.30);
+    --color-palette-danger-700: oklch(0.4972 0.1891 17.30);
+    --color-palette-danger-800: oklch(0.4115 0.1482 17.30);
+    --color-palette-danger-900: oklch(0.3346 0.1178 17.30);
+    --color-palette-danger-1000: oklch(0.2499 0.0840 17.30);
+    --color-palette-danger-1100: oklch(0.1925 0.0616 17.30);
+    --color-palette-warning-100: oklch(0.9862 0.0160 88.00);
+    --color-palette-warning-200: oklch(0.9364 0.0300 88.00);
+    --color-palette-warning-300: oklch(0.8497 0.0955 88.00);
+    --color-palette-warning-400: oklch(0.7628 0.1091 88.00);
+    --color-palette-warning-500: oklch(0.6707 0.1206 88.00);
+    --color-palette-warning-600: oklch(0.5835 0.1192 88.00);
+    --color-palette-warning-700: oklch(0.4972 0.0965 88.00);
+    --color-palette-warning-800: oklch(0.4115 0.0757 88.00);
+    --color-palette-warning-900: oklch(0.3346 0.0601 88.00);
+    --color-palette-warning-1000: oklch(0.2499 0.0429 88.00);
+    --color-palette-warning-1100: oklch(0.1925 0.0314 88.00);
+    --color-palette-success-100: oklch(0.9862 0.0170 200.00);
+    --color-palette-success-200: oklch(0.9364 0.0318 200.00);
+    --color-palette-success-300: oklch(0.8497 0.0794 200.00);
+    --color-palette-success-400: oklch(0.7628 0.0907 200.00);
+    --color-palette-success-500: oklch(0.6707 0.1003 200.00);
+    --color-palette-success-600: oklch(0.5835 0.0991 200.00);
+    --color-palette-success-700: oklch(0.4972 0.0803 200.00);
+    --color-palette-success-800: oklch(0.4115 0.0629 200.00);
+    --color-palette-success-900: oklch(0.3346 0.0500 200.00);
+    --color-palette-success-1000: oklch(0.2499 0.0356 200.00);
+    --color-palette-success-1100: oklch(0.1925 0.0261 200.00);
+    --color-black-a32: oklch(0.0000 0.0000 0.00 / 0.32);
+    --color-black-a24: oklch(0.0000 0.0000 0.00 / 0.24);
+    --color-black-a60: oklch(0.0000 0.0000 0.00 / 0.6);
   }
 
   [data-brand="originalCodecademy"] {
-    --colors-white: oklch(1.0000 0.0000 0.00);
-    --colors-black: oklch(0.0000 0.0000 0.00);
-    --colors-palette-neutral-light-100: oklch(0.9862 0.0016 58.80);
-    --colors-palette-neutral-light-200: oklch(0.9364 0.0031 58.80);
-    --colors-palette-neutral-light-300: oklch(0.8497 0.0109 58.80);
-    --colors-palette-neutral-light-400: oklch(0.7628 0.0237 58.80);
-    --colors-palette-neutral-light-500: oklch(0.6707 0.0280 58.80);
-    --colors-palette-neutral-light-600: oklch(0.5835 0.0277 58.80);
-    --colors-palette-neutral-light-700: oklch(0.4972 0.0224 58.80);
-    --colors-palette-neutral-light-800: oklch(0.4115 0.0175 58.80);
-    --colors-palette-neutral-light-900: oklch(0.3346 0.0139 58.80);
-    --colors-palette-neutral-light-1000: oklch(0.2499 0.0099 58.80);
-    --colors-palette-neutral-light-1100: oklch(0.1925 0.0073 58.80);
-    --colors-palette-neutral-dark-100: oklch(0.9862 0.0012 271.30);
-    --colors-palette-neutral-dark-200: oklch(0.9364 0.0024 271.30);
-    --colors-palette-neutral-dark-300: oklch(0.8497 0.0081 271.30);
-    --colors-palette-neutral-dark-400: oklch(0.7628 0.0169 271.30);
-    --colors-palette-neutral-dark-500: oklch(0.6707 0.0306 271.30);
-    --colors-palette-neutral-dark-600: oklch(0.5835 0.0454 271.30);
-    --colors-palette-neutral-dark-700: oklch(0.4972 0.0538 271.30);
-    --colors-palette-neutral-dark-800: oklch(0.4115 0.0479 271.30);
-    --colors-palette-neutral-dark-900: oklch(0.3346 0.0381 271.30);
-    --colors-palette-neutral-dark-1000: oklch(0.2499 0.0272 271.30);
-    --colors-palette-neutral-dark-1100: oklch(0.1925 0.0199 271.30);
-    --colors-palette-neutral-dark-1100-a16: oklch(0.1925 0.0199 271.30 / 0.16);
-    --colors-palette-neutral-dark-1100-a12: oklch(0.1925 0.0199 271.30 / 0.12);
-    --colors-palette-neutral-dark-1100-a0: oklch(0.1925 0.0199 271.30 / 0);
-    --colors-palette-primary-100: oklch(0.9862 0.0064 274.10);
-    --colors-palette-primary-200: oklch(0.9364 0.0121 274.10);
-    --colors-palette-primary-300: oklch(0.8497 0.0408 274.10);
-    --colors-palette-primary-400: oklch(0.7628 0.0849 274.10);
-    --colors-palette-primary-500: oklch(0.6707 0.1537 274.10);
-    --colors-palette-primary-600: oklch(0.5835 0.2285 274.10);
-    --colors-palette-primary-700: oklch(0.4972 0.2707 274.10);
-    --colors-palette-primary-800: oklch(0.4115 0.2344 274.10);
-    --colors-palette-primary-900: oklch(0.3346 0.1863 274.10);
-    --colors-palette-primary-1000: oklch(0.2499 0.1328 274.10);
-    --colors-palette-primary-1100: oklch(0.1925 0.0974 274.10);
-    --colors-palette-primary-600-a6: oklch(0.5835 0.2285 274.10 / 0.06);
-    --colors-palette-primary-600-a9: oklch(0.5835 0.2285 274.10 / 0.09);
-    --colors-palette-primary-600-a8: oklch(0.5835 0.2285 274.10 / 0.08);
-    --colors-palette-accent-100: oklch(0.9862 0.0205 93.60);
-    --colors-palette-accent-200: oklch(0.9364 0.0378 93.60);
-    --colors-palette-accent-300: oklch(0.8789 0.1801 93.58);
-    --colors-palette-accent-400: oklch(0.7442 0.1526 93.94);
-    --colors-palette-accent-500: oklch(0.6707 0.1209 93.60);
-    --colors-palette-accent-600: oklch(0.5835 0.1195 93.60);
-    --colors-palette-accent-700: oklch(0.4972 0.0967 93.60);
-    --colors-palette-accent-800: oklch(0.4115 0.0758 93.60);
-    --colors-palette-accent-900: oklch(0.3346 0.0603 93.60);
-    --colors-palette-accent-1000: oklch(0.2499 0.0430 93.60);
-    --colors-palette-accent-1100: oklch(0.1925 0.0315 93.60);
-    --colors-palette-accent-alt-100: oklch(0.9862 0.0067 287.10);
-    --colors-palette-accent-alt-200: oklch(0.9364 0.0127 287.10);
-    --colors-palette-accent-alt-300: oklch(0.8497 0.0430 287.10);
-    --colors-palette-accent-alt-400: oklch(0.7628 0.0896 287.10);
-    --colors-palette-accent-alt-500: oklch(0.6707 0.1624 287.10);
-    --colors-palette-accent-alt-600: oklch(0.5835 0.2416 287.10);
-    --colors-palette-accent-alt-700: oklch(0.4972 0.2722 287.10);
-    --colors-palette-accent-alt-800: oklch(0.4115 0.2134 287.10);
-    --colors-palette-accent-alt-900: oklch(0.3346 0.1696 287.10);
-    --colors-palette-accent-alt-1000: oklch(0.2499 0.1209 287.10);
-    --colors-palette-accent-alt-1100: oklch(0.1925 0.0887 287.10);
-    --colors-palette-danger-100: oklch(0.9862 0.0066 29.40);
-    --colors-palette-danger-200: oklch(0.9364 0.0128 29.40);
-    --colors-palette-danger-300: oklch(0.8497 0.0452 29.40);
-    --colors-palette-danger-400: oklch(0.7628 0.0990 29.40);
-    --colors-palette-danger-500: oklch(0.6707 0.1910 29.40);
-    --colors-palette-danger-600: oklch(0.5835 0.2382 29.40);
-    --colors-palette-danger-700: oklch(0.4972 0.1928 29.40);
-    --colors-palette-danger-800: oklch(0.4115 0.1512 29.40);
-    --colors-palette-danger-900: oklch(0.3346 0.1202 29.40);
-    --colors-palette-danger-1000: oklch(0.2499 0.0857 29.40);
-    --colors-palette-danger-1100: oklch(0.1925 0.0628 29.40);
-    --colors-palette-warning-100: oklch(0.9862 0.0082 58.30);
-    --colors-palette-warning-200: oklch(0.9364 0.0156 58.30);
-    --colors-palette-warning-300: oklch(0.8497 0.0545 58.30);
-    --colors-palette-warning-400: oklch(0.7628 0.1179 58.30);
-    --colors-palette-warning-500: oklch(0.6707 0.1408 58.30);
-    --colors-palette-warning-600: oklch(0.5835 0.1392 58.30);
-    --colors-palette-warning-700: oklch(0.4972 0.1127 58.30);
-    --colors-palette-warning-800: oklch(0.4115 0.0883 58.30);
-    --colors-palette-warning-900: oklch(0.3346 0.0702 58.30);
-    --colors-palette-warning-1000: oklch(0.2499 0.0500 58.30);
-    --colors-palette-warning-1100: oklch(0.1925 0.0367 58.30);
-    --colors-palette-success-100: oklch(0.9862 0.0228 145.50);
-    --colors-palette-success-200: oklch(0.9364 0.0458 145.50);
-    --colors-palette-success-300: oklch(0.8497 0.1448 145.50);
-    --colors-palette-success-400: oklch(0.7628 0.1654 145.50);
-    --colors-palette-success-500: oklch(0.6707 0.1829 145.50);
-    --colors-palette-success-600: oklch(0.5835 0.1808 145.50);
-    --colors-palette-success-700: oklch(0.4972 0.1464 145.50);
-    --colors-palette-success-800: oklch(0.4115 0.1147 145.50);
-    --colors-palette-success-900: oklch(0.3346 0.0912 145.50);
-    --colors-palette-success-1000: oklch(0.2499 0.0650 145.50);
-    --colors-palette-success-1100: oklch(0.1925 0.0477 145.50);
-    --colors-black-a32: oklch(0.0000 0.0000 0.00 / 0.32);
-    --colors-black-a24: oklch(0.0000 0.0000 0.00 / 0.24);
-    --colors-black-a60: oklch(0.0000 0.0000 0.00 / 0.6);
-    --colors-black-a0: oklch(0.0000 0.0000 0.00 / 0);
+    --color-white: oklch(1.0000 0.0000 0.00);
+    --color-black: oklch(0.0000 0.0000 0.00);
+    --color-palette-neutral-light-100: oklch(0.9862 0.0016 58.80);
+    --color-palette-neutral-light-200: oklch(0.9364 0.0031 58.80);
+    --color-palette-neutral-light-300: oklch(0.8497 0.0109 58.80);
+    --color-palette-neutral-light-400: oklch(0.7628 0.0237 58.80);
+    --color-palette-neutral-light-500: oklch(0.6707 0.0280 58.80);
+    --color-palette-neutral-light-600: oklch(0.5835 0.0277 58.80);
+    --color-palette-neutral-light-700: oklch(0.4972 0.0224 58.80);
+    --color-palette-neutral-light-800: oklch(0.4115 0.0175 58.80);
+    --color-palette-neutral-light-900: oklch(0.3346 0.0139 58.80);
+    --color-palette-neutral-light-1000: oklch(0.2499 0.0099 58.80);
+    --color-palette-neutral-light-1100: oklch(0.1925 0.0073 58.80);
+    --color-palette-neutral-dark-100: oklch(0.9862 0.0012 271.30);
+    --color-palette-neutral-dark-200: oklch(0.9364 0.0024 271.30);
+    --color-palette-neutral-dark-300: oklch(0.8497 0.0081 271.30);
+    --color-palette-neutral-dark-400: oklch(0.7628 0.0169 271.30);
+    --color-palette-neutral-dark-500: oklch(0.6707 0.0306 271.30);
+    --color-palette-neutral-dark-600: oklch(0.5835 0.0454 271.30);
+    --color-palette-neutral-dark-700: oklch(0.4972 0.0538 271.30);
+    --color-palette-neutral-dark-800: oklch(0.4115 0.0479 271.30);
+    --color-palette-neutral-dark-900: oklch(0.3346 0.0381 271.30);
+    --color-palette-neutral-dark-1000: oklch(0.2499 0.0272 271.30);
+    --color-palette-neutral-dark-1100: oklch(0.1925 0.0199 271.30);
+    --color-palette-neutral-dark-1100-a16: oklch(0.1925 0.0199 271.30 / 0.16);
+    --color-palette-neutral-dark-1100-a12: oklch(0.1925 0.0199 271.30 / 0.12);
+    --color-palette-neutral-dark-1100-a0: oklch(0.1925 0.0199 271.30 / 0);
+    --color-palette-primary-100: oklch(0.9862 0.0064 274.10);
+    --color-palette-primary-200: oklch(0.9364 0.0121 274.10);
+    --color-palette-primary-300: oklch(0.8497 0.0408 274.10);
+    --color-palette-primary-400: oklch(0.7628 0.0849 274.10);
+    --color-palette-primary-500: oklch(0.6707 0.1537 274.10);
+    --color-palette-primary-600: oklch(0.5835 0.2285 274.10);
+    --color-palette-primary-700: oklch(0.4972 0.2707 274.10);
+    --color-palette-primary-800: oklch(0.4115 0.2344 274.10);
+    --color-palette-primary-900: oklch(0.3346 0.1863 274.10);
+    --color-palette-primary-1000: oklch(0.2499 0.1328 274.10);
+    --color-palette-primary-1100: oklch(0.1925 0.0974 274.10);
+    --color-palette-primary-600-a6: oklch(0.5835 0.2285 274.10 / 0.06);
+    --color-palette-primary-600-a9: oklch(0.5835 0.2285 274.10 / 0.09);
+    --color-palette-primary-600-a8: oklch(0.5835 0.2285 274.10 / 0.08);
+    --color-palette-accent-100: oklch(0.9862 0.0205 93.60);
+    --color-palette-accent-200: oklch(0.9364 0.0378 93.60);
+    --color-palette-accent-300: oklch(0.8789 0.1801 93.58);
+    --color-palette-accent-400: oklch(0.7442 0.1526 93.94);
+    --color-palette-accent-500: oklch(0.6707 0.1209 93.60);
+    --color-palette-accent-600: oklch(0.5835 0.1195 93.60);
+    --color-palette-accent-700: oklch(0.4972 0.0967 93.60);
+    --color-palette-accent-800: oklch(0.4115 0.0758 93.60);
+    --color-palette-accent-900: oklch(0.3346 0.0603 93.60);
+    --color-palette-accent-1000: oklch(0.2499 0.0430 93.60);
+    --color-palette-accent-1100: oklch(0.1925 0.0315 93.60);
+    --color-palette-accent-alt-100: oklch(0.9862 0.0067 287.10);
+    --color-palette-accent-alt-200: oklch(0.9364 0.0127 287.10);
+    --color-palette-accent-alt-300: oklch(0.8497 0.0430 287.10);
+    --color-palette-accent-alt-400: oklch(0.7628 0.0896 287.10);
+    --color-palette-accent-alt-500: oklch(0.6707 0.1624 287.10);
+    --color-palette-accent-alt-600: oklch(0.5835 0.2416 287.10);
+    --color-palette-accent-alt-700: oklch(0.4972 0.2722 287.10);
+    --color-palette-accent-alt-800: oklch(0.4115 0.2134 287.10);
+    --color-palette-accent-alt-900: oklch(0.3346 0.1696 287.10);
+    --color-palette-accent-alt-1000: oklch(0.2499 0.1209 287.10);
+    --color-palette-accent-alt-1100: oklch(0.1925 0.0887 287.10);
+    --color-palette-danger-100: oklch(0.9862 0.0066 29.40);
+    --color-palette-danger-200: oklch(0.9364 0.0128 29.40);
+    --color-palette-danger-300: oklch(0.8497 0.0452 29.40);
+    --color-palette-danger-400: oklch(0.7628 0.0990 29.40);
+    --color-palette-danger-500: oklch(0.6707 0.1910 29.40);
+    --color-palette-danger-600: oklch(0.5835 0.2382 29.40);
+    --color-palette-danger-700: oklch(0.4972 0.1928 29.40);
+    --color-palette-danger-800: oklch(0.4115 0.1512 29.40);
+    --color-palette-danger-900: oklch(0.3346 0.1202 29.40);
+    --color-palette-danger-1000: oklch(0.2499 0.0857 29.40);
+    --color-palette-danger-1100: oklch(0.1925 0.0628 29.40);
+    --color-palette-warning-100: oklch(0.9862 0.0082 58.30);
+    --color-palette-warning-200: oklch(0.9364 0.0156 58.30);
+    --color-palette-warning-300: oklch(0.8497 0.0545 58.30);
+    --color-palette-warning-400: oklch(0.7628 0.1179 58.30);
+    --color-palette-warning-500: oklch(0.6707 0.1408 58.30);
+    --color-palette-warning-600: oklch(0.5835 0.1392 58.30);
+    --color-palette-warning-700: oklch(0.4972 0.1127 58.30);
+    --color-palette-warning-800: oklch(0.4115 0.0883 58.30);
+    --color-palette-warning-900: oklch(0.3346 0.0702 58.30);
+    --color-palette-warning-1000: oklch(0.2499 0.0500 58.30);
+    --color-palette-warning-1100: oklch(0.1925 0.0367 58.30);
+    --color-palette-success-100: oklch(0.9862 0.0228 145.50);
+    --color-palette-success-200: oklch(0.9364 0.0458 145.50);
+    --color-palette-success-300: oklch(0.8497 0.1448 145.50);
+    --color-palette-success-400: oklch(0.7628 0.1654 145.50);
+    --color-palette-success-500: oklch(0.6707 0.1829 145.50);
+    --color-palette-success-600: oklch(0.5835 0.1808 145.50);
+    --color-palette-success-700: oklch(0.4972 0.1464 145.50);
+    --color-palette-success-800: oklch(0.4115 0.1147 145.50);
+    --color-palette-success-900: oklch(0.3346 0.0912 145.50);
+    --color-palette-success-1000: oklch(0.2499 0.0650 145.50);
+    --color-palette-success-1100: oklch(0.1925 0.0477 145.50);
+    --color-black-a32: oklch(0.0000 0.0000 0.00 / 0.32);
+    --color-black-a24: oklch(0.0000 0.0000 0.00 / 0.24);
+    --color-black-a60: oklch(0.0000 0.0000 0.00 / 0.6);
+    --color-black-a0: oklch(0.0000 0.0000 0.00 / 0);
   }
 
   :root, [data-color-mode="light"] {
     color-scheme: light;
-    color: var(--colors-text-default);
-    --colors-background-current: var(--colors-surface-default);
-    --colors-surface-sunken: var(--colors-palette-neutral-light-200); /** Wells, insets, code blocks — anything recessed into the page. */
-    --colors-surface-default: var(--colors-palette-neutral-light-100); /** The page background — the base every other surface elevates from. */
-    --colors-surface-raised: var(--colors-white); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */
-    --colors-surface-success: var(--colors-palette-success-200); /** The success tint behind an alert or inline confirmation. */
-    --colors-surface-warning: var(--colors-palette-warning-200); /** The warning tint behind an alert or inline caution. */
-    --colors-surface-error: var(--colors-palette-danger-200); /** The error tint behind an alert or inline validation message. */
-    --colors-surface-brand: var(--colors-palette-neutral-light-100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */
-    --colors-surface-brand-subtle: var(--colors-palette-neutral-light-100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */
-    --colors-text-default: var(--colors-palette-neutral-dark-1000); /** Body copy and headings. */
-    --colors-text-subtle: var(--colors-palette-neutral-dark-800); /** Secondary text — descriptions, metadata, helper copy. */
-    --colors-text-inverse: var(--colors-palette-neutral-light-200); /** Labels on a filled control — action-primary, -neutral, -danger. */
-    --colors-text-success: var(--colors-palette-success-900); /** Success text and icons. */
-    --colors-text-warning: var(--colors-palette-warning-900); /** Warning text and icons. Always with an icon. */
-    --colors-text-error: var(--colors-palette-danger-900); /** Error text and icons. */
-    --colors-border-strong: var(--colors-palette-neutral-dark-1100); /** Emphasis — an active field, a selected row. */
-    --colors-border-default: var(--colors-palette-neutral-dark-600); /** Any border that carries meaning — control outlines, field borders. */
-    --colors-border-subtle: var(--colors-palette-neutral-dark-300); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */
-    --colors-action-primary: var(--colors-palette-primary-800); /** Primary interactive fills, strokes, links and focus rings. */
-    --colors-action-primary-hover: var(--colors-palette-primary-900); /** Hover for action-primary. */
-    --colors-action-primary-pressed: var(--colors-palette-primary-1000); /** Pressed for action-primary. */
-    --colors-action-danger: var(--colors-palette-danger-800); /** Destructive actions — delete, remove, revoke. */
-    --colors-action-danger-hover: var(--colors-palette-danger-900); /** Hover for action-danger. */
-    --colors-action-danger-pressed: var(--colors-palette-danger-1000); /** Pressed for action-danger. */
-    --colors-action-neutral: var(--colors-palette-neutral-dark-1000); /** The neutral action fill. Button variant="secondary" resolves here. */
-    --colors-action-neutral-hover: var(--colors-palette-neutral-dark-1100); /** Hover for action-neutral. */
-    --colors-action-neutral-pressed: var(--colors-black); /** Pressed for action-neutral. */
-    --colors-action-disabled: var(--colors-palette-neutral-light-400); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */
-    --colors-state-hover: var(--colors-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */
-    --colors-state-pressed: var(--colors-palette-primary-600-a9); /** Hover → pressed on the same elements. */
-    --colors-state-selected: var(--colors-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */
-    --colors-viz-1: var(--colors-palette-primary-800); /** Categorical series 1. */
-    --colors-viz-2: var(--colors-palette-accent-700); /** Categorical series 2. */
-    --colors-viz-3: var(--colors-palette-warning-700); /** Categorical series 3. */
-    --colors-viz-4: var(--colors-palette-accent-alt-600); /** Categorical series 4. */
-    --colors-viz-5: var(--colors-palette-success-600); /** Categorical series 5. */
-    --colors-viz-6: var(--colors-palette-danger-600); /** Categorical series 6. */
-    --colors-viz-7: var(--colors-palette-neutral-dark-1000); /** Categorical series 7. */
-    --colors-viz-8: var(--colors-palette-neutral-light-600); /** Categorical series 8. */
-    --colors-viz-seq-1: var(--colors-palette-primary-600); /** Sequential step 1, low to high. */
-    --colors-viz-seq-2: var(--colors-palette-primary-700); /** Sequential step 2, low to high. */
-    --colors-viz-seq-3: var(--colors-palette-primary-800); /** Sequential step 3, low to high. */
-    --colors-viz-seq-4: var(--colors-palette-primary-900); /** Sequential step 4, low to high. */
-    --colors-shadow-key: var(--colors-palette-neutral-dark-1100-a16); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */
-    --colors-shadow-ambient: var(--colors-palette-neutral-dark-1100-a12); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */
-    --colors-shadow-scrim: var(--colors-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */
-    --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%);
-    --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%);
+    color: var(--color-text-default);
+    --color-background-current: var(--color-surface-default);
+    --color-surface-sunken: var(--color-palette-neutral-light-200); /** Wells, insets, code blocks — anything recessed into the page. */
+    --color-surface-default: var(--color-palette-neutral-light-100); /** The page background — the base every other surface elevates from. */
+    --color-surface-raised: var(--color-white); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */
+    --color-surface-success: var(--color-palette-success-200); /** The success tint behind an alert or inline confirmation. */
+    --color-surface-warning: var(--color-palette-warning-200); /** The warning tint behind an alert or inline caution. */
+    --color-surface-error: var(--color-palette-danger-200); /** The error tint behind an alert or inline validation message. */
+    --color-surface-brand: var(--color-palette-neutral-light-100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */
+    --color-surface-brand-subtle: var(--color-palette-neutral-light-100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */
+    --color-text-default: var(--color-palette-neutral-dark-1000); /** Body copy and headings. */
+    --color-text-subtle: var(--color-palette-neutral-dark-800); /** Secondary text — descriptions, metadata, helper copy. */
+    --color-text-inverse: var(--color-palette-neutral-light-200); /** Labels on a filled control — action-primary, -neutral, -danger. */
+    --color-text-success: var(--color-palette-success-900); /** Success text and icons. */
+    --color-text-warning: var(--color-palette-warning-900); /** Warning text and icons. Always with an icon. */
+    --color-text-error: var(--color-palette-danger-900); /** Error text and icons. */
+    --color-border-strong: var(--color-palette-neutral-dark-1100); /** Emphasis — an active field, a selected row. */
+    --color-border-default: var(--color-palette-neutral-dark-600); /** Any border that carries meaning — control outlines, field borders. */
+    --color-border-subtle: var(--color-palette-neutral-dark-300); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */
+    --color-action-primary: var(--color-palette-primary-800); /** Primary interactive fills, strokes, links and focus rings. */
+    --color-action-primary-hover: var(--color-palette-primary-900); /** Hover for action-primary. */
+    --color-action-primary-pressed: var(--color-palette-primary-1000); /** Pressed for action-primary. */
+    --color-action-danger: var(--color-palette-danger-800); /** Destructive actions — delete, remove, revoke. */
+    --color-action-danger-hover: var(--color-palette-danger-900); /** Hover for action-danger. */
+    --color-action-danger-pressed: var(--color-palette-danger-1000); /** Pressed for action-danger. */
+    --color-action-neutral: var(--color-palette-neutral-dark-1000); /** The neutral action fill. Button variant="secondary" resolves here. */
+    --color-action-neutral-hover: var(--color-palette-neutral-dark-1100); /** Hover for action-neutral. */
+    --color-action-neutral-pressed: var(--color-black); /** Pressed for action-neutral. */
+    --color-action-disabled: var(--color-palette-neutral-light-400); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */
+    --color-state-hover: var(--color-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */
+    --color-state-pressed: var(--color-palette-primary-600-a9); /** Hover → pressed on the same elements. */
+    --color-state-selected: var(--color-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */
+    --color-viz-1: var(--color-palette-primary-800); /** Categorical series 1. */
+    --color-viz-2: var(--color-palette-accent-700); /** Categorical series 2. */
+    --color-viz-3: var(--color-palette-warning-700); /** Categorical series 3. */
+    --color-viz-4: var(--color-palette-accent-alt-600); /** Categorical series 4. */
+    --color-viz-5: var(--color-palette-success-600); /** Categorical series 5. */
+    --color-viz-6: var(--color-palette-danger-600); /** Categorical series 6. */
+    --color-viz-7: var(--color-palette-neutral-dark-1000); /** Categorical series 7. */
+    --color-viz-8: var(--color-palette-neutral-light-600); /** Categorical series 8. */
+    --color-viz-seq-1: var(--color-palette-primary-600); /** Sequential step 1, low to high. */
+    --color-viz-seq-2: var(--color-palette-primary-700); /** Sequential step 2, low to high. */
+    --color-viz-seq-3: var(--color-palette-primary-800); /** Sequential step 3, low to high. */
+    --color-viz-seq-4: var(--color-palette-primary-900); /** Sequential step 4, low to high. */
+    --color-shadow-key: var(--color-palette-neutral-dark-1100-a16); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */
+    --color-shadow-ambient: var(--color-palette-neutral-dark-1100-a12); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */
+    --color-shadow-scrim: var(--color-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */
+    --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%);
+    --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%);
   }
 
   [data-color-mode="dark"] {
     color-scheme: dark;
-    color: var(--colors-text-default);
-    --colors-background-current: var(--colors-surface-default);
-    --colors-surface-sunken: var(--colors-black); /** Wells, insets, code blocks — anything recessed into the page. */
-    --colors-surface-default: var(--colors-palette-neutral-dark-1100); /** The page background — the base every other surface elevates from. */
-    --colors-surface-raised: var(--colors-palette-neutral-dark-1000); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */
-    --colors-surface-success: var(--colors-palette-success-1000); /** The success tint behind an alert or inline confirmation. */
-    --colors-surface-warning: var(--colors-palette-warning-1000); /** The warning tint behind an alert or inline caution. */
-    --colors-surface-error: var(--colors-palette-danger-1000); /** The error tint behind an alert or inline validation message. */
-    --colors-surface-brand: var(--colors-palette-neutral-dark-1100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */
-    --colors-surface-brand-subtle: var(--colors-palette-neutral-dark-1100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */
-    --colors-text-default: var(--colors-palette-neutral-light-200); /** Body copy and headings. */
-    --colors-text-subtle: var(--colors-palette-neutral-light-400); /** Secondary text — descriptions, metadata, helper copy. */
-    --colors-text-inverse: var(--colors-palette-neutral-dark-1000); /** Labels on a filled control — action-primary, -neutral, -danger. */
-    --colors-text-success: var(--colors-palette-success-300); /** Success text and icons. */
-    --colors-text-warning: var(--colors-palette-warning-300); /** Warning text and icons. Always with an icon. */
-    --colors-text-error: var(--colors-palette-danger-300); /** Error text and icons. */
-    --colors-border-strong: var(--colors-palette-neutral-light-100); /** Emphasis — an active field, a selected row. */
-    --colors-border-default: var(--colors-palette-neutral-light-600); /** Any border that carries meaning — control outlines, field borders. */
-    --colors-border-subtle: var(--colors-palette-neutral-light-900); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */
-    --colors-action-primary: var(--colors-palette-primary-400); /** Primary interactive fills, strokes, links and focus rings. */
-    --colors-action-primary-hover: var(--colors-palette-primary-300); /** Hover for action-primary. */
-    --colors-action-primary-pressed: var(--colors-palette-primary-200); /** Pressed for action-primary. */
-    --colors-action-danger: var(--colors-palette-danger-400); /** Destructive actions — delete, remove, revoke. */
-    --colors-action-danger-hover: var(--colors-palette-danger-300); /** Hover for action-danger. */
-    --colors-action-danger-pressed: var(--colors-palette-danger-200); /** Pressed for action-danger. */
-    --colors-action-neutral: var(--colors-palette-neutral-light-200); /** The neutral action fill. Button variant="secondary" resolves here. */
-    --colors-action-neutral-hover: var(--colors-palette-neutral-light-100); /** Hover for action-neutral. */
-    --colors-action-neutral-pressed: var(--colors-white); /** Pressed for action-neutral. */
-    --colors-action-disabled: var(--colors-palette-neutral-dark-800); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */
-    --colors-state-hover: var(--colors-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */
-    --colors-state-pressed: var(--colors-palette-primary-600-a9); /** Hover → pressed on the same elements. */
-    --colors-state-selected: var(--colors-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */
-    --colors-viz-1: var(--colors-palette-primary-500); /** Categorical series 1. */
-    --colors-viz-2: var(--colors-palette-accent-500); /** Categorical series 2. */
-    --colors-viz-3: var(--colors-palette-warning-400); /** Categorical series 3. */
-    --colors-viz-4: var(--colors-palette-accent-alt-600); /** Categorical series 4. */
-    --colors-viz-5: var(--colors-palette-success-300); /** Categorical series 5. */
-    --colors-viz-6: var(--colors-palette-danger-600); /** Categorical series 6. */
-    --colors-viz-7: var(--colors-palette-neutral-dark-500); /** Categorical series 7. */
-    --colors-viz-8: var(--colors-palette-neutral-light-600); /** Categorical series 8. */
-    --colors-viz-seq-1: var(--colors-palette-primary-600); /** Sequential step 1, low to high. */
-    --colors-viz-seq-2: var(--colors-palette-primary-500); /** Sequential step 2, low to high. */
-    --colors-viz-seq-3: var(--colors-palette-primary-400); /** Sequential step 3, low to high. */
-    --colors-viz-seq-4: var(--colors-palette-primary-300); /** Sequential step 4, low to high. */
-    --colors-shadow-key: var(--colors-black-a32); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */
-    --colors-shadow-ambient: var(--colors-black-a24); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */
-    --colors-shadow-scrim: var(--colors-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */
-    --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%);
-    --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%);
+    color: var(--color-text-default);
+    --color-background-current: var(--color-surface-default);
+    --color-surface-sunken: var(--color-black); /** Wells, insets, code blocks — anything recessed into the page. */
+    --color-surface-default: var(--color-palette-neutral-dark-1100); /** The page background — the base every other surface elevates from. */
+    --color-surface-raised: var(--color-palette-neutral-dark-1000); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */
+    --color-surface-success: var(--color-palette-success-1000); /** The success tint behind an alert or inline confirmation. */
+    --color-surface-warning: var(--color-palette-warning-1000); /** The warning tint behind an alert or inline caution. */
+    --color-surface-error: var(--color-palette-danger-1000); /** The error tint behind an alert or inline validation message. */
+    --color-surface-brand: var(--color-palette-neutral-dark-1100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */
+    --color-surface-brand-subtle: var(--color-palette-neutral-dark-1100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */
+    --color-text-default: var(--color-palette-neutral-light-200); /** Body copy and headings. */
+    --color-text-subtle: var(--color-palette-neutral-light-400); /** Secondary text — descriptions, metadata, helper copy. */
+    --color-text-inverse: var(--color-palette-neutral-dark-1000); /** Labels on a filled control — action-primary, -neutral, -danger. */
+    --color-text-success: var(--color-palette-success-300); /** Success text and icons. */
+    --color-text-warning: var(--color-palette-warning-300); /** Warning text and icons. Always with an icon. */
+    --color-text-error: var(--color-palette-danger-300); /** Error text and icons. */
+    --color-border-strong: var(--color-palette-neutral-light-100); /** Emphasis — an active field, a selected row. */
+    --color-border-default: var(--color-palette-neutral-light-600); /** Any border that carries meaning — control outlines, field borders. */
+    --color-border-subtle: var(--color-palette-neutral-light-900); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */
+    --color-action-primary: var(--color-palette-primary-400); /** Primary interactive fills, strokes, links and focus rings. */
+    --color-action-primary-hover: var(--color-palette-primary-300); /** Hover for action-primary. */
+    --color-action-primary-pressed: var(--color-palette-primary-200); /** Pressed for action-primary. */
+    --color-action-danger: var(--color-palette-danger-400); /** Destructive actions — delete, remove, revoke. */
+    --color-action-danger-hover: var(--color-palette-danger-300); /** Hover for action-danger. */
+    --color-action-danger-pressed: var(--color-palette-danger-200); /** Pressed for action-danger. */
+    --color-action-neutral: var(--color-palette-neutral-light-200); /** The neutral action fill. Button variant="secondary" resolves here. */
+    --color-action-neutral-hover: var(--color-palette-neutral-light-100); /** Hover for action-neutral. */
+    --color-action-neutral-pressed: var(--color-white); /** Pressed for action-neutral. */
+    --color-action-disabled: var(--color-palette-neutral-dark-800); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */
+    --color-state-hover: var(--color-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */
+    --color-state-pressed: var(--color-palette-primary-600-a9); /** Hover → pressed on the same elements. */
+    --color-state-selected: var(--color-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */
+    --color-viz-1: var(--color-palette-primary-500); /** Categorical series 1. */
+    --color-viz-2: var(--color-palette-accent-500); /** Categorical series 2. */
+    --color-viz-3: var(--color-palette-warning-400); /** Categorical series 3. */
+    --color-viz-4: var(--color-palette-accent-alt-600); /** Categorical series 4. */
+    --color-viz-5: var(--color-palette-success-300); /** Categorical series 5. */
+    --color-viz-6: var(--color-palette-danger-600); /** Categorical series 6. */
+    --color-viz-7: var(--color-palette-neutral-dark-500); /** Categorical series 7. */
+    --color-viz-8: var(--color-palette-neutral-light-600); /** Categorical series 8. */
+    --color-viz-seq-1: var(--color-palette-primary-600); /** Sequential step 1, low to high. */
+    --color-viz-seq-2: var(--color-palette-primary-500); /** Sequential step 2, low to high. */
+    --color-viz-seq-3: var(--color-palette-primary-400); /** Sequential step 3, low to high. */
+    --color-viz-seq-4: var(--color-palette-primary-300); /** Sequential step 4, low to high. */
+    --color-shadow-key: var(--color-black-a32); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */
+    --color-shadow-ambient: var(--color-black-a24); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */
+    --color-shadow-scrim: var(--color-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */
+    --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%);
+    --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%);
   }
 
   [data-brand="originalCodecademy"][data-color-mode="light"] {
-    --colors-shadow-ambient: var(--colors-palette-neutral-dark-1100-a0);
-    --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%);
+    --color-shadow-ambient: var(--color-palette-neutral-dark-1100-a0);
+    --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%);
   }
 
   [data-brand="originalCodecademy"][data-color-mode="dark"] {
-    --colors-action-primary: var(--colors-palette-accent-300);
-    --colors-action-primary-hover: var(--colors-palette-accent-400);
-    --colors-action-primary-pressed: var(--colors-palette-accent-500);
-    --colors-shadow-ambient: var(--colors-black-a0);
-    --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%);
+    --color-action-primary: var(--color-palette-accent-300);
+    --color-action-primary-hover: var(--color-palette-accent-400);
+    --color-action-primary-pressed: var(--color-palette-accent-500);
+    --color-shadow-ambient: var(--color-black-a0);
+    --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%);
   }
 }
diff --git a/packages/gamut-styles/src/tokens/generated/tokensCss.ts b/packages/gamut-styles/src/tokens/generated/tokensCss.ts
index 426ca2bf7f..be53f2c809 100644
--- a/packages/gamut-styles/src/tokens/generated/tokensCss.ts
+++ b/packages/gamut-styles/src/tokens/generated/tokensCss.ts
@@ -1,2 +1,2 @@
 /* Generated by scripts/build-tokens.ts: tokens.css as a string. Do not edit. */
-export const tokensCss = "/* Generated by scripts/build-tokens.ts from the \"skillsoft\", \"originalCodecademy\" brands (\"skillsoft\" is the default). Do not edit. */\n@layer reset, base, tokens, recipes, utilities;\n\n@layer tokens {\n  :root, [data-brand=\"skillsoft\"] {\n    --colors-white: oklch(1.0000 0.0000 0.00);\n    --colors-black: oklch(0.0000 0.0000 0.00);\n    --colors-palette-neutral-light-100: oklch(0.9862 0.0041 93.70);\n    --colors-palette-neutral-light-200: oklch(0.9364 0.0075 93.70);\n    --colors-palette-neutral-light-300: oklch(0.8497 0.0191 93.70);\n    --colors-palette-neutral-light-400: oklch(0.7628 0.0218 93.70);\n    --colors-palette-neutral-light-500: oklch(0.6707 0.0241 93.70);\n    --colors-palette-neutral-light-600: oklch(0.5835 0.0239 93.70);\n    --colors-palette-neutral-light-700: oklch(0.4972 0.0193 93.70);\n    --colors-palette-neutral-light-800: oklch(0.4115 0.0151 93.70);\n    --colors-palette-neutral-light-900: oklch(0.3346 0.0120 93.70);\n    --colors-palette-neutral-light-1000: oklch(0.2499 0.0086 93.70);\n    --colors-palette-neutral-light-1100: oklch(0.1925 0.0063 93.70);\n    --colors-palette-neutral-dark-100: oklch(0.9862 0.0012 270.70);\n    --colors-palette-neutral-dark-200: oklch(0.9364 0.0024 270.70);\n    --colors-palette-neutral-dark-300: oklch(0.8497 0.0081 270.70);\n    --colors-palette-neutral-dark-400: oklch(0.7628 0.0168 270.70);\n    --colors-palette-neutral-dark-500: oklch(0.6707 0.0305 270.70);\n    --colors-palette-neutral-dark-600: oklch(0.5835 0.0454 270.70);\n    --colors-palette-neutral-dark-700: oklch(0.4972 0.0538 270.70);\n    --colors-palette-neutral-dark-800: oklch(0.4115 0.0482 270.70);\n    --colors-palette-neutral-dark-900: oklch(0.3346 0.0383 270.70);\n    --colors-palette-neutral-dark-1000: oklch(0.2499 0.0273 270.70);\n    --colors-palette-neutral-dark-1100: oklch(0.1925 0.0200 270.70);\n    --colors-palette-neutral-dark-1100-a16: oklch(0.1925 0.0200 270.70 / 0.16);\n    --colors-palette-neutral-dark-1100-a12: oklch(0.1925 0.0200 270.70 / 0.12);\n    --colors-palette-primary-100: oklch(0.9862 0.0064 262.40);\n    --colors-palette-primary-200: oklch(0.9364 0.0121 262.40);\n    --colors-palette-primary-300: oklch(0.8497 0.0407 262.40);\n    --colors-palette-primary-400: oklch(0.7628 0.0846 262.40);\n    --colors-palette-primary-500: oklch(0.6707 0.1531 262.40);\n    --colors-palette-primary-600: oklch(0.5835 0.2274 262.40);\n    --colors-palette-primary-700: oklch(0.4972 0.2254 262.40);\n    --colors-palette-primary-800: oklch(0.4115 0.1767 262.40);\n    --colors-palette-primary-900: oklch(0.3346 0.1405 262.40);\n    --colors-palette-primary-1000: oklch(0.2499 0.1001 262.40);\n    --colors-palette-primary-1100: oklch(0.1925 0.0734 262.40);\n    --colors-palette-primary-600-a6: oklch(0.5835 0.2274 262.40 / 0.06);\n    --colors-palette-primary-600-a9: oklch(0.5835 0.2274 262.40 / 0.09);\n    --colors-palette-primary-600-a8: oklch(0.5835 0.2274 262.40 / 0.08);\n    --colors-palette-accent-100: oklch(0.9862 0.0073 357.30);\n    --colors-palette-accent-200: oklch(0.9364 0.0141 357.30);\n    --colors-palette-accent-300: oklch(0.8497 0.0499 357.30);\n    --colors-palette-accent-400: oklch(0.7628 0.1100 357.30);\n    --colors-palette-accent-500: oklch(0.6707 0.2144 357.30);\n    --colors-palette-accent-600: oklch(0.5835 0.2380 357.30);\n    --colors-palette-accent-700: oklch(0.4972 0.1927 357.30);\n    --colors-palette-accent-800: oklch(0.4115 0.1511 357.30);\n    --colors-palette-accent-900: oklch(0.3346 0.1201 357.30);\n    --colors-palette-accent-1000: oklch(0.2499 0.0856 357.30);\n    --colors-palette-accent-1100: oklch(0.1925 0.0628 357.30);\n    --colors-palette-accent-alt-100: oklch(0.9862 0.0067 287.10);\n    --colors-palette-accent-alt-200: oklch(0.9364 0.0127 287.10);\n    --colors-palette-accent-alt-300: oklch(0.8497 0.0430 287.10);\n    --colors-palette-accent-alt-400: oklch(0.7628 0.0896 287.10);\n    --colors-palette-accent-alt-500: oklch(0.6707 0.1624 287.10);\n    --colors-palette-accent-alt-600: oklch(0.5835 0.2416 287.10);\n    --colors-palette-accent-alt-700: oklch(0.4972 0.2722 287.10);\n    --colors-palette-accent-alt-800: oklch(0.4115 0.2134 287.10);\n    --colors-palette-accent-alt-900: oklch(0.3346 0.1696 287.10);\n    --colors-palette-accent-alt-1000: oklch(0.2499 0.1209 287.10);\n    --colors-palette-accent-alt-1100: oklch(0.1925 0.0887 287.10);\n    --colors-palette-danger-100: oklch(0.9862 0.0066 17.30);\n    --colors-palette-danger-200: oklch(0.9364 0.0128 17.30);\n    --colors-palette-danger-300: oklch(0.8497 0.0452 17.30);\n    --colors-palette-danger-400: oklch(0.7628 0.0993 17.30);\n    --colors-palette-danger-500: oklch(0.6707 0.1924 17.30);\n    --colors-palette-danger-600: oklch(0.5835 0.2336 17.30);\n    --colors-palette-danger-700: oklch(0.4972 0.1891 17.30);\n    --colors-palette-danger-800: oklch(0.4115 0.1482 17.30);\n    --colors-palette-danger-900: oklch(0.3346 0.1178 17.30);\n    --colors-palette-danger-1000: oklch(0.2499 0.0840 17.30);\n    --colors-palette-danger-1100: oklch(0.1925 0.0616 17.30);\n    --colors-palette-warning-100: oklch(0.9862 0.0160 88.00);\n    --colors-palette-warning-200: oklch(0.9364 0.0300 88.00);\n    --colors-palette-warning-300: oklch(0.8497 0.0955 88.00);\n    --colors-palette-warning-400: oklch(0.7628 0.1091 88.00);\n    --colors-palette-warning-500: oklch(0.6707 0.1206 88.00);\n    --colors-palette-warning-600: oklch(0.5835 0.1192 88.00);\n    --colors-palette-warning-700: oklch(0.4972 0.0965 88.00);\n    --colors-palette-warning-800: oklch(0.4115 0.0757 88.00);\n    --colors-palette-warning-900: oklch(0.3346 0.0601 88.00);\n    --colors-palette-warning-1000: oklch(0.2499 0.0429 88.00);\n    --colors-palette-warning-1100: oklch(0.1925 0.0314 88.00);\n    --colors-palette-success-100: oklch(0.9862 0.0170 200.00);\n    --colors-palette-success-200: oklch(0.9364 0.0318 200.00);\n    --colors-palette-success-300: oklch(0.8497 0.0794 200.00);\n    --colors-palette-success-400: oklch(0.7628 0.0907 200.00);\n    --colors-palette-success-500: oklch(0.6707 0.1003 200.00);\n    --colors-palette-success-600: oklch(0.5835 0.0991 200.00);\n    --colors-palette-success-700: oklch(0.4972 0.0803 200.00);\n    --colors-palette-success-800: oklch(0.4115 0.0629 200.00);\n    --colors-palette-success-900: oklch(0.3346 0.0500 200.00);\n    --colors-palette-success-1000: oklch(0.2499 0.0356 200.00);\n    --colors-palette-success-1100: oklch(0.1925 0.0261 200.00);\n    --colors-black-a32: oklch(0.0000 0.0000 0.00 / 0.32);\n    --colors-black-a24: oklch(0.0000 0.0000 0.00 / 0.24);\n    --colors-black-a60: oklch(0.0000 0.0000 0.00 / 0.6);\n  }\n\n  [data-brand=\"originalCodecademy\"] {\n    --colors-white: oklch(1.0000 0.0000 0.00);\n    --colors-black: oklch(0.0000 0.0000 0.00);\n    --colors-palette-neutral-light-100: oklch(0.9862 0.0016 58.80);\n    --colors-palette-neutral-light-200: oklch(0.9364 0.0031 58.80);\n    --colors-palette-neutral-light-300: oklch(0.8497 0.0109 58.80);\n    --colors-palette-neutral-light-400: oklch(0.7628 0.0237 58.80);\n    --colors-palette-neutral-light-500: oklch(0.6707 0.0280 58.80);\n    --colors-palette-neutral-light-600: oklch(0.5835 0.0277 58.80);\n    --colors-palette-neutral-light-700: oklch(0.4972 0.0224 58.80);\n    --colors-palette-neutral-light-800: oklch(0.4115 0.0175 58.80);\n    --colors-palette-neutral-light-900: oklch(0.3346 0.0139 58.80);\n    --colors-palette-neutral-light-1000: oklch(0.2499 0.0099 58.80);\n    --colors-palette-neutral-light-1100: oklch(0.1925 0.0073 58.80);\n    --colors-palette-neutral-dark-100: oklch(0.9862 0.0012 271.30);\n    --colors-palette-neutral-dark-200: oklch(0.9364 0.0024 271.30);\n    --colors-palette-neutral-dark-300: oklch(0.8497 0.0081 271.30);\n    --colors-palette-neutral-dark-400: oklch(0.7628 0.0169 271.30);\n    --colors-palette-neutral-dark-500: oklch(0.6707 0.0306 271.30);\n    --colors-palette-neutral-dark-600: oklch(0.5835 0.0454 271.30);\n    --colors-palette-neutral-dark-700: oklch(0.4972 0.0538 271.30);\n    --colors-palette-neutral-dark-800: oklch(0.4115 0.0479 271.30);\n    --colors-palette-neutral-dark-900: oklch(0.3346 0.0381 271.30);\n    --colors-palette-neutral-dark-1000: oklch(0.2499 0.0272 271.30);\n    --colors-palette-neutral-dark-1100: oklch(0.1925 0.0199 271.30);\n    --colors-palette-neutral-dark-1100-a16: oklch(0.1925 0.0199 271.30 / 0.16);\n    --colors-palette-neutral-dark-1100-a12: oklch(0.1925 0.0199 271.30 / 0.12);\n    --colors-palette-neutral-dark-1100-a0: oklch(0.1925 0.0199 271.30 / 0);\n    --colors-palette-primary-100: oklch(0.9862 0.0064 274.10);\n    --colors-palette-primary-200: oklch(0.9364 0.0121 274.10);\n    --colors-palette-primary-300: oklch(0.8497 0.0408 274.10);\n    --colors-palette-primary-400: oklch(0.7628 0.0849 274.10);\n    --colors-palette-primary-500: oklch(0.6707 0.1537 274.10);\n    --colors-palette-primary-600: oklch(0.5835 0.2285 274.10);\n    --colors-palette-primary-700: oklch(0.4972 0.2707 274.10);\n    --colors-palette-primary-800: oklch(0.4115 0.2344 274.10);\n    --colors-palette-primary-900: oklch(0.3346 0.1863 274.10);\n    --colors-palette-primary-1000: oklch(0.2499 0.1328 274.10);\n    --colors-palette-primary-1100: oklch(0.1925 0.0974 274.10);\n    --colors-palette-primary-600-a6: oklch(0.5835 0.2285 274.10 / 0.06);\n    --colors-palette-primary-600-a9: oklch(0.5835 0.2285 274.10 / 0.09);\n    --colors-palette-primary-600-a8: oklch(0.5835 0.2285 274.10 / 0.08);\n    --colors-palette-accent-100: oklch(0.9862 0.0205 93.60);\n    --colors-palette-accent-200: oklch(0.9364 0.0378 93.60);\n    --colors-palette-accent-300: oklch(0.8789 0.1801 93.58);\n    --colors-palette-accent-400: oklch(0.7442 0.1526 93.94);\n    --colors-palette-accent-500: oklch(0.6707 0.1209 93.60);\n    --colors-palette-accent-600: oklch(0.5835 0.1195 93.60);\n    --colors-palette-accent-700: oklch(0.4972 0.0967 93.60);\n    --colors-palette-accent-800: oklch(0.4115 0.0758 93.60);\n    --colors-palette-accent-900: oklch(0.3346 0.0603 93.60);\n    --colors-palette-accent-1000: oklch(0.2499 0.0430 93.60);\n    --colors-palette-accent-1100: oklch(0.1925 0.0315 93.60);\n    --colors-palette-accent-alt-100: oklch(0.9862 0.0067 287.10);\n    --colors-palette-accent-alt-200: oklch(0.9364 0.0127 287.10);\n    --colors-palette-accent-alt-300: oklch(0.8497 0.0430 287.10);\n    --colors-palette-accent-alt-400: oklch(0.7628 0.0896 287.10);\n    --colors-palette-accent-alt-500: oklch(0.6707 0.1624 287.10);\n    --colors-palette-accent-alt-600: oklch(0.5835 0.2416 287.10);\n    --colors-palette-accent-alt-700: oklch(0.4972 0.2722 287.10);\n    --colors-palette-accent-alt-800: oklch(0.4115 0.2134 287.10);\n    --colors-palette-accent-alt-900: oklch(0.3346 0.1696 287.10);\n    --colors-palette-accent-alt-1000: oklch(0.2499 0.1209 287.10);\n    --colors-palette-accent-alt-1100: oklch(0.1925 0.0887 287.10);\n    --colors-palette-danger-100: oklch(0.9862 0.0066 29.40);\n    --colors-palette-danger-200: oklch(0.9364 0.0128 29.40);\n    --colors-palette-danger-300: oklch(0.8497 0.0452 29.40);\n    --colors-palette-danger-400: oklch(0.7628 0.0990 29.40);\n    --colors-palette-danger-500: oklch(0.6707 0.1910 29.40);\n    --colors-palette-danger-600: oklch(0.5835 0.2382 29.40);\n    --colors-palette-danger-700: oklch(0.4972 0.1928 29.40);\n    --colors-palette-danger-800: oklch(0.4115 0.1512 29.40);\n    --colors-palette-danger-900: oklch(0.3346 0.1202 29.40);\n    --colors-palette-danger-1000: oklch(0.2499 0.0857 29.40);\n    --colors-palette-danger-1100: oklch(0.1925 0.0628 29.40);\n    --colors-palette-warning-100: oklch(0.9862 0.0082 58.30);\n    --colors-palette-warning-200: oklch(0.9364 0.0156 58.30);\n    --colors-palette-warning-300: oklch(0.8497 0.0545 58.30);\n    --colors-palette-warning-400: oklch(0.7628 0.1179 58.30);\n    --colors-palette-warning-500: oklch(0.6707 0.1408 58.30);\n    --colors-palette-warning-600: oklch(0.5835 0.1392 58.30);\n    --colors-palette-warning-700: oklch(0.4972 0.1127 58.30);\n    --colors-palette-warning-800: oklch(0.4115 0.0883 58.30);\n    --colors-palette-warning-900: oklch(0.3346 0.0702 58.30);\n    --colors-palette-warning-1000: oklch(0.2499 0.0500 58.30);\n    --colors-palette-warning-1100: oklch(0.1925 0.0367 58.30);\n    --colors-palette-success-100: oklch(0.9862 0.0228 145.50);\n    --colors-palette-success-200: oklch(0.9364 0.0458 145.50);\n    --colors-palette-success-300: oklch(0.8497 0.1448 145.50);\n    --colors-palette-success-400: oklch(0.7628 0.1654 145.50);\n    --colors-palette-success-500: oklch(0.6707 0.1829 145.50);\n    --colors-palette-success-600: oklch(0.5835 0.1808 145.50);\n    --colors-palette-success-700: oklch(0.4972 0.1464 145.50);\n    --colors-palette-success-800: oklch(0.4115 0.1147 145.50);\n    --colors-palette-success-900: oklch(0.3346 0.0912 145.50);\n    --colors-palette-success-1000: oklch(0.2499 0.0650 145.50);\n    --colors-palette-success-1100: oklch(0.1925 0.0477 145.50);\n    --colors-black-a32: oklch(0.0000 0.0000 0.00 / 0.32);\n    --colors-black-a24: oklch(0.0000 0.0000 0.00 / 0.24);\n    --colors-black-a60: oklch(0.0000 0.0000 0.00 / 0.6);\n    --colors-black-a0: oklch(0.0000 0.0000 0.00 / 0);\n  }\n\n  :root, [data-color-mode=\"light\"] {\n    color-scheme: light;\n    color: var(--colors-text-default);\n    --colors-background-current: var(--colors-surface-default);\n    --colors-surface-sunken: var(--colors-palette-neutral-light-200); /** Wells, insets, code blocks — anything recessed into the page. */\n    --colors-surface-default: var(--colors-palette-neutral-light-100); /** The page background — the base every other surface elevates from. */\n    --colors-surface-raised: var(--colors-white); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */\n    --colors-surface-success: var(--colors-palette-success-200); /** The success tint behind an alert or inline confirmation. */\n    --colors-surface-warning: var(--colors-palette-warning-200); /** The warning tint behind an alert or inline caution. */\n    --colors-surface-error: var(--colors-palette-danger-200); /** The error tint behind an alert or inline validation message. */\n    --colors-surface-brand: var(--colors-palette-neutral-light-100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */\n    --colors-surface-brand-subtle: var(--colors-palette-neutral-light-100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */\n    --colors-text-default: var(--colors-palette-neutral-dark-1000); /** Body copy and headings. */\n    --colors-text-subtle: var(--colors-palette-neutral-dark-800); /** Secondary text — descriptions, metadata, helper copy. */\n    --colors-text-inverse: var(--colors-palette-neutral-light-200); /** Labels on a filled control — action-primary, -neutral, -danger. */\n    --colors-text-success: var(--colors-palette-success-900); /** Success text and icons. */\n    --colors-text-warning: var(--colors-palette-warning-900); /** Warning text and icons. Always with an icon. */\n    --colors-text-error: var(--colors-palette-danger-900); /** Error text and icons. */\n    --colors-border-strong: var(--colors-palette-neutral-dark-1100); /** Emphasis — an active field, a selected row. */\n    --colors-border-default: var(--colors-palette-neutral-dark-600); /** Any border that carries meaning — control outlines, field borders. */\n    --colors-border-subtle: var(--colors-palette-neutral-dark-300); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */\n    --colors-action-primary: var(--colors-palette-primary-800); /** Primary interactive fills, strokes, links and focus rings. */\n    --colors-action-primary-hover: var(--colors-palette-primary-900); /** Hover for action-primary. */\n    --colors-action-primary-pressed: var(--colors-palette-primary-1000); /** Pressed for action-primary. */\n    --colors-action-danger: var(--colors-palette-danger-800); /** Destructive actions — delete, remove, revoke. */\n    --colors-action-danger-hover: var(--colors-palette-danger-900); /** Hover for action-danger. */\n    --colors-action-danger-pressed: var(--colors-palette-danger-1000); /** Pressed for action-danger. */\n    --colors-action-neutral: var(--colors-palette-neutral-dark-1000); /** The neutral action fill. Button variant=\"secondary\" resolves here. */\n    --colors-action-neutral-hover: var(--colors-palette-neutral-dark-1100); /** Hover for action-neutral. */\n    --colors-action-neutral-pressed: var(--colors-black); /** Pressed for action-neutral. */\n    --colors-action-disabled: var(--colors-palette-neutral-light-400); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */\n    --colors-state-hover: var(--colors-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */\n    --colors-state-pressed: var(--colors-palette-primary-600-a9); /** Hover → pressed on the same elements. */\n    --colors-state-selected: var(--colors-palette-primary-600-a8); /** The persistent \"this one is chosen\" tint. */\n    --colors-viz-1: var(--colors-palette-primary-800); /** Categorical series 1. */\n    --colors-viz-2: var(--colors-palette-accent-700); /** Categorical series 2. */\n    --colors-viz-3: var(--colors-palette-warning-700); /** Categorical series 3. */\n    --colors-viz-4: var(--colors-palette-accent-alt-600); /** Categorical series 4. */\n    --colors-viz-5: var(--colors-palette-success-600); /** Categorical series 5. */\n    --colors-viz-6: var(--colors-palette-danger-600); /** Categorical series 6. */\n    --colors-viz-7: var(--colors-palette-neutral-dark-1000); /** Categorical series 7. */\n    --colors-viz-8: var(--colors-palette-neutral-light-600); /** Categorical series 8. */\n    --colors-viz-seq-1: var(--colors-palette-primary-600); /** Sequential step 1, low to high. */\n    --colors-viz-seq-2: var(--colors-palette-primary-700); /** Sequential step 2, low to high. */\n    --colors-viz-seq-3: var(--colors-palette-primary-800); /** Sequential step 3, low to high. */\n    --colors-viz-seq-4: var(--colors-palette-primary-900); /** Sequential step 4, low to high. */\n    --colors-shadow-key: var(--colors-palette-neutral-dark-1100-a16); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */\n    --colors-shadow-ambient: var(--colors-palette-neutral-dark-1100-a12); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */\n    --colors-shadow-scrim: var(--colors-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */\n    --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%);\n    --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%);\n  }\n\n  [data-color-mode=\"dark\"] {\n    color-scheme: dark;\n    color: var(--colors-text-default);\n    --colors-background-current: var(--colors-surface-default);\n    --colors-surface-sunken: var(--colors-black); /** Wells, insets, code blocks — anything recessed into the page. */\n    --colors-surface-default: var(--colors-palette-neutral-dark-1100); /** The page background — the base every other surface elevates from. */\n    --colors-surface-raised: var(--colors-palette-neutral-dark-1000); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */\n    --colors-surface-success: var(--colors-palette-success-1000); /** The success tint behind an alert or inline confirmation. */\n    --colors-surface-warning: var(--colors-palette-warning-1000); /** The warning tint behind an alert or inline caution. */\n    --colors-surface-error: var(--colors-palette-danger-1000); /** The error tint behind an alert or inline validation message. */\n    --colors-surface-brand: var(--colors-palette-neutral-dark-1100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */\n    --colors-surface-brand-subtle: var(--colors-palette-neutral-dark-1100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */\n    --colors-text-default: var(--colors-palette-neutral-light-200); /** Body copy and headings. */\n    --colors-text-subtle: var(--colors-palette-neutral-light-400); /** Secondary text — descriptions, metadata, helper copy. */\n    --colors-text-inverse: var(--colors-palette-neutral-dark-1000); /** Labels on a filled control — action-primary, -neutral, -danger. */\n    --colors-text-success: var(--colors-palette-success-300); /** Success text and icons. */\n    --colors-text-warning: var(--colors-palette-warning-300); /** Warning text and icons. Always with an icon. */\n    --colors-text-error: var(--colors-palette-danger-300); /** Error text and icons. */\n    --colors-border-strong: var(--colors-palette-neutral-light-100); /** Emphasis — an active field, a selected row. */\n    --colors-border-default: var(--colors-palette-neutral-light-600); /** Any border that carries meaning — control outlines, field borders. */\n    --colors-border-subtle: var(--colors-palette-neutral-light-900); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */\n    --colors-action-primary: var(--colors-palette-primary-400); /** Primary interactive fills, strokes, links and focus rings. */\n    --colors-action-primary-hover: var(--colors-palette-primary-300); /** Hover for action-primary. */\n    --colors-action-primary-pressed: var(--colors-palette-primary-200); /** Pressed for action-primary. */\n    --colors-action-danger: var(--colors-palette-danger-400); /** Destructive actions — delete, remove, revoke. */\n    --colors-action-danger-hover: var(--colors-palette-danger-300); /** Hover for action-danger. */\n    --colors-action-danger-pressed: var(--colors-palette-danger-200); /** Pressed for action-danger. */\n    --colors-action-neutral: var(--colors-palette-neutral-light-200); /** The neutral action fill. Button variant=\"secondary\" resolves here. */\n    --colors-action-neutral-hover: var(--colors-palette-neutral-light-100); /** Hover for action-neutral. */\n    --colors-action-neutral-pressed: var(--colors-white); /** Pressed for action-neutral. */\n    --colors-action-disabled: var(--colors-palette-neutral-dark-800); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */\n    --colors-state-hover: var(--colors-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */\n    --colors-state-pressed: var(--colors-palette-primary-600-a9); /** Hover → pressed on the same elements. */\n    --colors-state-selected: var(--colors-palette-primary-600-a8); /** The persistent \"this one is chosen\" tint. */\n    --colors-viz-1: var(--colors-palette-primary-500); /** Categorical series 1. */\n    --colors-viz-2: var(--colors-palette-accent-500); /** Categorical series 2. */\n    --colors-viz-3: var(--colors-palette-warning-400); /** Categorical series 3. */\n    --colors-viz-4: var(--colors-palette-accent-alt-600); /** Categorical series 4. */\n    --colors-viz-5: var(--colors-palette-success-300); /** Categorical series 5. */\n    --colors-viz-6: var(--colors-palette-danger-600); /** Categorical series 6. */\n    --colors-viz-7: var(--colors-palette-neutral-dark-500); /** Categorical series 7. */\n    --colors-viz-8: var(--colors-palette-neutral-light-600); /** Categorical series 8. */\n    --colors-viz-seq-1: var(--colors-palette-primary-600); /** Sequential step 1, low to high. */\n    --colors-viz-seq-2: var(--colors-palette-primary-500); /** Sequential step 2, low to high. */\n    --colors-viz-seq-3: var(--colors-palette-primary-400); /** Sequential step 3, low to high. */\n    --colors-viz-seq-4: var(--colors-palette-primary-300); /** Sequential step 4, low to high. */\n    --colors-shadow-key: var(--colors-black-a32); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */\n    --colors-shadow-ambient: var(--colors-black-a24); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */\n    --colors-shadow-scrim: var(--colors-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */\n    --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%);\n    --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%);\n  }\n\n  [data-brand=\"originalCodecademy\"][data-color-mode=\"light\"] {\n    --colors-shadow-ambient: var(--colors-palette-neutral-dark-1100-a0);\n    --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%);\n  }\n\n  [data-brand=\"originalCodecademy\"][data-color-mode=\"dark\"] {\n    --colors-action-primary: var(--colors-palette-accent-300);\n    --colors-action-primary-hover: var(--colors-palette-accent-400);\n    --colors-action-primary-pressed: var(--colors-palette-accent-500);\n    --colors-shadow-ambient: var(--colors-black-a0);\n    --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%);\n  }\n}\n";
+export const tokensCss = "/* Generated by scripts/build-tokens.ts from the \"skillsoft\", \"originalCodecademy\" brands (\"skillsoft\" is the default). Do not edit. */\n@layer reset, base, tokens, recipes, utilities;\n\n@layer tokens {\n  :root, [data-brand=\"skillsoft\"] {\n    --color-white: oklch(1.0000 0.0000 0.00);\n    --color-black: oklch(0.0000 0.0000 0.00);\n    --color-palette-neutral-light-100: oklch(0.9862 0.0041 93.70);\n    --color-palette-neutral-light-200: oklch(0.9364 0.0075 93.70);\n    --color-palette-neutral-light-300: oklch(0.8497 0.0191 93.70);\n    --color-palette-neutral-light-400: oklch(0.7628 0.0218 93.70);\n    --color-palette-neutral-light-500: oklch(0.6707 0.0241 93.70);\n    --color-palette-neutral-light-600: oklch(0.5835 0.0239 93.70);\n    --color-palette-neutral-light-700: oklch(0.4972 0.0193 93.70);\n    --color-palette-neutral-light-800: oklch(0.4115 0.0151 93.70);\n    --color-palette-neutral-light-900: oklch(0.3346 0.0120 93.70);\n    --color-palette-neutral-light-1000: oklch(0.2499 0.0086 93.70);\n    --color-palette-neutral-light-1100: oklch(0.1925 0.0063 93.70);\n    --color-palette-neutral-dark-100: oklch(0.9862 0.0012 270.70);\n    --color-palette-neutral-dark-200: oklch(0.9364 0.0024 270.70);\n    --color-palette-neutral-dark-300: oklch(0.8497 0.0081 270.70);\n    --color-palette-neutral-dark-400: oklch(0.7628 0.0168 270.70);\n    --color-palette-neutral-dark-500: oklch(0.6707 0.0305 270.70);\n    --color-palette-neutral-dark-600: oklch(0.5835 0.0454 270.70);\n    --color-palette-neutral-dark-700: oklch(0.4972 0.0538 270.70);\n    --color-palette-neutral-dark-800: oklch(0.4115 0.0482 270.70);\n    --color-palette-neutral-dark-900: oklch(0.3346 0.0383 270.70);\n    --color-palette-neutral-dark-1000: oklch(0.2499 0.0273 270.70);\n    --color-palette-neutral-dark-1100: oklch(0.1925 0.0200 270.70);\n    --color-palette-neutral-dark-1100-a16: oklch(0.1925 0.0200 270.70 / 0.16);\n    --color-palette-neutral-dark-1100-a12: oklch(0.1925 0.0200 270.70 / 0.12);\n    --color-palette-primary-100: oklch(0.9862 0.0064 262.40);\n    --color-palette-primary-200: oklch(0.9364 0.0121 262.40);\n    --color-palette-primary-300: oklch(0.8497 0.0407 262.40);\n    --color-palette-primary-400: oklch(0.7628 0.0846 262.40);\n    --color-palette-primary-500: oklch(0.6707 0.1531 262.40);\n    --color-palette-primary-600: oklch(0.5835 0.2274 262.40);\n    --color-palette-primary-700: oklch(0.4972 0.2254 262.40);\n    --color-palette-primary-800: oklch(0.4115 0.1767 262.40);\n    --color-palette-primary-900: oklch(0.3346 0.1405 262.40);\n    --color-palette-primary-1000: oklch(0.2499 0.1001 262.40);\n    --color-palette-primary-1100: oklch(0.1925 0.0734 262.40);\n    --color-palette-primary-600-a6: oklch(0.5835 0.2274 262.40 / 0.06);\n    --color-palette-primary-600-a9: oklch(0.5835 0.2274 262.40 / 0.09);\n    --color-palette-primary-600-a8: oklch(0.5835 0.2274 262.40 / 0.08);\n    --color-palette-accent-100: oklch(0.9862 0.0073 357.30);\n    --color-palette-accent-200: oklch(0.9364 0.0141 357.30);\n    --color-palette-accent-300: oklch(0.8497 0.0499 357.30);\n    --color-palette-accent-400: oklch(0.7628 0.1100 357.30);\n    --color-palette-accent-500: oklch(0.6707 0.2144 357.30);\n    --color-palette-accent-600: oklch(0.5835 0.2380 357.30);\n    --color-palette-accent-700: oklch(0.4972 0.1927 357.30);\n    --color-palette-accent-800: oklch(0.4115 0.1511 357.30);\n    --color-palette-accent-900: oklch(0.3346 0.1201 357.30);\n    --color-palette-accent-1000: oklch(0.2499 0.0856 357.30);\n    --color-palette-accent-1100: oklch(0.1925 0.0628 357.30);\n    --color-palette-accent-alt-100: oklch(0.9862 0.0067 287.10);\n    --color-palette-accent-alt-200: oklch(0.9364 0.0127 287.10);\n    --color-palette-accent-alt-300: oklch(0.8497 0.0430 287.10);\n    --color-palette-accent-alt-400: oklch(0.7628 0.0896 287.10);\n    --color-palette-accent-alt-500: oklch(0.6707 0.1624 287.10);\n    --color-palette-accent-alt-600: oklch(0.5835 0.2416 287.10);\n    --color-palette-accent-alt-700: oklch(0.4972 0.2722 287.10);\n    --color-palette-accent-alt-800: oklch(0.4115 0.2134 287.10);\n    --color-palette-accent-alt-900: oklch(0.3346 0.1696 287.10);\n    --color-palette-accent-alt-1000: oklch(0.2499 0.1209 287.10);\n    --color-palette-accent-alt-1100: oklch(0.1925 0.0887 287.10);\n    --color-palette-danger-100: oklch(0.9862 0.0066 17.30);\n    --color-palette-danger-200: oklch(0.9364 0.0128 17.30);\n    --color-palette-danger-300: oklch(0.8497 0.0452 17.30);\n    --color-palette-danger-400: oklch(0.7628 0.0993 17.30);\n    --color-palette-danger-500: oklch(0.6707 0.1924 17.30);\n    --color-palette-danger-600: oklch(0.5835 0.2336 17.30);\n    --color-palette-danger-700: oklch(0.4972 0.1891 17.30);\n    --color-palette-danger-800: oklch(0.4115 0.1482 17.30);\n    --color-palette-danger-900: oklch(0.3346 0.1178 17.30);\n    --color-palette-danger-1000: oklch(0.2499 0.0840 17.30);\n    --color-palette-danger-1100: oklch(0.1925 0.0616 17.30);\n    --color-palette-warning-100: oklch(0.9862 0.0160 88.00);\n    --color-palette-warning-200: oklch(0.9364 0.0300 88.00);\n    --color-palette-warning-300: oklch(0.8497 0.0955 88.00);\n    --color-palette-warning-400: oklch(0.7628 0.1091 88.00);\n    --color-palette-warning-500: oklch(0.6707 0.1206 88.00);\n    --color-palette-warning-600: oklch(0.5835 0.1192 88.00);\n    --color-palette-warning-700: oklch(0.4972 0.0965 88.00);\n    --color-palette-warning-800: oklch(0.4115 0.0757 88.00);\n    --color-palette-warning-900: oklch(0.3346 0.0601 88.00);\n    --color-palette-warning-1000: oklch(0.2499 0.0429 88.00);\n    --color-palette-warning-1100: oklch(0.1925 0.0314 88.00);\n    --color-palette-success-100: oklch(0.9862 0.0170 200.00);\n    --color-palette-success-200: oklch(0.9364 0.0318 200.00);\n    --color-palette-success-300: oklch(0.8497 0.0794 200.00);\n    --color-palette-success-400: oklch(0.7628 0.0907 200.00);\n    --color-palette-success-500: oklch(0.6707 0.1003 200.00);\n    --color-palette-success-600: oklch(0.5835 0.0991 200.00);\n    --color-palette-success-700: oklch(0.4972 0.0803 200.00);\n    --color-palette-success-800: oklch(0.4115 0.0629 200.00);\n    --color-palette-success-900: oklch(0.3346 0.0500 200.00);\n    --color-palette-success-1000: oklch(0.2499 0.0356 200.00);\n    --color-palette-success-1100: oklch(0.1925 0.0261 200.00);\n    --color-black-a32: oklch(0.0000 0.0000 0.00 / 0.32);\n    --color-black-a24: oklch(0.0000 0.0000 0.00 / 0.24);\n    --color-black-a60: oklch(0.0000 0.0000 0.00 / 0.6);\n  }\n\n  [data-brand=\"originalCodecademy\"] {\n    --color-white: oklch(1.0000 0.0000 0.00);\n    --color-black: oklch(0.0000 0.0000 0.00);\n    --color-palette-neutral-light-100: oklch(0.9862 0.0016 58.80);\n    --color-palette-neutral-light-200: oklch(0.9364 0.0031 58.80);\n    --color-palette-neutral-light-300: oklch(0.8497 0.0109 58.80);\n    --color-palette-neutral-light-400: oklch(0.7628 0.0237 58.80);\n    --color-palette-neutral-light-500: oklch(0.6707 0.0280 58.80);\n    --color-palette-neutral-light-600: oklch(0.5835 0.0277 58.80);\n    --color-palette-neutral-light-700: oklch(0.4972 0.0224 58.80);\n    --color-palette-neutral-light-800: oklch(0.4115 0.0175 58.80);\n    --color-palette-neutral-light-900: oklch(0.3346 0.0139 58.80);\n    --color-palette-neutral-light-1000: oklch(0.2499 0.0099 58.80);\n    --color-palette-neutral-light-1100: oklch(0.1925 0.0073 58.80);\n    --color-palette-neutral-dark-100: oklch(0.9862 0.0012 271.30);\n    --color-palette-neutral-dark-200: oklch(0.9364 0.0024 271.30);\n    --color-palette-neutral-dark-300: oklch(0.8497 0.0081 271.30);\n    --color-palette-neutral-dark-400: oklch(0.7628 0.0169 271.30);\n    --color-palette-neutral-dark-500: oklch(0.6707 0.0306 271.30);\n    --color-palette-neutral-dark-600: oklch(0.5835 0.0454 271.30);\n    --color-palette-neutral-dark-700: oklch(0.4972 0.0538 271.30);\n    --color-palette-neutral-dark-800: oklch(0.4115 0.0479 271.30);\n    --color-palette-neutral-dark-900: oklch(0.3346 0.0381 271.30);\n    --color-palette-neutral-dark-1000: oklch(0.2499 0.0272 271.30);\n    --color-palette-neutral-dark-1100: oklch(0.1925 0.0199 271.30);\n    --color-palette-neutral-dark-1100-a16: oklch(0.1925 0.0199 271.30 / 0.16);\n    --color-palette-neutral-dark-1100-a12: oklch(0.1925 0.0199 271.30 / 0.12);\n    --color-palette-neutral-dark-1100-a0: oklch(0.1925 0.0199 271.30 / 0);\n    --color-palette-primary-100: oklch(0.9862 0.0064 274.10);\n    --color-palette-primary-200: oklch(0.9364 0.0121 274.10);\n    --color-palette-primary-300: oklch(0.8497 0.0408 274.10);\n    --color-palette-primary-400: oklch(0.7628 0.0849 274.10);\n    --color-palette-primary-500: oklch(0.6707 0.1537 274.10);\n    --color-palette-primary-600: oklch(0.5835 0.2285 274.10);\n    --color-palette-primary-700: oklch(0.4972 0.2707 274.10);\n    --color-palette-primary-800: oklch(0.4115 0.2344 274.10);\n    --color-palette-primary-900: oklch(0.3346 0.1863 274.10);\n    --color-palette-primary-1000: oklch(0.2499 0.1328 274.10);\n    --color-palette-primary-1100: oklch(0.1925 0.0974 274.10);\n    --color-palette-primary-600-a6: oklch(0.5835 0.2285 274.10 / 0.06);\n    --color-palette-primary-600-a9: oklch(0.5835 0.2285 274.10 / 0.09);\n    --color-palette-primary-600-a8: oklch(0.5835 0.2285 274.10 / 0.08);\n    --color-palette-accent-100: oklch(0.9862 0.0205 93.60);\n    --color-palette-accent-200: oklch(0.9364 0.0378 93.60);\n    --color-palette-accent-300: oklch(0.8789 0.1801 93.58);\n    --color-palette-accent-400: oklch(0.7442 0.1526 93.94);\n    --color-palette-accent-500: oklch(0.6707 0.1209 93.60);\n    --color-palette-accent-600: oklch(0.5835 0.1195 93.60);\n    --color-palette-accent-700: oklch(0.4972 0.0967 93.60);\n    --color-palette-accent-800: oklch(0.4115 0.0758 93.60);\n    --color-palette-accent-900: oklch(0.3346 0.0603 93.60);\n    --color-palette-accent-1000: oklch(0.2499 0.0430 93.60);\n    --color-palette-accent-1100: oklch(0.1925 0.0315 93.60);\n    --color-palette-accent-alt-100: oklch(0.9862 0.0067 287.10);\n    --color-palette-accent-alt-200: oklch(0.9364 0.0127 287.10);\n    --color-palette-accent-alt-300: oklch(0.8497 0.0430 287.10);\n    --color-palette-accent-alt-400: oklch(0.7628 0.0896 287.10);\n    --color-palette-accent-alt-500: oklch(0.6707 0.1624 287.10);\n    --color-palette-accent-alt-600: oklch(0.5835 0.2416 287.10);\n    --color-palette-accent-alt-700: oklch(0.4972 0.2722 287.10);\n    --color-palette-accent-alt-800: oklch(0.4115 0.2134 287.10);\n    --color-palette-accent-alt-900: oklch(0.3346 0.1696 287.10);\n    --color-palette-accent-alt-1000: oklch(0.2499 0.1209 287.10);\n    --color-palette-accent-alt-1100: oklch(0.1925 0.0887 287.10);\n    --color-palette-danger-100: oklch(0.9862 0.0066 29.40);\n    --color-palette-danger-200: oklch(0.9364 0.0128 29.40);\n    --color-palette-danger-300: oklch(0.8497 0.0452 29.40);\n    --color-palette-danger-400: oklch(0.7628 0.0990 29.40);\n    --color-palette-danger-500: oklch(0.6707 0.1910 29.40);\n    --color-palette-danger-600: oklch(0.5835 0.2382 29.40);\n    --color-palette-danger-700: oklch(0.4972 0.1928 29.40);\n    --color-palette-danger-800: oklch(0.4115 0.1512 29.40);\n    --color-palette-danger-900: oklch(0.3346 0.1202 29.40);\n    --color-palette-danger-1000: oklch(0.2499 0.0857 29.40);\n    --color-palette-danger-1100: oklch(0.1925 0.0628 29.40);\n    --color-palette-warning-100: oklch(0.9862 0.0082 58.30);\n    --color-palette-warning-200: oklch(0.9364 0.0156 58.30);\n    --color-palette-warning-300: oklch(0.8497 0.0545 58.30);\n    --color-palette-warning-400: oklch(0.7628 0.1179 58.30);\n    --color-palette-warning-500: oklch(0.6707 0.1408 58.30);\n    --color-palette-warning-600: oklch(0.5835 0.1392 58.30);\n    --color-palette-warning-700: oklch(0.4972 0.1127 58.30);\n    --color-palette-warning-800: oklch(0.4115 0.0883 58.30);\n    --color-palette-warning-900: oklch(0.3346 0.0702 58.30);\n    --color-palette-warning-1000: oklch(0.2499 0.0500 58.30);\n    --color-palette-warning-1100: oklch(0.1925 0.0367 58.30);\n    --color-palette-success-100: oklch(0.9862 0.0228 145.50);\n    --color-palette-success-200: oklch(0.9364 0.0458 145.50);\n    --color-palette-success-300: oklch(0.8497 0.1448 145.50);\n    --color-palette-success-400: oklch(0.7628 0.1654 145.50);\n    --color-palette-success-500: oklch(0.6707 0.1829 145.50);\n    --color-palette-success-600: oklch(0.5835 0.1808 145.50);\n    --color-palette-success-700: oklch(0.4972 0.1464 145.50);\n    --color-palette-success-800: oklch(0.4115 0.1147 145.50);\n    --color-palette-success-900: oklch(0.3346 0.0912 145.50);\n    --color-palette-success-1000: oklch(0.2499 0.0650 145.50);\n    --color-palette-success-1100: oklch(0.1925 0.0477 145.50);\n    --color-black-a32: oklch(0.0000 0.0000 0.00 / 0.32);\n    --color-black-a24: oklch(0.0000 0.0000 0.00 / 0.24);\n    --color-black-a60: oklch(0.0000 0.0000 0.00 / 0.6);\n    --color-black-a0: oklch(0.0000 0.0000 0.00 / 0);\n  }\n\n  :root, [data-color-mode=\"light\"] {\n    color-scheme: light;\n    color: var(--color-text-default);\n    --color-background-current: var(--color-surface-default);\n    --color-surface-sunken: var(--color-palette-neutral-light-200); /** Wells, insets, code blocks — anything recessed into the page. */\n    --color-surface-default: var(--color-palette-neutral-light-100); /** The page background — the base every other surface elevates from. */\n    --color-surface-raised: var(--color-white); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */\n    --color-surface-success: var(--color-palette-success-200); /** The success tint behind an alert or inline confirmation. */\n    --color-surface-warning: var(--color-palette-warning-200); /** The warning tint behind an alert or inline caution. */\n    --color-surface-error: var(--color-palette-danger-200); /** The error tint behind an alert or inline validation message. */\n    --color-surface-brand: var(--color-palette-neutral-light-100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */\n    --color-surface-brand-subtle: var(--color-palette-neutral-light-100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */\n    --color-text-default: var(--color-palette-neutral-dark-1000); /** Body copy and headings. */\n    --color-text-subtle: var(--color-palette-neutral-dark-800); /** Secondary text — descriptions, metadata, helper copy. */\n    --color-text-inverse: var(--color-palette-neutral-light-200); /** Labels on a filled control — action-primary, -neutral, -danger. */\n    --color-text-success: var(--color-palette-success-900); /** Success text and icons. */\n    --color-text-warning: var(--color-palette-warning-900); /** Warning text and icons. Always with an icon. */\n    --color-text-error: var(--color-palette-danger-900); /** Error text and icons. */\n    --color-border-strong: var(--color-palette-neutral-dark-1100); /** Emphasis — an active field, a selected row. */\n    --color-border-default: var(--color-palette-neutral-dark-600); /** Any border that carries meaning — control outlines, field borders. */\n    --color-border-subtle: var(--color-palette-neutral-dark-300); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */\n    --color-action-primary: var(--color-palette-primary-800); /** Primary interactive fills, strokes, links and focus rings. */\n    --color-action-primary-hover: var(--color-palette-primary-900); /** Hover for action-primary. */\n    --color-action-primary-pressed: var(--color-palette-primary-1000); /** Pressed for action-primary. */\n    --color-action-danger: var(--color-palette-danger-800); /** Destructive actions — delete, remove, revoke. */\n    --color-action-danger-hover: var(--color-palette-danger-900); /** Hover for action-danger. */\n    --color-action-danger-pressed: var(--color-palette-danger-1000); /** Pressed for action-danger. */\n    --color-action-neutral: var(--color-palette-neutral-dark-1000); /** The neutral action fill. Button variant=\"secondary\" resolves here. */\n    --color-action-neutral-hover: var(--color-palette-neutral-dark-1100); /** Hover for action-neutral. */\n    --color-action-neutral-pressed: var(--color-black); /** Pressed for action-neutral. */\n    --color-action-disabled: var(--color-palette-neutral-light-400); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */\n    --color-state-hover: var(--color-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */\n    --color-state-pressed: var(--color-palette-primary-600-a9); /** Hover → pressed on the same elements. */\n    --color-state-selected: var(--color-palette-primary-600-a8); /** The persistent \"this one is chosen\" tint. */\n    --color-viz-1: var(--color-palette-primary-800); /** Categorical series 1. */\n    --color-viz-2: var(--color-palette-accent-700); /** Categorical series 2. */\n    --color-viz-3: var(--color-palette-warning-700); /** Categorical series 3. */\n    --color-viz-4: var(--color-palette-accent-alt-600); /** Categorical series 4. */\n    --color-viz-5: var(--color-palette-success-600); /** Categorical series 5. */\n    --color-viz-6: var(--color-palette-danger-600); /** Categorical series 6. */\n    --color-viz-7: var(--color-palette-neutral-dark-1000); /** Categorical series 7. */\n    --color-viz-8: var(--color-palette-neutral-light-600); /** Categorical series 8. */\n    --color-viz-seq-1: var(--color-palette-primary-600); /** Sequential step 1, low to high. */\n    --color-viz-seq-2: var(--color-palette-primary-700); /** Sequential step 2, low to high. */\n    --color-viz-seq-3: var(--color-palette-primary-800); /** Sequential step 3, low to high. */\n    --color-viz-seq-4: var(--color-palette-primary-900); /** Sequential step 4, low to high. */\n    --color-shadow-key: var(--color-palette-neutral-dark-1100-a16); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */\n    --color-shadow-ambient: var(--color-palette-neutral-dark-1100-a12); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */\n    --color-shadow-scrim: var(--color-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */\n    --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%);\n    --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%);\n  }\n\n  [data-color-mode=\"dark\"] {\n    color-scheme: dark;\n    color: var(--color-text-default);\n    --color-background-current: var(--color-surface-default);\n    --color-surface-sunken: var(--color-black); /** Wells, insets, code blocks — anything recessed into the page. */\n    --color-surface-default: var(--color-palette-neutral-dark-1100); /** The page background — the base every other surface elevates from. */\n    --color-surface-raised: var(--color-palette-neutral-dark-1000); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */\n    --color-surface-success: var(--color-palette-success-1000); /** The success tint behind an alert or inline confirmation. */\n    --color-surface-warning: var(--color-palette-warning-1000); /** The warning tint behind an alert or inline caution. */\n    --color-surface-error: var(--color-palette-danger-1000); /** The error tint behind an alert or inline validation message. */\n    --color-surface-brand: var(--color-palette-neutral-dark-1100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */\n    --color-surface-brand-subtle: var(--color-palette-neutral-dark-1100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */\n    --color-text-default: var(--color-palette-neutral-light-200); /** Body copy and headings. */\n    --color-text-subtle: var(--color-palette-neutral-light-400); /** Secondary text — descriptions, metadata, helper copy. */\n    --color-text-inverse: var(--color-palette-neutral-dark-1000); /** Labels on a filled control — action-primary, -neutral, -danger. */\n    --color-text-success: var(--color-palette-success-300); /** Success text and icons. */\n    --color-text-warning: var(--color-palette-warning-300); /** Warning text and icons. Always with an icon. */\n    --color-text-error: var(--color-palette-danger-300); /** Error text and icons. */\n    --color-border-strong: var(--color-palette-neutral-light-100); /** Emphasis — an active field, a selected row. */\n    --color-border-default: var(--color-palette-neutral-light-600); /** Any border that carries meaning — control outlines, field borders. */\n    --color-border-subtle: var(--color-palette-neutral-light-900); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */\n    --color-action-primary: var(--color-palette-primary-400); /** Primary interactive fills, strokes, links and focus rings. */\n    --color-action-primary-hover: var(--color-palette-primary-300); /** Hover for action-primary. */\n    --color-action-primary-pressed: var(--color-palette-primary-200); /** Pressed for action-primary. */\n    --color-action-danger: var(--color-palette-danger-400); /** Destructive actions — delete, remove, revoke. */\n    --color-action-danger-hover: var(--color-palette-danger-300); /** Hover for action-danger. */\n    --color-action-danger-pressed: var(--color-palette-danger-200); /** Pressed for action-danger. */\n    --color-action-neutral: var(--color-palette-neutral-light-200); /** The neutral action fill. Button variant=\"secondary\" resolves here. */\n    --color-action-neutral-hover: var(--color-palette-neutral-light-100); /** Hover for action-neutral. */\n    --color-action-neutral-pressed: var(--color-white); /** Pressed for action-neutral. */\n    --color-action-disabled: var(--color-palette-neutral-dark-800); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */\n    --color-state-hover: var(--color-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */\n    --color-state-pressed: var(--color-palette-primary-600-a9); /** Hover → pressed on the same elements. */\n    --color-state-selected: var(--color-palette-primary-600-a8); /** The persistent \"this one is chosen\" tint. */\n    --color-viz-1: var(--color-palette-primary-500); /** Categorical series 1. */\n    --color-viz-2: var(--color-palette-accent-500); /** Categorical series 2. */\n    --color-viz-3: var(--color-palette-warning-400); /** Categorical series 3. */\n    --color-viz-4: var(--color-palette-accent-alt-600); /** Categorical series 4. */\n    --color-viz-5: var(--color-palette-success-300); /** Categorical series 5. */\n    --color-viz-6: var(--color-palette-danger-600); /** Categorical series 6. */\n    --color-viz-7: var(--color-palette-neutral-dark-500); /** Categorical series 7. */\n    --color-viz-8: var(--color-palette-neutral-light-600); /** Categorical series 8. */\n    --color-viz-seq-1: var(--color-palette-primary-600); /** Sequential step 1, low to high. */\n    --color-viz-seq-2: var(--color-palette-primary-500); /** Sequential step 2, low to high. */\n    --color-viz-seq-3: var(--color-palette-primary-400); /** Sequential step 3, low to high. */\n    --color-viz-seq-4: var(--color-palette-primary-300); /** Sequential step 4, low to high. */\n    --color-shadow-key: var(--color-black-a32); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */\n    --color-shadow-ambient: var(--color-black-a24); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */\n    --color-shadow-scrim: var(--color-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */\n    --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%);\n    --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%);\n  }\n\n  [data-brand=\"originalCodecademy\"][data-color-mode=\"light\"] {\n    --color-shadow-ambient: var(--color-palette-neutral-dark-1100-a0);\n    --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%);\n  }\n\n  [data-brand=\"originalCodecademy\"][data-color-mode=\"dark\"] {\n    --color-action-primary: var(--color-palette-accent-300);\n    --color-action-primary-hover: var(--color-palette-accent-400);\n    --color-action-primary-pressed: var(--color-palette-accent-500);\n    --color-shadow-ambient: var(--color-black-a0);\n    --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%);\n  }\n}\n";
diff --git a/packages/gamut/src/Alert/__tests__/Alert.test.tsx b/packages/gamut/src/Alert/__tests__/Alert.test.tsx
index ee2b2c82ac..86d6305cb8 100644
--- a/packages/gamut/src/Alert/__tests__/Alert.test.tsx
+++ b/packages/gamut/src/Alert/__tests__/Alert.test.tsx
@@ -156,7 +156,7 @@ describe('Alert', () => {
 
       /* A forced mode writes that mode's role variables into the button's class. */
       expect(cta).not.toHaveStyleRule(
-        '--colors-action-neutral',
+        '--color-action-neutral',
         expect.any(String)
       );
     });
@@ -166,7 +166,7 @@ describe('Alert', () => {
 
       expect(view.getByRole('status')).toHaveStyleRule(
         'color',
-        'var(--colors-text-error)'
+        'var(--color-text-error)'
       );
     });
 
@@ -175,7 +175,7 @@ describe('Alert', () => {
 
       expect(view.getByRole('status')).toHaveStyleRule(
         'color',
-        'var(--colors-text-default)'
+        'var(--color-text-default)'
       );
     });
 
@@ -184,7 +184,7 @@ describe('Alert', () => {
 
       expect(view.getByRole('status')).toHaveStyleRule(
         'border-color',
-        'var(--colors-text-success)'
+        'var(--color-text-success)'
       );
     });
 
@@ -193,7 +193,7 @@ describe('Alert', () => {
 
       expect(view.getByRole('status')).not.toHaveStyleRule(
         'border-color',
-        'var(--colors-text-success)'
+        'var(--color-text-success)'
       );
     });
   });
diff --git a/packages/gamut/src/Video/lib/VidstackPlayer/vidstack-styles.css b/packages/gamut/src/Video/lib/VidstackPlayer/vidstack-styles.css
index 8b8dbf4d3c..7d6dd2517f 100644
--- a/packages/gamut/src/Video/lib/VidstackPlayer/vidstack-styles.css
+++ b/packages/gamut/src/Video/lib/VidstackPlayer/vidstack-styles.css
@@ -29,10 +29,10 @@ iframe.vds-youtube[data-no-controls] {
 
 /* Small layout volume / time slider */
 :where(.vds-video-layout[data-sm] .vds-volume-slider .vds-slider-track) {
-  background-color: var(--colors-gray-600);
+  background-color: var(--color-gray-600);
 }
 :where(.vds-video-layout[data-sm] .vds-volume-slider .vds-slider-track-fill) {
-  background-color: var(--colors-secondary);
+  background-color: var(--color-secondary);
 }
 .vds-video-layout .vds-time-slider .vds-slider-value {
   border: unset;
@@ -59,7 +59,7 @@ iframe.vds-youtube[data-no-controls] {
   left: calc(50% - 0.5rem);
   background-image: linear-gradient(
     to top left,
-    var(--colors-background-contrast) 55%,
+    var(--color-background-contrast) 55%,
     rgba(0, 0, 0, 0) 20%
   );
 }
@@ -70,7 +70,7 @@ iframe.vds-youtube[data-no-controls] {
   left: calc(50% - 0.5rem);
   background-image: linear-gradient(
     to bottom right,
-    var(--colors-background-contrast) 55%,
+    var(--color-background-contrast) 55%,
     rgba(0, 0, 0, 0) 20%
   );
 }
diff --git a/packages/styleguide/src/lib/Foundations/ColorMode/CssContract.stories.tsx b/packages/styleguide/src/lib/Foundations/ColorMode/CssContract.stories.tsx
index cedcfa0fc2..6867e9f442 100644
--- a/packages/styleguide/src/lib/Foundations/ColorMode/CssContract.stories.tsx
+++ b/packages/styleguide/src/lib/Foundations/ColorMode/CssContract.stories.tsx
@@ -21,7 +21,7 @@ type Mode = keyof typeof roles;
 
 const panel: React.CSSProperties = {
   padding: 16,
-  border: '1px solid var(--colors-border-default)',
+  border: '1px solid var(--color-border-default)',
   borderRadius: 4,
 };
 
@@ -32,12 +32,12 @@ const Panel: React.FC<{ mode: Mode; children?: React.ReactNode }> = ({
 }) => (
   <div
     data-color-mode={mode}
-    style={{ ...panel, background: 'var(--colors-surface-default)' }}
+    style={{ ...panel, background: 'var(--color-surface-default)' }}
   >
     <p style={{ margin: '0 0 8px' }}>
       {mode} — text-default,{' '}
-      <span style={{ color: 'var(--colors-text-subtle)' }}>text-subtle</span>,{' '}
-      <span style={{ color: 'var(--colors-action-primary)' }}>
+      <span style={{ color: 'var(--color-text-subtle)' }}>text-subtle</span>,{' '}
+      <span style={{ color: 'var(--color-action-primary)' }}>
         action-primary
       </span>
     </p>
@@ -71,7 +71,7 @@ const CssSurface: React.FC<{
   const key = (
     color in roles[outer] ? roles[outer][color as RoleName].ref : color
   ) as PaletteKey;
-  const bg = `var(--colors-${key})`;
+  const bg = `var(--color-${key})`;
   return (
     <div
       data-color-mode={contentModes[key]}
@@ -79,12 +79,12 @@ const CssSurface: React.FC<{
         {
           ...panel,
           background: bg,
-          '--colors-background-current': bg,
+          '--color-background-current': bg,
         } as React.CSSProperties
       }
     >
       {color}
-      <span style={{ color: 'var(--colors-text-subtle)' }}>
+      <span style={{ color: 'var(--color-text-subtle)' }}>
         {' '}
         → {contentModes[key]} content
       </span>
@@ -132,14 +132,14 @@ export const Surfaces: Story = {
 
 /*
  * gamut components inside a subtree themed only by CSS. Their colors are
- * `var(--colors-*)` names, so they follow the attribute. What doesn't follow:
+ * `var(--color-*)` names, so they follow the attribute. What doesn't follow:
  * anything that reads the mode from Emotion's theme in JS.
  */
 export const EmotionInsideCss: Story = {
   render: () => (
     <div
       data-color-mode="dark"
-      style={{ ...panel, background: 'var(--colors-surface-default)' }}
+      style={{ ...panel, background: 'var(--color-surface-default)' }}
     >
       <Text as="p" mb={16}>
         Text, <Anchor href="#">an Anchor</Anchor>, and buttons, under a plain{' '}
diff --git a/packages/variance/integration/__tests__/variance.test.ts b/packages/variance/integration/__tests__/variance.test.ts
index 62cec102ed..8b14c488cd 100644
--- a/packages/variance/integration/__tests__/variance.test.ts
+++ b/packages/variance/integration/__tests__/variance.test.ts
@@ -266,7 +266,7 @@ describe('css', () => {
 
     expect(returnedFn({ theme })).toEqual({
       width: '100%',
-      boxShadow: '0px 0px 0px 0px var(--colors-black)',
+      boxShadow: '0px 0px 0px 0px var(--color-black)',
       XS: { width: '200%' },
       '&:hover': {
         width: '50%',
diff --git a/packages/variance/src/createTheme/createTheme.test.ts b/packages/variance/src/createTheme/createTheme.test.ts
index 7e31bcf5b3..2876dd1b66 100644
--- a/packages/variance/src/createTheme/createTheme.test.ts
+++ b/packages/variance/src/createTheme/createTheme.test.ts
@@ -67,7 +67,7 @@ describe('createTheme', () => {
     };
     const cssVariableReferences = mapValues(
       staticColors,
-      (val) => `var(--colors-${val})`
+      (val) => `var(--color-${val})`
     );
     const builder = createTheme(base);
     it('creates color variables', () => {
@@ -89,12 +89,12 @@ describe('createTheme', () => {
         .build();
 
       expect(theme.colors).toEqual({
-        ...mapValues(staticColors, (val) => `var(--colors-${val})`),
-        primary: 'var(--colors-primary)',
+        ...mapValues(staticColors, (val) => `var(--color-${val})`),
+        primary: 'var(--color-primary)',
       });
 
       expect(theme._variables.mode).toEqual({
-        '--colors-primary': 'var(--colors-red)',
+        '--color-primary': 'var(--color-red)',
       });
     });
 
diff --git a/packages/variance/src/createTheme/createTheme.ts b/packages/variance/src/createTheme/createTheme.ts
index 78eed910bd..971abad705 100644
--- a/packages/variance/src/createTheme/createTheme.ts
+++ b/packages/variance/src/createTheme/createTheme.ts
@@ -53,7 +53,7 @@ class ThemeBuilder<T extends AbstractTheme> {
 
   /**
    *
-   * @param colors A map of color tokens to add to the theme. These tokens are immediately converted to CSS Variables `--colors-${key}`.
+   * @param colors A map of color tokens to add to the theme. These tokens are immediately converted to CSS Variables `--color-${key}`.
    * @example .addColors({ navy: 'navy', hyper: 'purple' })
    */
   addColors<
@@ -64,14 +64,14 @@ class ThemeBuilder<T extends AbstractTheme> {
   ): ThemeBuilder<
     MergeTheme<
       T & PrivateThemeKeys,
-      Record<'colors', KeyAsVariable<NextColors, 'colors'>>
+      Record<'colors', KeyAsVariable<NextColors, 'color'>>
     >
   > {
     const flatColors = flattenScale(colors);
     const { variables, tokens } = serializeTokens(
       // TS 5.9+ no longer resolves LiteralPaths<> as assignable to SerializedTokensInput; flattened scales are plain token maps at runtime.
       flatColors as Record<string, string | number | CSSObject>,
-      'colors',
+      'color',
       this.#theme
     );
     this.#theme = merge({}, this.#theme, {
@@ -107,7 +107,7 @@ class ThemeBuilder<T extends AbstractTheme> {
       {
         colors: KeyAsVariable<
           LiteralPaths<Config[keyof Config], '-', '_'>,
-          'colors'
+          'color'
         > &
           T['colors'];
         modes: Merge<T['modes'], ColorAliases>;
@@ -123,7 +123,7 @@ class ThemeBuilder<T extends AbstractTheme> {
         merge({}, this.#theme.modes?.[initialMode], modes[initialMode]),
         (color) => this.#theme.colors[color]
       ),
-      'colors',
+      'color',
       this.#theme
     );