# Colors

Every colour token in Cynco UI, per theme. Tokens are CSS variables (`var(--card)`) and Tailwind colours (`bg-card`, `text-tertiary-foreground`). Light is the default; switch with `class="dark"` or `data-theme` (`dark`, `modern`, `modern-dark`).

## Text

Four steps of text, each with a purpose, plus placeholder.

| Token | Light | Dark | Modern | Modern dark | Use |
| --- | --- | --- | --- | --- | --- |
| `foreground` | `#121212` | `#ddd` | `#121212` | `#ddd` | Primary text and icons on `background`, `card` and `interactive-secondary`. |
| `muted-foreground` | `#444` | `#ccc` | `#444` | `#ccc` | Secondary text: body copy, form text and labels (`text-body`, `text-form-label`) on `background` and `card`. |
| `tertiary-foreground` | `#666` | `#999` | `#666` | `#999` | Tertiary text, the most-used text colour: captions, table cells, breadcrumbs, descriptions on `background` and `card`. |
| `subtle` | `#6e6e6e` | `#919191` | `#6e6e6e` | `#919191` | Quiet metadata text and icons (`text-body-secondary`), search hints. About 4.35:1 on `background` in Light and 3.98:1 in Dark, just under 4.5:1, so keep it to non-essential metadata and icons. |
| `placeholder` | `#737373` | `#909090` | `#737373` | `#909090` | Input placeholder text and disabled checkbox labels (2.3:1 Light, 3.2:1 Dark) — placeholder, never content. |

## Surfaces

The page, the app chrome around it, cards and raised controls.

| Token | Light | Dark | Modern | Modern dark | Use |
| --- | --- | --- | --- | --- | --- |
| `background` | `#fafaf9` | `#161616` | `#ffffff` | `#0a0a0a` | Page background of the main content area (`bg-background`); body default. |
| `outer-background` | `#f5f5f4` | `#121212` | `#fafaf9` | `#000000` | App chrome behind the main content panel: sidebar area, mobile top bar. |
| `interactive-secondary` | `#fff` | `#1d1d1d` | `#fff` | `#141414` | Fill of secondary buttons, inputs, selects and chips — the raised control surface. |
| `interactive-secondary-hover` | `#fcfaff` | `#292929` | `#fcfaff` | `#1e1e1e` | Hover/open fill for `interactive-secondary` controls. |
| `muted` | `#f2f2f2` | `#1c1c1d` | `#f2f2f2` | `#111111` | Muted fills: skeletons, badges, inline code, quiet chips. |
| `input-background` | `#ffffff` | `#1d1d1d` | `#ffffff` | `#111111` | Fill of long text inputs and the metadata editor. |
| `card` | `#f8f8f7` | `#121212` | `#fafaf9` | `#050505` | Card and inline panel surface, toasts. |
| `card-foreground` | `oklch(0.141 0.005 285.823)` | `oklch(0.985 0 0)` | `oklch(0.141 0.005 285.823)` | `oklch(0.985 0 0)` | Text on `card` (shadcn slot). |

## Primary

The one accent. Reach for it only for the main action, selection and focus.

