# Design Tokens: Colors, Typography & Spacing

## Color System

### Semantic Color Classes
```html
<div class="bg-primary text-white">Primary action</div>
<div class="bg-petrol text-white">Petrol/Brand color</div>
<div class="bg-success text-white">Success state</div>
<div class="bg-danger text-white">Error/danger state</div>
<div class="bg-info text-white">Information</div>
<div class="bg-warning text-white">Warning state</div>
<div class="bg-white">White background</div>
<div class="bg-gray-lighter">Light gray background</div>
<div class="bg-black text-white">Dark background</div>
```

### Color Palette

**Primary:**
- `$petrol` (#236a84) — brand primary
- `$petrol-dark` (#263340)

**Semantic:**
- `$green` (#8cbd24) — success
- `$red` (#ec0404) — danger
- `$blue-dark` (#326dd1) — info
- `$blue` (#21bef4) — warning

**Accent:**
- `$purple` (#7954ff)
- `$teal` (#78eac1)
- `$orange` (#f48d21)
- `$yellow` (#d8ce0d)
- `$pink` (#e83e8c)

**Gray Scale:** `$gray-100` (#f8f9fa) → `$gray-900` (#222222)
- `$gray-lightest` (#f2f2f2), `$gray-lighter` (#e6e6e6), `$gray-light` (#bfc1c5)
- `$gray` (#9fa2a8), `$gray-dark` (#888888), `$gray-darker` (#5f656d), `$gray-darkest` (#262626)

**Priority:**
- `$critical` (#ec0404), `$high` (#d8ce0d), `$low` (#9fa2a8)

---

## Typography

### Font Families
- **Body:** `$font-family-sans-serif` — Source Sans 3
- **Monospace:** `$font-family-monospace` — Source Code Pro

### Headings
```html
<h1>Main Title (2.25rem)</h1>
<h2>Section Title (1.875rem)</h2>
<h3>Subsection (1.563rem)</h3>
<h4>Sub-heading (1.375rem)</h4>
<h5>Minor heading (1.125rem)</h5>
<h6>Smallest heading (1rem)</h6>
```

### Display Text
```html
<h1 class="display-1">Hero Text (5.625rem)</h1>
<h2 class="display-2">Large Display (3.75rem)</h2>
<h3 class="display-3">Medium Display (3.125rem)</h3>
<h4 class="display-4">Small Display (3rem)</h4>
```

### Body Text
```html
<p>Base text (0.875rem)</p>
<p class="text-lg">Large text (1.25rem)</p>
<p class="text-sm">Small text (0.813rem)</p>
<p class="text-xs">Extra small (0.688rem)</p>
```

### Font Weights
- `font-weight-lighter` (200), `font-weight-light` (300), `font-weight-normal` (400)
- `font-weight-semibold` (600), `font-weight-bold` (700), `font-weight-bolder` (800)

---

## Spacing & Layout

### Spacing Scale (base `$spacer: 1.875rem` / 30px)

| Variable | Pixels |
|----------|--------|
| `$spacing-xxxs` | 2px |
| `$spacing-xxs` | ~5px |
| `$spacing-xs` | ~10px |
| `$spacing-sm` | ~15px |
| `$spacing-md` | ~20px |
| `$spacing` | 30px |
| `$spacing-lg` | ~50px |
| `$spacing-xl` | 60px |
| `$spacing-xxl` | 90px |

### Spacing Classes
```html
<div class="mt-xs">Margin top xs</div>
<div class="mb-sm">Margin bottom sm</div>
<div class="mr-md">Margin right md</div>
<div class="ml-lg">Margin left lg</div>
<div class="mx-auto">Horizontal auto margin</div>
<div class="p-sm">Padding all sides sm</div>
<div class="px-md">Horizontal padding md</div>
<div class="py-lg">Vertical padding lg</div>
<span class="icon icon-save mr-icon-spacing"></span>
```

### Breakpoints

| Name | Width |
|------|-------|
| xs | 0 |
| sm | 680px |
| md | 900px |
| lg | 1150px |
| xl | 1600px |
| 2xl | 1900px |
| 3xl | 2200px |

### Layout Variables
- `$header-height`: 60px
- `$sidebar-width`: 200px
- `$meta-sidebar-width`: 300px
- `$capped-width`: 960px
- `$actionbar-height`: 70px