# Colors

The semantic color tokens every component paints with, in light and dark.

Components never name a color. They name a **role** (`bg-surface`, `text-text-secondary`,
`bg-danger-soft`) and the theme decides the value. That is what makes dark mode, a forced-light
region and any future theme work without touching a component. The lint step rejects palette
colors (`bg-red-500`) and arbitrary colors (`text-[#fff]`) in library code.

The values below are read from `packages/ui/src/styles/theme.css` when the site builds. Swatches
follow the theme toggle.

## Surfaces and lines

| Token | Utilities | Light | Dark | Use |
| --- | --- | --- | --- | --- |
| `--background` | `bg-background` | #f4f6f8 | #0e0e12 | The page canvas behind every surface. |
| `--surface` | `bg-surface`, `bg-card`, `bg-popover` | #ffffff | #18181f | Raised surfaces: cards, popovers, dialogs, inputs. |
| `--surface-muted` | `bg-surface-muted`, `bg-muted`, `bg-secondary`, `bg-accent` | #e8edf1 | #26262f | Recessed areas, hover and selected rows, secondary buttons. |
| `--border` | `border-border`, `border-border-subtle` | #e2e8ec | #2a2a33 | Dividers and the default border of every component. |
| `--border-strong` | `border-border-strong` | #c9d2da | #3a3a46 | Borders that must read on a muted surface. |
| `--input` | `border-input` | #c9d2da | #3a3a46 | The border of form controls. |

Stack surfaces from the canvas up: `bg-background` for the page, `bg-surface` for cards and
overlays on it, `bg-surface-muted` for recessed or hovered areas inside a surface.

## Text

| Token | Utilities | Light | Dark | Use |
| --- | --- | --- | --- | --- |
| `--foreground` | `text-foreground`, `text-text-primary` | #1a2530 | #eceff1 | Headings, values, primary text. |
| `--text-secondary` | `text-text-secondary` | #4a5462 | #a8acb3 | Labels, descriptions, body copy next to a value. |
| `--text-muted` | `text-muted-foreground`, `text-text-muted` | #5c6c7c | #8b95a1 | Hints, placeholders, metadata, disabled text. |
| `--text-on-dark` | `text-text-on-dark` | #fcfcfc | #fcfcfc | Text on the topbar and other dark bands. |

Use three steps at most on one surface: `text-foreground` for what the user reads first,
`text-text-secondary` for labels and descriptions, `text-muted-foreground` for metadata.

## Brand and primary

| Token | Utilities | Light | Dark | Use |
| --- | --- | --- | --- | --- |
| `--primary` | `bg-primary`, `text-primary`, `border-primary` | #1f5b85 | #4a9dd4 | The primary action and the selected state. |
| `--primary-foreground` | `text-primary-foreground` | #ffffff | #0f1620 | Text on a primary fill. |
| `--primary-hover` | `bg-primary-hover` | #15466a | #6fb1dd | Hover state of a primary fill. |
| `--primary-active` | `bg-primary-active` | #0f3f5e | #92c4e7 | Pressed state of a primary fill. |
| `--primary-soft` | `bg-primary-soft` | #dceef7 | #1b3a4f | Tinted background for selected navigation and soft badges. |
| `--primary-soft-foreground` | `text-primary-soft-foreground` | #15466a | #92c4e7 | Text on primary-soft. |
| `--link` | `text-link` | #246b9c | #6fb1dd | Inline links. |
| `--link-hover` | `text-link-hover` | #1f5b85 | #92c4e7 | Hovered links. |
| `--focus-ring` | `ring-ring`, `outline-ring` | #1f5b85 | #4a9dd4 | Keyboard focus indicator. |
| `--brand-mark` | `text-brand-mark` | #1f5b85 | #ffffff | The brand marks and brand icons: blue in light, white in dark. |
| `--brand-accent` | `text-brand-accent`, `bg-brand-accent` | #acdffe | #acdffe | The light brand blue. Decorative use only. |

## Status

Four status families, each with a solid color, a soft background and a foreground that reaches
WCAG 4.5:1 on the soft background. Badges, banners and toasts use them through the `tone` prop.