| Token | Light | Dark | Modern | Modern dark | Use |
| --- | --- | --- | --- | --- | --- |
| `sandbox` | `#7429dd` | `#7429dd` | `#7429dd` | `#7429dd` | Sandbox or demo-company cues only (banner, badge). Purple, #8838ff. |
| `primary` | `#0067d1` | `#0074e3` | `#0067d1` | `#0074e3` | The one accent (#0077e6): primary button, selection, active borders, links, chart series 1, ::selection. Text on it is `primary-foreground`. |
| `primary-foreground` | `#ffffff` | `#ffffff` | `#ffffff` | `#ffffff` | Text and icons on `primary` fills (primary buttons). |
| `primary-text` | `var(--primary)` | `#2f92ff` | `var(--primary)` | `#2f92ff` |  |
| `hover-primary` | `#f5fbff` | `var(--interactive-secondary-hover)` | `#f5fbff` | `var(--interactive-secondary-hover)` | Hover fill for selectable rows and checkboxes (a faint primary tint in light). |
| `active-primary` | `#e8f5ff` | `#292929` | `#e8f5ff` | `#1e1e1e` | Selected/open fill for selects and appearance options. |
| `radio-group-hover-primary` | `#f5fbff` | `var(--interactive-secondary-hover)` | `#f5fbff` | `var(--interactive-secondary-hover)` | Hover fill for radio-group area items. |
| `ring` | `oklch(0.63 0.015 286.067)` | `oklch(0.52 0.017 285.786)` | `oklch(0.63 0.015 286.067)` | `oklch(0.52 0.017 285.786)` | Focus outline colour (`outline-ring/50` on every element). |
| `color-primary-btn-hover` | `#1a88ef` | `#1a88ef` | `#1a88ef` | `#1a88ef` | Primary button hover fill. |
| `color-primary-btn-active` | `#006bcf` | `#006bcf` | `#006bcf` | `#006bcf` | Primary button pressed fill. |
| `color-muted-hover` | `#f2ebff` | `#f2ebff` | `#f2ebff` | `#f2ebff` | Hover tint for muted, primary-tinted controls. |
| `color-muted-active` | `#f2e9ff` | `#f2e9ff` | `#f2e9ff` | `#f2e9ff` | Pressed tint for muted, primary-tinted controls. |
| `color-focus` | `rgba(0, 119, 230, 0.95)` | `rgba(0, 119, 230, 0.95)` | `rgba(0, 119, 230, 0.95)` | `rgba(0, 119, 230, 0.95)` | Focus accent (violet) used by form focus effects. |
| `sandbox-text` | `#7429dd` | `#b98aff` | `#7429dd` | `#b98aff` |  |
| `sandbox-foreground` | `#ffffff` | `#ffffff` | `#ffffff` | `#ffffff` |  |

## Borders and inputs

Hairlines everywhere by default; inputs get their own border colour.

| Token | Light | Dark | Modern | Modern dark | Use |
| --- | --- | --- | --- | --- | --- |
| `border` | `#e5e5e5` | `#222222` | `#e5e5e5` | `#181818` | Default 1px border for every element (`* { border-border }`): cards, inputs, dividers. |
| `border-sheet` | `#eaeae9` | `#eaeae9` | `#eaeae9` | `#eaeae9` | Border of side sheets. |
| `border-table` | `#e5e5e5` | `#e5e5e5` | `#e5e5e5` | `#e5e5e5` | Table outer border. |
| `card-border` | `#d1d1d1` | `#d1d1d1` | `#d1d1d1` | `#d1d1d1` | Border of card-style containers (`border-base`). |
| `input` | `#8b8b8b` | `#686868` | `#8b8b8b` | `#686868` | Input and select borders (`input-base`); also Tailwind `border-input`. |
| `switch-thumb-on` | `#ffffff` | `#161616` | `#ffffff` | `#161616` | Switch thumb when the switch is on (sits on `primary`). |
| `icon1` | `#888` | `#888` | `#888` | `#888` | Neutral icon grey (legacy, defined in `:root`). |
| `input-border-hover` | `rgba(18, 18, 18, 0.6)` | `rgba(221, 221, 221, 0.5)` | `rgba(18, 18, 18, 0.6)` | `rgba(221, 221, 221, 0.5)` | Input and select border on hover. |
| `input-border-focus` | `rgba(18, 18, 18, 0.78)` | `rgba(221, 221, 221, 0.72)` | `rgba(18, 18, 18, 0.78)` | `rgba(221, 221, 221, 0.72)` | Input and select border on focus and while open (`foreground` at 28%). |
| `scrollbar-thumb` | `rgba(18, 18, 18, 0.2)` | `rgba(221, 221, 221, 0.2)` | `rgba(18, 18, 18, 0.2)` | `rgba(221, 221, 221, 0.2)` | Scrollbar thumb on every scroll area (`foreground` at 20%). |

## Overlays

Popovers, menus, selects and dialogs.

| Token | Light | Dark | Modern | Modern dark | Use |
| --- | --- | --- | --- | --- | --- |
| `overlay` | `#ffffff` | `#1a1a1a` | `#ffffff` | `#1a1a1a` | Surface of popovers, dropdown menus, selects and rich tooltips. |
| `overlay-dialog` | `#ffffff` | `#171717` | `#ffffff` | `#171717` | Surface of dialogs. |
| `overlay-border` | `#e5e5e5` | `#2a2a2a` | `#e5e5e5` | `#2a2a2a` | Border of popovers and menus on `overlay`. |
| `overlay-separator` | `#efefef` | `#262626` | `#efefef` | `#262626` | Separators and search-input dividers inside overlays. |
| `overlay-hover` | `rgb(0 0 0 / 0.045)` | `rgb(255 255 255 / 0.06)` | `rgb(0 0 0 / 0.045)` | `rgb(255 255 255 / 0.06)` | Row hover inside menus and option lists (translucent). |
| `overlay-hover-ring` | `var(--input)` | `#777777` | `var(--input)` | `#777777` |  |
| `overlay-backdrop` | `rgb(0 0 0 / 0.5)` | `rgb(0 0 0 / 0.8)` | `rgb(0 0 0 / 0.5)` | `rgb(0 0 0 / 0.6)` |  |
| `overlay-veil` | `rgb(255 255 255 / 0.7)` | `rgb(0 0 0 / 0.7)` | `rgb(255 255 255 / 0.7)` | `rgb(0 0 0 / 0.6)` |  |
| `overlay-dim` | `rgb(0 0 0 / 0.5)` | `rgb(0 0 0 / 0.6)` | `rgb(0 0 0 / 0.5)` | `rgb(0 0 0 / 0.6)` |  |

## Tables

A recessed tray holds a raised surface; rows divide with hairlines.

| Token | Light | Dark | Modern | Modern dark | Use |
| --- | --- | --- | --- | --- | --- |
| `table-tray` | `#f3f3f2` | `#111111` | `var(--card)` | `var(--card)` | Tray behind tables — the recessed band holding toolbar and table surface. |
| `table-tray-border` | `#e7e7e5` | `#1f1f1f` | `var(--border)` | `var(--border)` | Border of the table tray. |
| `table-surface` | `#ffffff` | `#191919` | `var(--interactive-secondary)` | `var(--interactive-secondary)` | The table body surface inside the tray. |
| `table-surface-border` | `#e5e5e5` | `#262626` | `var(--border)` | `var(--border)` | Border of the table surface. |
| `table-row-divider` | `#efefee` | `#232323` | `var(--border)` | `var(--border)` | Hairline between table rows. |
| `table-row-hover` | `#fafaf9` | `#1e1e1e` | `var(--interactive-secondary-hover)` | `var(--interactive-secondary-hover)` | Table row hover fill. |
| `color-table-hover` | `#f3f3f3` | `#f3f3f3` | `#f3f3f3` | `#f3f3f3` | Legacy table row hover. |

## Errors and warnings

`destructive` is a fill; red text uses `error-text`, which reads in every theme.

| Token | Light | Dark | Modern | Modern dark | Use |
| --- | --- | --- | --- | --- | --- |
| `destructive` | `#e40000` | `oklch(0.396 0.141 25.723)` | `#e40000` | `oklch(0.396 0.141 25.723)` | Destructive button fill and error borders. Light #e40000 is 4.7:1 on `background`; dark themes use a deep red fill (oklch 0.396) under white text and `destructive-foreground` for error text. |
| `destructive-hover` | `#c30000` | `#c30000` | `#c30000` | `#c30000` | Destructive button hover fill. |
| `destructive-foreground` | `#fafaf9` | `oklch(0.637 0.237 25.331)` | `#fafaf9` | `oklch(0.637 0.237 25.331)` | Text on `destructive` fills. Dark theme value is a light red used as error text on dark grounds. |
| `destructive-border` | `#940000` | `#940000` | `#940000` | `#940000` | Border of destructive buttons. |
| `error-text` | `#cc0000` | `#f87171` | `#cc0000` | `#f87171` | Error and negative-amount text (`text-error-text`): 4.6:1 or better on `background` and `card` in Light, 6.5:1 in Dark. Use `destructive` only for fills. |
| `color-yellow-50` | `#fefce8` | `#fefce8` | `#fefce8` | `#fefce8` | Warning ramp, lightest wash. |
| `color-yellow-100` | `#fdedd3` | `#fdedd3` | `#fdedd3` | `#fdedd3` | Warning ramp: badge/banner wash. |
| `color-yellow-200` | `#fbdba7` | `#fbdba7` | `#fbdba7` | `#fbdba7` | Warning ramp. |
| `color-yellow-300` | `#f9c97c` | `#f9c97c` | `#f9c97c` | `#f9c97c` | Warning ramp. |
| `color-yellow-400` | `#f7b750` | `#f7b750` | `#f7b750` | `#f7b750` | Warning ramp. |
| `color-yellow-500` | `#f5a524` | `#f5a524` | `#f5a524` | `#f5a524` | Warning ramp: status accent. |
| `color-yellow-600` | `#c4841d` | `#c4841d` | `#c4841d` | `#c4841d` | Warning ramp: text on yellow washes. |
| `color-yellow-700` | `#936316` | `#936316` | `#936316` | `#936316` | Warning ramp: strong text on light washes. |
| `color-yellow-800` | `#62420e` | `#62420e` | `#62420e` | `#62420e` | Warning ramp. |
| `color-yellow-900` | `#312107` | `#312107` | `#312107` | `#312107` | Warning ramp, darkest. |
| `color-error-light` | `#fee1e1` | `#fee1e1` | `#fee1e1` | `#fee1e1` | Error wash behind destructive icon buttons. |

## Status

The squares inside StatusChip. The label stays neutral; hue lives only in the square.

| Token | Light | Dark | Modern | Modern dark | Use |
| --- | --- | --- | --- | --- | --- |
| `status-green` | `#30a46c` | `#30a46c` | `#30a46c` | `#30a46c` | StatusChip `green` square. Active, paid, success. Reference value: the chip hard-codes this hex, so editing it here does not change the component. |
| `status-green-glyph` | `#ffffff` | `#0e1c15` | `#ffffff` | `#0e1c15` | Glyph drawn on the `status-green` square: white in light themes, #0e1c15 in dark. Reference value, hard-coded in StatusChip. |
| `status-blue` | `#3e8bd9` | `#3e8bd9` | `#3e8bd9` | `#3e8bd9` | StatusChip `blue` square. Sent, info, in progress. Reference value: the chip hard-codes this hex, so editing it here does not change the component. |
| `status-blue-glyph` | `#ffffff` | `#0c1726` | `#ffffff` | `#0c1726` | Glyph drawn on the `status-blue` square: white in light themes, #0c1726 in dark. Reference value, hard-coded in StatusChip. |
| `status-red` | `#e5484d` | `#e5484d` | `#e5484d` | `#e5484d` | StatusChip `red` square. Rejected, failed, void. Reference value: the chip hard-codes this hex, so editing it here does not change the component. |
| `status-red-glyph` | `#ffffff` | `#2a0c0d` | `#ffffff` | `#2a0c0d` | Glyph drawn on the `status-red` square: white in light themes, #2a0c0d in dark. Reference value, hard-coded in StatusChip. |
| `status-orange` | `#e8742c` | `#e8742c` | `#e8742c` | `#e8742c` | StatusChip `orange` square. Expiring, attention. Reference value: the chip hard-codes this hex, so editing it here does not change the component. |
| `status-orange-glyph` | `#ffffff` | `#2a1405` | `#ffffff` | `#2a1405` | Glyph drawn on the `status-orange` square: white in light themes, #2a1405 in dark. Reference value, hard-coded in StatusChip. |
| `status-amber` | `#e5a21f` | `#e5a21f` | `#e5a21f` | `#e5a21f` | StatusChip `amber` square. Overdue, warning. Reference value: the chip hard-codes this hex, so editing it here does not change the component. |
| `status-amber-glyph` | `#2a1c05` | `#2a1c05` | `#2a1c05` | `#2a1c05` | Glyph drawn on the `status-amber` square: white in light themes, #2a1c05 in dark. Reference value, hard-coded in StatusChip. |
| `status-green-text` | `#18794e` | `#3dd68c` | `#18794e` | `#3dd68c` |  |
| `status-amber-text` | `#a35a00` | `#ffc53d` | `#a35a00` | `#ffc53d` |  |
| `status-orange-text` | `#b54500` | `#ff8b3e` | `#b54500` | `#ff8b3e` |  |
| `status-yellow` | `#e2b93b` | `#e2b93b` | `#e2b93b` | `#e2b93b` | StatusChip `yellow` square. Pending. Reference value: the chip hard-codes this hex, so editing it here does not change the component. |
| `status-yellow-glyph` | `#261f06` | `#261f06` | `#261f06` | `#261f06` | Glyph drawn on the `status-yellow` square: white in light themes, #261f06 in dark. Reference value, hard-coded in StatusChip. |
| `status-purple` | `#9a6bff` | `#9a6bff` | `#9a6bff` | `#9a6bff` | StatusChip `purple` square. Scheduled, brand states. Reference value: the chip hard-codes this hex, so editing it here does not change the component. |
| `status-purple-glyph` | `#ffffff` | `#1a0f33` | `#ffffff` | `#1a0f33` | Glyph drawn on the `status-purple` square: white in light themes, #1a0f33 in dark. Reference value, hard-coded in StatusChip. |
| `status-pink` | `#d6409f` | `#d6409f` | `#d6409f` | `#d6409f` | StatusChip `pink` square. Promotions, special cases. Reference value: the chip hard-codes this hex, so editing it here does not change the component. |
| `status-pink-glyph` | `#ffffff` | `#2a0c1e` | `#ffffff` | `#2a0c1e` | Glyph drawn on the `status-pink` square: white in light themes, #2a0c1e in dark. Reference value, hard-coded in StatusChip. |
| `status-fuchsia` | `#c050d8` | `#c050d8` | `#c050d8` | `#c050d8` | StatusChip `fuchsia` square. Custom states. Reference value: the chip hard-codes this hex, so editing it here does not change the component. |
| `status-fuchsia-glyph` | `#ffffff` | `#240c2a` | `#ffffff` | `#240c2a` | Glyph drawn on the `status-fuchsia` square: white in light themes, #240c2a in dark. Reference value, hard-coded in StatusChip. |
| `status-neutral` | `#8a8a8a` | `#8a8a8a` | `#8a8a8a` | `#8a8a8a` | StatusChip `neutral` square. Paused, draft, unknown. Reference value: the chip hard-codes this hex, so editing it here does not change the component. |
| `status-neutral-glyph` | `#ffffff` | `#161616` | `#ffffff` | `#161616` | Glyph drawn on the `status-neutral` square: white in light themes, #161616 in dark. Reference value, hard-coded in StatusChip. |

## Charts

Categorical series in a fixed, colour-blind-validated order, and a sequential ramp.

| Token | Light | Dark | Modern | Modern dark | Use |
| --- | --- | --- | --- | --- | --- |
| `chart-1` | `var(--primary)` | `var(--primary)` | `var(--primary)` | `var(--primary)` | Sequential chart ramp step 1 (aliases `primary`). |
| `chart-2` | `#0f70e9` | `#0f70e9` | `#0f70e9` | `#0f70e9` | Sequential chart ramp step 2 (blue to purple). |
| `chart-3` | `#1e69ec` | `#1e69ec` | `#1e69ec` | `#1e69ec` | Sequential chart ramp step 3 (blue to purple). |
| `chart-4` | `#2d62ee` | `#2d62ee` | `#2d62ee` | `#2d62ee` | Sequential chart ramp step 4 (blue to purple). |
| `chart-5` | `#3c5bf1` | `#3c5bf1` | `#3c5bf1` | `#3c5bf1` | Sequential chart ramp step 5 (blue to purple). |
| `chart-6` | `#4c54f4` | `#4c54f4` | `#4c54f4` | `#4c54f4` | Sequential chart ramp step 6 (blue to purple). |
| `chart-7` | `#5b4df7` | `#5b4df7` | `#5b4df7` | `#5b4df7` | Sequential chart ramp step 7 (blue to purple). |
| `chart-8` | `#6a46f9` | `#6a46f9` | `#6a46f9` | `#6a46f9` | Sequential chart ramp step 8 (blue to purple). |
| `chart-9` | `#793ffc` | `#793ffc` | `#793ffc` | `#793ffc` | Sequential chart ramp step 9 (blue to purple). |
| `chart-10` | `#8838ff` | `#8838ff` | `#8838ff` | `#8838ff` | Sequential chart ramp step 10 (blue to purple). |
| `chart-grid-stroke` | `#d1d1d190` | `#262626` | `#d1d1d190` | `#1a1a1a` | Chart grid lines and axis rules. |
| `chart-series-1` | `#0077e6` | `#2b95f5` | `#0077e6` | `#2b95f5` | Categorical chart series slot 1 (blue). Order is colour-blind-validated: never reorder or skip. |
| `chart-series-2` | `#eb6834` | `#d95926` | `#eb6834` | `#d95926` | Categorical chart series slot 2 (orange). Order is colour-blind-validated: never reorder or skip. |
| `chart-series-3` | `#1baf7a` | `#199e70` | `#1baf7a` | `#199e70` | Categorical chart series slot 3 (green). Order is colour-blind-validated: never reorder or skip. |
| `chart-series-4` | `#eda100` | `#c98500` | `#eda100` | `#c98500` | Categorical chart series slot 4 (amber). Order is colour-blind-validated: never reorder or skip. |
| `chart-series-5` | `#e87ba4` | `#d55181` | `#e87ba4` | `#d55181` | Categorical chart series slot 5 (pink). Order is colour-blind-validated: never reorder or skip. |
| `chart-series-6` | `#008300` | `#008300` | `#008300` | `#008300` | Categorical chart series slot 6 (deep green). Order is colour-blind-validated: never reorder or skip. |
| `chart-series-7` | `#8838ff` | `#9c5aff` | `#8838ff` | `#9c5aff` | Categorical chart series slot 7 (purple). Order is colour-blind-validated: never reorder or skip. |
| `chart-series-8` | `#e34948` | `#e66767` | `#e34948` | `#e66767` | Categorical chart series slot 8 (red). Order is colour-blind-validated: never reorder or skip. |

## Panel button

The tactile tiles used for big choices in onboarding.

| Token | Light | Dark | Modern | Modern dark | Use |
| --- | --- | --- | --- | --- | --- |
| `color-panel-icon-background` | `#e0f2ff` | `#e0f2ff` | `#e0f2ff` | `#e0f2ff` | Icon well behind panel-button icons. |
| `panel-selected-bg` | `#f0f9ff` | `#f0f9ff` | `#f0f9ff` | `#f0f9ff` | Selected PanelButton fill. |
| `panel-selected-border` | `#7dccff` | `#7dccff` | `#7dccff` | `#7dccff` | Selected PanelButton border. |
| `panel-unselected-bg` | `#ffffff` | `#ffffff` | `#ffffff` | `#ffffff` | Unselected PanelButton fill. |
| `panel-unselected-border` | `rgb(229 231 235)` | `rgb(229 231 235)` | `rgb(229 231 235)` | `rgb(229 231 235)` | Unselected PanelButton border. |
| `panel-unselected-border-hover` | `rgb(209 213 219)` | `rgb(209 213 219)` | `rgb(209 213 219)` | `rgb(209 213 219)` | Unselected PanelButton border on hover; also the seams. |
| `panel-screw-selected` | `#bfe5ff` | `#bfe5ff` | `#bfe5ff` | `#bfe5ff` | Screw dots on a selected PanelButton. |
| `panel-screw-unselected` | `rgb(229 231 235)` | `rgb(229 231 235)` | `rgb(229 231 235)` | `rgb(229 231 235)` | Screw dots on an unselected PanelButton. |
| `panel-icon-selected-bg` | `#e0f2ff` | `#e0f2ff` | `#e0f2ff` | `#e0f2ff` | Icon well, selected. |
| `panel-icon-selected-border` | `#9dd8ff` | `#9dd8ff` | `#9dd8ff` | `#9dd8ff` | Icon well border, selected. |
| `panel-icon-unselected-bg` | `rgb(249 250 251)` | `rgb(249 250 251)` | `rgb(249 250 251)` | `rgb(249 250 251)` | Icon well, unselected. |
| `panel-icon-unselected-border` | `rgb(209 213 219)` | `rgb(209 213 219)` | `rgb(209 213 219)` | `rgb(209 213 219)` | Icon well border, unselected. |
| `panel-icon-selected` | `#0069cc` | `#0069cc` | `#0069cc` | `#0069cc` | Icon colour, selected. |
| `panel-icon-unselected` | `rgb(75 85 99)` | `rgb(75 85 99)` | `rgb(75 85 99)` | `rgb(75 85 99)` | Icon colour, unselected. |

## Compatibility and palette

shadcn slots kept for compatibility, and the Tailwind palette steps components use directly.

| Token | Light | Dark | Modern | Modern dark | Use |
| --- | --- | --- | --- | --- | --- |
| `focus-ring` | `var(--primary)` | `var(--primary)` | `var(--primary)` | `var(--primary)` |  |
| `popover` | `oklch(1 0 0)` | `oklch(0.141 0.005 285.823)` | `oklch(1 0 0)` | `oklch(0.141 0.005 285.823)` | shadcn popover slot — used by chart tooltips and analytics graphs. |
| `popover-foreground` | `oklch(0.141 0.005 285.823)` | `#ffffff` | `oklch(0.141 0.005 285.823)` | `#ffffff` | Text on `popover`. |
| `secondary` | `oklch(0.967 0.001 286.375)` | `oklch(0.274 0.006 286.033)` | `oklch(0.967 0.001 286.375)` | `oklch(0.274 0.006 286.033)` | shadcn secondary fill: chat panels, decision cards. |
| `secondary-foreground` | `oklch(0.21 0.006 285.885)` | `oklch(0.985 0 0)` | `oklch(0.21 0.006 285.885)` | `oklch(0.985 0 0)` | Text on `secondary`. |
| `accent` | `oklch(0.967 0.001 286.375)` | `oklch(0.274 0.006 286.033)` | `oklch(0.967 0.001 286.375)` | `oklch(0.274 0.006 286.033)` | shadcn accent fill — value chips, mobile top bar hover, menu highlight. |
| `accent-foreground` | `oklch(0.21 0.006 285.885)` | `oklch(0.985 0 0)` | `oklch(0.21 0.006 285.885)` | `oklch(0.985 0 0)` | Text on `accent`. |
| `sidebar` | `oklch(0.985 0 0)` | `oklch(0.21 0.006 285.885)` | `oklch(0.985 0 0)` | `oklch(0.21 0.006 285.885)` | shadcn sidebar slot (canvas cards). |
| `sidebar-foreground` | `oklch(0.141 0.005 285.823)` | `oklch(0.985 0 0)` | `oklch(0.141 0.005 285.823)` | `oklch(0.985 0 0)` | Text on `sidebar`. |
| `sidebar-primary` | `oklch(0.21 0.006 285.885)` | `oklch(0.488 0.243 264.376)` | `oklch(0.21 0.006 285.885)` | `oklch(0.488 0.243 264.376)` | Primary accent inside the sidebar slot. |
| `sidebar-primary-foreground` | `oklch(0.985 0 0)` | `oklch(0.985 0 0)` | `oklch(0.985 0 0)` | `oklch(0.985 0 0)` | Text on `sidebar-primary`. |
| `sidebar-accent` | `oklch(0.967 0.001 286.375)` | `oklch(0.274 0.006 286.033)` | `oklch(0.967 0.001 286.375)` | `oklch(0.274 0.006 286.033)` | Hover/active fill in the sidebar slot. |
| `sidebar-accent-foreground` | `oklch(0.21 0.006 285.885)` | `oklch(0.985 0 0)` | `oklch(0.21 0.006 285.885)` | `oklch(0.985 0 0)` | Text on `sidebar-accent`. |
| `sidebar-border` | `oklch(0.92 0.004 286.32)` | `oklch(0.274 0.006 286.033)` | `oklch(0.92 0.004 286.32)` | `oklch(0.274 0.006 286.033)` | Sidebar slot border. |
| `sidebar-ring` | `oklch(0.63 0.015 286.067)` | `oklch(0.52 0.017 285.786)` | `oklch(0.63 0.015 286.067)` | `oklch(0.52 0.017 285.786)` | Sidebar slot focus ring. |
| `color-code-background` | `#1e1e1e` | `#1e1e1e` | `#1e1e1e` | `#1e1e1e` | Code block background (defined; Shiki sets its own). |
| `color-code-tabs` | `#2d2d2d` | `#2d2d2d` | `#2d2d2d` | `#2d2d2d` | Code-group tab strip. |
| `color-code-bg` | `#1e1e1e` | `#1e1e1e` | `#1e1e1e` | `#1e1e1e` | Alias of the code background (legacy name). |
| `color-code-tabs-active` | `#3c3c3c` | `#3c3c3c` | `#3c3c3c` | `#3c3c3c` | Active code-group tab. |
| `color-light-purple` | `#f9f5ff` | `#f9f5ff` | `#f9f5ff` | `#f9f5ff` | Faint purple wash. |
| `color-gray-light` | `#fafafa` | `#fafafa` | `#fafafa` | `#fafafa` | Light grey wash. |
| `color-gray-medium` | `#eeeeee` | `#eeeeee` | `#eeeeee` | `#eeeeee` | Medium grey wash. |
| `color-purple-dark` | `#8231ff` | `#8231ff` | `#8231ff` | `#8231ff` | Deeper brand purple. |
| `color-purple-medium` | `#b07aff` | `#b07aff` | `#b07aff` | `#b07aff` | Mid purple — shortcut-button key caps. |
| `color-purple-stripe` | `#665cff` | `#665cff` | `#665cff` | `#665cff` | Indigo-purple stripe accent. |
| `color-purple-gradient` | `#6f47ff` | `#6f47ff` | `#6f47ff` | `#6f47ff` | Purple gradient stop. |
| `color-zinc-50` | `oklch(0.985 0 0)` | `oklch(0.985 0 0)` | `oklch(0.985 0 0)` | `oklch(0.985 0 0)` | Tailwind palette `zinc-50`, used by components: Badge `default` text, tag chips, tabs in dark. |
| `color-zinc-100` | `oklch(0.967 0.001 286.375)` | `oklch(0.967 0.001 286.375)` | `oklch(0.967 0.001 286.375)` | `oklch(0.967 0.001 286.375)` | Tailwind palette `zinc-100`, used by components: Badge `secondary` fill. |
| `color-zinc-200` | `oklch(0.92 0.004 286.32)` | `oklch(0.92 0.004 286.32)` | `oklch(0.92 0.004 286.32)` | `oklch(0.92 0.004 286.32)` | Tailwind palette `zinc-200`, used by components: Badge border. |
| `color-zinc-300` | `oklch(0.871 0.006 286.286)` | `oklch(0.871 0.006 286.286)` | `oklch(0.871 0.006 286.286)` | `oklch(0.871 0.006 286.286)` | Tailwind palette `zinc-300`, used by components: Neutral chrome in tag inputs. |
| `color-zinc-400` | `oklch(0.705 0.015 286.067)` | `oklch(0.705 0.015 286.067)` | `oklch(0.705 0.015 286.067)` | `oklch(0.705 0.015 286.067)` | Tailwind palette `zinc-400`, used by components: Neutral icons. |
| `color-zinc-500` | `oklch(0.552 0.016 285.938)` | `oklch(0.552 0.016 285.938)` | `oklch(0.552 0.016 285.938)` | `oklch(0.552 0.016 285.938)` | Tailwind palette `zinc-500`, used by components: Alert `default` tint (at 4% fill, 15% border). |
| `color-zinc-600` | `oklch(0.442 0.017 285.786)` | `oklch(0.442 0.017 285.786)` | `oklch(0.442 0.017 285.786)` | `oklch(0.442 0.017 285.786)` | Tailwind palette `zinc-600`, used by components: Neutral text in dark chips. |
| `color-zinc-800` | `oklch(0.274 0.006 286.033)` | `oklch(0.274 0.006 286.033)` | `oklch(0.274 0.006 286.033)` | `oklch(0.274 0.006 286.033)` | Tailwind palette `zinc-800`, used by components: Badge `secondary` fill in dark. |
| `color-zinc-900` | `oklch(0.21 0.006 285.885)` | `oklch(0.21 0.006 285.885)` | `oklch(0.21 0.006 285.885)` | `oklch(0.21 0.006 285.885)` | Tailwind palette `zinc-900`, used by components: Badge `default` fill. |
| `color-zinc-950` | `oklch(0.141 0.005 285.823)` | `oklch(0.141 0.005 285.823)` | `oklch(0.141 0.005 285.823)` | `oklch(0.141 0.005 285.823)` | Tailwind palette `zinc-950`, used by components: Deepest neutral in chips. |
| `color-neutral-200` | `oklch(0.922 0 0)` | `oklch(0.922 0 0)` | `oklch(0.922 0 0)` | `oklch(0.922 0 0)` | Tailwind palette `neutral-200`, used by components: PanelButton seams in light. |
| `color-neutral-800` | `oklch(0.269 0 0)` | `oklch(0.269 0 0)` | `oklch(0.269 0 0)` | `oklch(0.269 0 0)` | Tailwind palette `neutral-800`, used by components: PanelButton seams in dark. |
| `color-stone-200` | `oklch(0.923 0.003 48.717)` | `oklch(0.923 0.003 48.717)` | `oklch(0.923 0.003 48.717)` | `oklch(0.923 0.003 48.717)` | Tailwind palette `stone-200`, used by components: Warm neutral border. |
| `color-violet-200` | `oklch(0.894 0.057 293.283)` | `oklch(0.894 0.057 293.283)` | `oklch(0.894 0.057 293.283)` | `oklch(0.894 0.057 293.283)` | Tailwind palette `violet-200`, used by components: PanelButton selected ring. |
| `color-violet-600` | `oklch(0.541 0.281 293.009)` | `oklch(0.541 0.281 293.009)` | `oklch(0.541 0.281 293.009)` | `oklch(0.541 0.281 293.009)` | Tailwind palette `violet-600`, used by components: PanelButton selected icon. |
| `color-violet-800` | `oklch(0.432 0.232 292.759)` | `oklch(0.432 0.232 292.759)` | `oklch(0.432 0.232 292.759)` | `oklch(0.432 0.232 292.759)` | Tailwind palette `violet-800`, used by components: PanelButton selected, dark. |
| `color-red-400` | `oklch(0.704 0.191 22.216)` | `oklch(0.704 0.191 22.216)` | `oklch(0.704 0.191 22.216)` | `oklch(0.704 0.191 22.216)` | Tailwind palette `red-400`, used by components: Destructive menu item text in dark. |
| `color-red-500` | `oklch(0.637 0.237 25.331)` | `oklch(0.637 0.237 25.331)` | `oklch(0.637 0.237 25.331)` | `oklch(0.637 0.237 25.331)` | Tailwind palette `red-500`, used by components: Alert `destructive` tint, destructive menu items. |
| `color-red-600` | `oklch(0.577 0.245 27.325)` | `oklch(0.577 0.245 27.325)` | `oklch(0.577 0.245 27.325)` | `oklch(0.577 0.245 27.325)` | Tailwind palette `red-600`, used by components: Destructive menu item text in light. |
| `color-blue-400` | `oklch(0.707 0.165 254.624)` | `oklch(0.707 0.165 254.624)` | `oklch(0.707 0.165 254.624)` | `oklch(0.707 0.165 254.624)` | Tailwind palette `blue-400`, used by components: BetaBadge text in dark. |
| `color-blue-500` | `oklch(0.623 0.214 259.815)` | `oklch(0.623 0.214 259.815)` | `oklch(0.623 0.214 259.815)` | `oklch(0.623 0.214 259.815)` | Tailwind palette `blue-500`, used by components: BetaBadge tint. |
| `color-blue-600` | `oklch(0.546 0.245 262.881)` | `oklch(0.546 0.245 262.881)` | `oklch(0.546 0.245 262.881)` | `oklch(0.546 0.245 262.881)` | Tailwind palette `blue-600`, used by components: BetaBadge text. |
| `color-sky-500` | `oklch(0.685 0.169 237.323)` | `oklch(0.685 0.169 237.323)` | `oklch(0.685 0.169 237.323)` | `oklch(0.685 0.169 237.323)` | Tailwind palette `sky-500`, used by components: Alert `note` tint. |
| `color-emerald-500` | `oklch(0.696 0.17 162.48)` | `oklch(0.696 0.17 162.48)` | `oklch(0.696 0.17 162.48)` | `oklch(0.696 0.17 162.48)` | Tailwind palette `emerald-500`, used by components: Alert `success` tint. |
| `color-amber-500` | `oklch(0.769 0.188 70.08)` | `oklch(0.769 0.188 70.08)` | `oklch(0.769 0.188 70.08)` | `oklch(0.769 0.188 70.08)` | Tailwind palette `amber-500`, used by components: Alert `warning` tint. |