# Palette

The Clopos colour story. These are the canonical values; the machine-readable mirrors live in
[`tokens/colors.css`](tokens/colors.css) and [`tokens/colors.json`](tokens/colors.json). Don't
introduce a hex value that isn't here — add it here first, then use the token.

**Source of truth:** `CloposDS.jsx` (`const T`, `NB_SEC*`, `NB`, `PS_SEC*`, `PC_T`, `PC_N`,
`TABLE_COLORS`) — the production token set. A design built on these tokens matches the real product.
A handful of `legacy` tokens are kept (no production equivalent) so existing mockups keep working.

A live, styled view of every token (light + auto-derived dark) lives in
[`colors.html`](colors.html).

---

## Brand

| Token | Hex | Use |
|---|---|---|
| `--brand-purple` | `#312E56` | POS sidebar, brand surfaces, landing gradient end |
| `--brand-ink` | `#1A1A2E` | Darkest brand background, landing gradient start |
| `--brand-green` | `#2ECC71` | Brand accent / “Clopos.” dot, success energy |

Landing gradient: `linear-gradient(135deg, #1A1A2E 0%, #312E56 100%)`.

## Primary (interactive blue)

| Token | Hex | Use |
|---|---|---|
| `--primary-50` | `#DFEFFF` | Selected item bg · badge bg (primaryLight) |
| `--primary-100` | `#96CAFF` | Very light tint |
| `--primary-250` | `#74B9FF` | — |
| `--primary-300` | `#66B2FF` | Light emphasis |
| `--primary-500` | `#2684FF` | Main · CTA buttons · links · active states |
| `--primary-550` | `#2F8AE8` | — |
| `--primary-600` | `#2B7DD3` | Hover state |
| `--primary-650` | `#2772C0` | — |
| `--primary-700` | `#2368AF` | Deep pressed |
| `--primary-750` | `#205F9F` | Hover deep state (primaryDark) |
| `--text-link` | `#2684FF` | Link text (Primary 500 alias) |
| `--manager-primary` | `#6D8CF1` | Manager-app primary (mobile) |
| `--primary-050` *(legacy)* | `#F5F9FF` | Subtle fills |
| `--primary-400` *(legacy)* | `#5A8DEE` | Hover / secondary emphasis |

## Systems (semantic)

**Fail / Error (Red) — full ramp 100→900.** Anchors `200 · 400 · 800` are source (brand truth); the rest interpolated.

| Token | Hex | Use |
|---|---|---|
| `--error-100` | `#FFF7F6` | Soft tint of 200 |
| `--error-200` | `#FFF0EE` | **source** — soft bg / badge (`--error-light`) |
| `--error-300` | `#FFD9D3` | — |
| `--error-400` | `#EF564D` | **source** — Fail 400 anchor |
| `--error-500` | `#FFA99E` | — |
| `--error-600` | `#FF9084` | — |
| `--error-700` | `#FF7569` | — |
| `--error-800` | `#FF564D` | **source — MAIN** |
| `--error-900` | `#D22626` | Hover / active (dark step) |
| `--t-error-light` | `#FFF0EE` | = 200 |
| `--t-error` | `#FF564D` | = 800 (MAIN) |
| `--t-error-hover` | `#D22626` | = 900 |
| `--t-error-dark` | `#D22626` | = 900 |

**Success (Green) — full ramp 100→900.** Anchors `200 · 400 · 800` are source; the rest interpolated.

| Token | Hex | Use |
|---|---|---|
| `--success-100` | `#F4FAF5` | Soft tint of 200 |
| `--success-200` | `#E9F4EB` | **source** — soft bg / badge (`--success-light`) |
| `--success-300` | `#96DEAB` | — |
| `--success-400` | `#00C56A` | **source** — CTA green (confirm/apply) · online dot |
| `--success-500` | `#11B75E` | — |
| `--success-600` | `#19A952` | — |
| `--success-700` | `#1E9B46` | — |
| `--success-800` | `#218E3A` | **source — MAIN** |
| `--success-900` | `#007621` | Hover / active (dark step) |
| `--t-success-light` | `#E9F4EB` | = 200 |
| `--t-success` | `#218E3A` | = 800 (MAIN) |
| `--t-success-hover` | `#007621` | = 900 |
| `--t-success-dark` | `#007621` | = 900 |