| Token | Utilities | Light | Dark | Use |
| --- | --- | --- | --- | --- |
| `--success` | `text-success`, `bg-success` | #15803d | #22c55e | Completed, healthy, resolved. |
| `--success-soft` | `bg-success-soft` | #dcfce7 | #052e16 | Background of a success badge or banner. |
| `--success-soft-foreground` | `text-success-soft-foreground` | #166534 | #86efac | Text on success-soft. |
| `--warning` | `text-warning`, `bg-warning` | #b45309 | #d97706 | Needs attention, pending, degraded. |
| `--warning-soft` | `bg-warning-soft` | #fef3c7 | #451a03 | Background of a warning badge or banner. |
| `--warning-soft-foreground` | `text-warning-soft-foreground` | #92400e | #fbbf24 | Text on warning-soft. |
| `--danger` | `text-danger`, `bg-danger`, `text-destructive` | #dc2626 | #ef4444 | Failed, destructive, error. |
| `--danger-soft` | `bg-danger-soft` | #fee2e2 | #450a0a | Background of a danger badge or banner. |
| `--danger-soft-foreground` | `text-danger-soft-foreground` | #b91c1c | #f87171 | Text on danger-soft. |
| `--info` | `text-info`, `bg-info` | #1f5b85 | #4a9dd4 | Neutral information, new, processing. |
| `--info-soft` | `bg-info-soft` | #e0f2fe | #1b3a4f | Background of an info badge or banner. |
| `--info-soft-foreground` | `text-info-soft-foreground` | #075985 | #7dd3fc | Text on info-soft. |

## Severity

The severity scale is shared by every Zenox security product. The `-fg` tokens are the hue that
stays readable as text on the surface: the darker one in light, the brighter one in dark. Always
pair a severity color with its label.

| Token | Utilities | Light | Dark | Use |
| --- | --- | --- | --- | --- |
| `--severity-critical` | `bg-sev-critical` | #dc2626 | #ef4444 | Critical severity fill. |
| `--severity-high` | `bg-sev-high` | #ea580c | #f97316 | High severity fill. |
| `--severity-medium` | `bg-sev-medium` | #f59e0b | #fbbf24 | Medium severity fill. |
| `--severity-low` | `bg-sev-low` | #3b82f6 | #60a5fa | Low severity fill. |
| `--severity-info` | `bg-sev-info`, `text-sev-info` | #6b7280 | #94a3b8 | Unknown or informational severity. |
| `--severity-critical-fg` | `text-sev-critical-fg` | #b91c1c | #ef4444 | Critical severity as text on the surface. |
| `--severity-high-fg` | `text-sev-high-fg` | #c2410c | #f97316 | High severity as text on the surface. |
| `--severity-medium-fg` | `text-sev-medium-fg` | #b45309 | #fbbf24 | Medium severity as text on the surface. |
| `--severity-low-fg` | `text-sev-low-fg` | #1d4ed8 | #60a5fa | Low severity as text on the surface. |
| `--severity-critical-soft-foreground` | `text-sev-critical-soft-fg` | #b91c1c | #f87171 | Critical severity as text on its soft badge. |
| `--severity-high-soft-foreground` | `text-sev-high-soft-fg` | #9a3412 | #f97316 | High severity as text on its soft badge. |
| `--severity-medium-soft-foreground` | `text-sev-medium-soft-fg` | #92400e | #fbbf24 | Medium severity as text on its soft badge. |
| `--severity-low-soft-foreground` | `text-sev-low-soft-fg` | #1d4ed8 | #60a5fa | Low severity as text on its soft badge. |
| `--severity-info-soft-foreground` | `text-sev-info-soft-fg` | #4a5462 | #94a3b8 | Unknown severity as text on its soft badge. |

## Topbar

| Token | Utilities | Light | Dark | Use |
| --- | --- | --- | --- | --- |
| `--topbar` | `bg-topbar` | #2c3a47 | #1f2a33 | The dark band at the top of every app shell. |
| `--topbar-fg` | `text-topbar-fg` | #fcfcfc | #fcfcfc | Text and icons on the topbar. |
| `--topbar-muted` | `text-topbar-muted` | #9fb0bd | #9fb0bd | Secondary text on the topbar. |

## Charts

A categorical palette for data visualization, in series order. It has no purple or pink by
design. Pass the variables to Recharts through the chart config: `color: "var(--chart-1)"`.

| Token | Utilities | Light | Dark | Use |
| --- | --- | --- | --- | --- |
| `--chart-1` | `var(--chart-1)` | #1f5b85 | #4a9dd4 | First series: the brand blue. |
| `--chart-2` | `var(--chart-2)` | #16a34a | #22c55e | Second series: green. |
| `--chart-3` | `var(--chart-3)` | #ea580c | #f97316 | Third series: orange. |
| `--chart-4` | `var(--chart-4)` | #6b7280 | #94a3b8 | Fourth series: neutral. |
| `--chart-5` | `var(--chart-5)` | #4796cb | #acdffe | Fifth series: light blue. |
| `--chart-line` | `var(--chart-line)` | #dc2626 | #ef4444 | Threshold and reference lines. |

## Aliases

Several roles answer to two names. The shadcn names (`bg-card`, `bg-muted`,
`text-muted-foreground`, `text-destructive`) are what upstream components are written against;
the Zenox names (`bg-surface`, `bg-surface-muted`, `text-text-muted`, `text-danger`) came from
the platform. Both resolve to the same value. In new code, prefer the shadcn name where one
exists and the Zenox name for roles shadcn does not have (`text-text-secondary`,
`border-border-strong`, the status, severity and topbar families).