# Color Themes

Payd Labs theme behavior is driven by CSS variables on `:root` and `.dark`.
Applications should toggle the `.dark` class on `document.documentElement` and
save the user preference in local storage.

## Light Theme

Light mode is the default for most operational surfaces.

```css
:root {
  --color-primary: #10263E;
  --color-accent: #18D26E;
  --color-surface: #ffffff;
  --color-surface-secondary: #f8fafc;
  --color-surface-tertiary: #f1f5f9;
  --color-border: #e2e8f0;
  --color-border-medium: #cbd5e1;
  --color-text: #10263E;
  --color-text-secondary: #475569;
  --color-text-tertiary: #94a3b8;
}
```

## Dark Theme

Dark mode uses a neutral stack instead of pure black:

```css
.dark {
  --color-surface: #0f1419;
  --color-surface-secondary: #161b22;
  --color-surface-tertiary: #1c2128;
  --color-border: #30363d;
  --color-border-medium: #484f58;
  --color-text: #e6edf3;
  --color-text-secondary: #8b949e;
  --color-text-tertiary: #6e7681;
  --color-accent: #4ae08e;
  --color-accent-dark: #4ae08e;
  color-scheme: dark;
}
```

## Semantic State

| State | Use |
|---|---|
| Success | Completed, available, approved, active, selected positive result |
| In progress | Pending, confirming, processing, onboarding, received |
| Warning | Awaiting action, underpaid, expired, partial, risky but recoverable |
| Error | Failed, rejected, suspended, invalid, destructive |
| Neutral | Cooldown, inactive, unavailable, unknown |

## Status Pills

Use pale backgrounds with colored text. Keep status pills compact:

```html
<span class="px-2 py-0.5 rounded-full text-[10px] font-semibold bg-accent-100 text-accent-dark">
  completed
</span>
```

Recommended mappings:

| Bucket | Light classes or tokens |
|---|---|
| Success | `bg-accent-100 text-accent-dark` |
| In progress | `bg-blue-50 text-blue-600` or `bg-primary-100 text-text` |
| Warning | `bg-amber-50 text-amber-600` |
| Error | `bg-red-50 text-red-600` |
| Neutral | `bg-surface-tertiary text-text-tertiary` |

## Selection

Selected nav items and selected cards use green-tinted backgrounds:

```css
background: var(--color-accent-100);
color: var(--color-accent-dark);
```

## Focus

Inputs and controls use accent focus:

```css
border-color: var(--color-accent);
box-shadow: 0 0 0 3px var(--color-accent-100);
```

## Avoid

- Do not create single-product palettes unless a product has a real brand need.
- Do not dominate the page with gradients.
- Do not use pure black for dark surfaces.
- Do not use accent green for every visual element; it should mark action,
  selection, success, or important positive state.