**Legacy semantic aliases** (kept — referenced across existing pages):

| Token | Hex | Use |
|---|---|---|
| `--error` | `#FF564D` | = `--error-800` (Fail Main) · border/text · delete |
| `--error-light` | `#FFF0EE` | = `--error-200` · soft bg / badge |
| `--success` | `#218E3A` | = `--success-800` (Success Main) |
| `--success-light` | `#E9F4EB` | = `--success-200` · badge bg |
| `--warning` | `#FFAE00` | Attention Main · warning text · warning icon |
| `--warning-light` | `#FFF8DF` | Warning badge bg (Attention 200) |
| `--system-blue` | `#0080D1` | Systems Blue · announcement variant |
| `--danger` *(alias)* | `#FF564D` | Legacy name → `--error` |
| `--danger-bg` *(alias)* | `#FFF0EE` | Legacy → `--error-light` |
| `--danger-fg` *(legacy)* | `#E74C3C` | Danger text |
| `--success-bg` *(alias)* | `#E9F4EB` | Legacy → `--success-light` |
| `--success-fg` *(legacy)* | `#2BB673` | Manager success text |
| `--warning-bg` *(alias)* | `#FFF8DF` | Legacy → `--warning-light` |
| `--info` *(legacy)* | `#0095E9` | Informational |
| `--az-green` *(legacy)* | `#3CC65A` | AZ language badge |

## Grey scale (neutral ramp)

| Token | Hex | Use |
|---|---|---|
| `--grey-100` | `#F8F8FC` | Subtle bg · hover bg |
| `--grey-200` | `#F2F2F7` | Cell borders · dividers · disabled bg |
| `--grey-300` | `#E5E5EA` | Item borders · input borders unselected |
| `--grey-400` | `#D1D1D6` | Border default · unchecked checkbox |
| `--grey-500` | `#C0C0C5` | Disabled icons · offline dot |
| `--grey-600` | `#A4A4A9` | Border hover |
| `--grey-700` | `#8E8E93` | Neutral · placeholder icon |
| `--neutral` | `#8E8E93` | Grey 700 alias |
| `--neutral-light` | `rgba(142,142,147,0.10)` | Neutral hover bg |

## Borders

| Token | Hex | Use |
|---|---|---|
| `--border-default` | `#D1D1D6` | Default input/button border (Grey 400) |
| `--border-hover` | `#A4A4A9` | Hover border (Grey 600) |
| `--border-disabled` | `#E5E5EA` | Disabled / unselected item border (Grey 300) |
| `--border-light` | `#F2F2F7` | Light separator · footer border (Grey 200) |
| `--border` *(legacy)* | `#E2E8F0` | Default border |
| `--divider` *(legacy)* | `#E9E9EA` | Dividers |
| `--row-divider` *(legacy)* | `#EFF1F4` | List-row separators |

## Text

| Token | Hex | Use |
|---|---|---|
| `--text-primary` | `#1D1D1D` | Primary labels · values (Text 500) |
| `--text-400` | `#333333` | Table plain text |
| `--text-black` | `#030303` | Numpad digits · price values |
| `--text-secondary` | `#666666` | Secondary info · descriptions (Text 300) |
| `--text-placeholder` | `#999999` | Placeholder · hint text (Text 200) |
| `--text-disabled` | `#C4C4CC` | Disabled labels |
| `--text` *(legacy)* | `#16253C` | Primary text |
| `--text-body` *(legacy)* | `#212529` | Body copy (POS) |
| `--text-muted` *(legacy)* | `#677389` | Secondary text |
| `--text-dim` *(legacy)* | `#8C95A5` | Tertiary / placeholder |
| `--text-soft` *(legacy)* | `#828D99` | Soft labels |

## Surfaces

| Token | Hex | Use |
|---|---|---|
| `--surface` | `#FFFFFF` | Cards, sheets |
| `--bg` | `#F5F6F8` | App background |
| `--bg-light` | `#F1F4FB` | Tinted background (manager) |
| `--bg-faint` | `#FAFAFA` | Faint fills |
| `--table-header-bg` | `#EDF7FF` | Product Blue 50 · table header bg |
| `--bg-table-alt` | `#FCFCFE` | Alternate row bg |

## Terminal / Navbar secondary scale (dark surface)

| Token | Value | Use |
|---|---|---|
| `--nb-sec-200` | `#676586` | POS group bg · BackBtn default bg |
| `--nb-sec-300` | `#58567A` | NbNavShell bg · DrawerSidebar container |
| `--nb-sec-400` | `#47456D` | NavTab hover inactive bg · DrawerSidebar border |
| `--nb-sec-500` | `#35325E` | Active shell bg · BackBtn hover · selected tab |
| `--nb-sec-700` | `#2C294D` | NbOrderIconBox bg |
| `--nb-white` | `#FFFFFF` | Navbar text · icons |
| `--nb-white-sub` | `rgba(255,255,255,0.70)` | Close icon · secondary navbar text |
| `--nb-nav-border` | `rgba(255,255,255,0.10)` | Navbar bottom border |
| `--nb-divider` | `rgba(255,255,255,0.14)` | Divider between navbar elements |
| `--nb-ghost-hover` | `rgba(255,255,255,0.10)` | NbIconBtn hover bg |
| `--nb-dev-bg` | `rgba(255,255,255,0.08)` | NbDevBadge bg |
| `--nb-dev-border` | `rgba(255,255,255,0.14)` | NbDevBadge border |

## Sidebar scale (Back Office, dark navy)

| Token | Hex | Use |
|---|---|---|
| `--sidebar-bg` | `#1F274F` | Back Office sidebar bg |
| `--sidebar-selected` | `#5463A9` | BO selected category bg |
| `--sidebar-branch` | `#3E4772` | BO branch selector + footer bg |
| `--sidebar-pink-500` | `#7C93FF` | Branch item selected bg |
| `--sidebar-pink-100` | `#EAEDFF` | Branch item unselected bg |
| `--sidebar-white-300` | `#FAFAFA` | Child item default text |
| `--sidebar-white-500` | `#FFFFFF` | Child item selected text |

## POS / Product card secondary scale

| Token | Hex | Use |
|---|---|---|
| `--ps-sec-50` | `#A0A0B4` | POS sidebar icon/label default |
| `--ps-sec-300` | `#58567A` | POS sidebar divider bg |
| `--ps-sec-500` | `#35325E` | POS price pill bg |
| `--pc-sec-500` | `#35325E` | Product card price pill bg |

## Product card system

| Token | Hex | Use |
|---|---|---|
| `--pc-primary` | `#2684FF` | Card background |
| `--pc-error` | `#FF564D` | StopLimit badge bg · KG badge bg |
| `--pc-white` | `#FFFFFF` | All text/icons on card |

## Table colours (POS order table dots)

| Token | Hex | Use |
|---|---|---|
| `--table-empty` | `#7A8899` | Empty table dot |
| `--table-mine` | `#2684FF` | My table dot |
| `--table-colleague` | `#9B59B6` | Colleague table dot |
| `--table-overdue` | `#E03131` | Overdue table dot |

## Shadows & rings

Live in [`tokens/radius-shadow.css`](tokens/radius-shadow.css).

| Token | Value | Use |
|---|---|---|
| `--focus-ring` | `0 0 0 3px rgba(38,132,255,0.15)` | Input focus state ring |
| `--error-ring` | `0 0 0 3px rgba(255,86,77,0.12)` | Error input focus ring |
| `--dropdown-shadow` | `0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04)` | Dropdown / modal / card |
| `--trigger-open-shadow` | `0 7px 29px rgba(100,100,111,0.20)` | Open trigger shadow |

## Manager gradients

- `--mgr-gradient`: `linear-gradient(90deg, #7CB4F9 0%, #8D7EE6 49%, #A94DD5 100%)`
- `--mgr-gradient-2`: `linear-gradient(90deg, #7CB3F9 0%, #A94DD5 100%)`

---

### How to use

```html
<link rel="stylesheet" href="/design-system/tokens/tokens.css">
<style>
  .pay-btn { background: var(--primary-500); color: #fff; }
  .paid    { color: var(--success); }
  .input:focus { box-shadow: var(--focus-ring); }
</style>
```