# FourIA Brand Styling

> Design tokens, brand identity, and component patterns for the FourIA Dashboard.
> Source: `apps/fouria/src/client/index.css` and component stylesheets.

## Brand Identity

### Colors

FourIA uses a warm, dark-first palette rooted in deep burgundy and soft earth tones. The palette conveys professionalism with warmth, avoiding the cold clinical feel of pure grays.

**Main Colors:**

- Dark: `#1a1515` — Page backgrounds, text areas, primary surface
- Surface: `#111111` — Card backgrounds, elevated surfaces
- Text Primary: `#ede8e3` — Body text, headings, active content
- Text Muted: `#6b6560` — Labels, placeholders, timestamps

**Accent Colors:**

- Burgundy (Primary): `#7c323e` — Buttons, active states, focus rings, brand accent
- Burgundy Hover: `#98404e` — Interactive hover states
- Green (Success): `#4ade80` — Running status, success indicators
- Amber (Warning): `#95aa69` — Pending states, caution indicators
- Red (Error): `#ef4444` — Error states, destructive actions

**Supporting Colors:**

- Border: `#2a2525` — Dividers, card edges, section separators
- Surface Hover: `#1e1a1a` — Hovered items, secondary backgrounds
- Sidebar BG: `rgba(17, 17, 17, 0.92)` — Fixed sidebar backdrop

### Typography

- **Headings & Body**: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif` — System font stack for native feel across platforms
- **Monospace**: `'Fragment Mono', 'Courier New', monospace` — Code editors, textareas, technical content
- **Line height**: `1.6` for comfortable reading
- **Font smoothing**: `antialiased` / `grayscale` for crisp rendering
- **Links**: Brand primary color with `0.15s ease` transitions, underline on hover

### Shape & Accent Application

- Non-text shapes (badges, borders, dots) use accent colors with rgba backgrounds at 0.15–0.2 opacity
- Cards use subtle shadows and 10px border-radius for depth without harshness
- Status indicators cycle through green/amber/red with animated pulses for active states
- Gradient overlays (`linear-gradient(135deg, surface → rgba(17,17,17,0.95)`) add depth to sections

## Color Palette

All tokens are defined as CSS custom properties on `:root` and consumed across the UI via `var(--token)`.

### Brand / Action

| Token             | Value     | Usage                                                         |
| ----------------- | --------- | ------------------------------------------------------------- |
| `--primary-color` | `#7c323e` | Buttons, active nav items, links, focus rings, accent borders |
| `--primary-hover` | `#98404e` | Primary button/active nav hover state                         |

### Backgrounds

| Token             | Value                    | Usage                                                 |
| ----------------- | ------------------------ | ----------------------------------------------------- |
| `--bg-color`      | `#1a1515`                | Page background, textarea/input background            |
| `--surface-color` | `#111111`                | Card backgrounds, accordion, select, section bases    |
| `--surface-hover` | `#1e1a1a`                | Hovered items, secondary button bg, accordion content |
| `--sidebar-bg`    | `rgba(17, 17, 17, 0.92)` | Fixed sidebar backdrop                                |

### Typography

| Token              | Value     | Usage                                            |
| ------------------ | --------- | ------------------------------------------------ |
| `--text-primary`   | `#ede8e3` | Body text, headings, active content              |
| `--text-secondary` | `#a09890` | Subtle text, descriptions, loading indicators    |
| `--text-muted`     | `#6b6560` | Labels, placeholders, timestamps, section titles |
| `--header-color`   | `#b8b2b0` | Header-level text                                |

### Semantic

| Token             | Value     | Usage                                                               |
| ----------------- | --------- | ------------------------------------------------------------------- |
| `--success-color` | `#4ade80` | Running status, paired badges, success banners, success buttons     |
| `--warning-color` | `#95aa69` | Starting/pending status, warning banners, mismatch hints            |
| `--error-color`   | `#ef4444` | Stopped/error status, error banners, danger buttons, remove actions |

### Borders & Shadows

| Token             | Value                              | Usage                                                 |
| ----------------- | ---------------------------------- | ----------------------------------------------------- |
| `--border-color`  | `#2a2525`                          | Card borders, dividers, section edges, select borders |
| `--border-radius` | `10px`                             | Card, button, section border radius                   |
| `--shadow`        | `0 4px 6px -1px rgba(0,0,0,0.5)`   | Card shadows                                          |
| `--shadow-lg`     | `0 10px 40px -8px rgba(0,0,0,0.6)` | Modal shadows                                         |

## Typography

- **Font stack**: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif`
- **Monospace**: `'Fragment Mono', 'Courier New', monospace` (used in code editors and textareas)
- **Line height**: `1.6` (body)
- **Font smoothing**: `antialiased` / `grayscale`
- **Links**: `--primary-color` with `0.15s ease` transition, underline on hover

## Layout

| Pattern      | Details                                                                                              |
| ------------ | ---------------------------------------------------------------------------------------------------- |
| **Sidebar**  | Fixed left, 56px collapsed / 200px expanded, `cubic-bezier(0.4,0,0.2,1)` 0.3s transition             |
| **Content**  | `margin-left: 56px`, `padding: 2rem`, `max-width: 1200px`                                            |
| **Mobile**   | At ≤768px sidebar moves to bottom (60px horizontal nav), content padding shrinks to 1rem             |
| **Cards**    | `--surface-color` bg, `1px solid --border-color`, `--border-radius`, `--shadow`                      |
| **Gradient** | `linear-gradient(135deg, var(--surface-color) 0%, rgba(17,17,17,0.95) 100%)` for section backgrounds |

## Components

### Buttons (`.btn`)

```css
.btn {
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius);
  font-weight: 500;
  font-size: 0.875rem;
}
.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.8rem;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
```

| Variant          | BG                | Text             | Hover             |
| ---------------- | ----------------- | ---------------- | ----------------- |
| `.btn-primary`   | `--primary-color` | white            | `--primary-hover` |
| `.btn-secondary` | `--surface-hover` | `--text-primary` | `--border-color`  |
| `.btn-success`   | `--success-color` | `--bg-color`     | brightness(1.1)   |
| `.btn-danger`    | `--error-color`   | white            | brightness(1.1)   |
| `.btn-warning`   | `--warning-color` | `#1a1a1a`        | brightness(1.1)   |

### Status Badges (`.gateway-status-badge`)

Pill-shaped (`border-radius: 9999px`), uppercase, `letter-spacing: 0.025em`, `font-size: 0.75rem`.

| State    | Class       | Text Color        | BG                      |
| -------- | ----------- | ----------------- | ----------------------- |
| Running  | `.running`  | `--success-color` | `rgba(74,222,128,0.15)` |
| Starting | `.starting` | `--warning-color` | `rgba(251,191,36,0.15)` |
| Stopped  | `.stopped`  | `--error-color`   | `rgba(239,68,68,0.15)`  |

Each includes a `.status-dot` (8px circle) — the starting state has a pulse animation.

### Banners

| Type    | BG                      | Border            |
| ------- | ----------------------- | ----------------- |
| Error   | `rgba(239,68,68,0.15)`  | `--error-color`   |
| Warning | `rgba(251,191,36,0.15)` | `--warning-color` |
| Success | `rgba(74,222,128,0.15)` | `--success-color` |

### Device Cards (`.device-card`)

Cards with `.pending` (2px `--warning-color` border) and `.paired` (`--success-color` border) variants.
Device status badges use rgba backgrounds matching the semantic color at 0.2 opacity.

### Modals

- **Overlay**: `rgba(0,0,0,0.75)` + `backdrop-filter: blur(4px)`, z-index 1000
- **Content**: `--surface-color` bg, `--border-radius`, `--shadow-lg`, max-width 700px, max-height 90vh
- **Header**: `border-bottom: 1px solid var(--border-color)`, padding 1.5rem
- **Body**: padding 1.5rem, scrollable
- **Footer**: `border-top: 1px solid var(--border-color)`, right-aligned actions

### Model Selector (`.model-select`)

Select inputs with `--surface-color` bg, `--border-color` border, focus ring using `--primary-color`.
Tier badges use colored rgba backgrounds at 0.2 opacity.

### Spinner

40px circle, 3px `--border-color` border with `--primary-color` top segment, `spin` 1s linear infinite.
`.spinner.sm` variant: 20px, 2px border.

### Report Items (`.report-item`)

Colored left border (`3px solid`) based on type:

- `--warning-color` for warnings
- `--primary-color` for changes
- `--success-color` for successes

### Transitions

| Property                  | Duration | Easing                    |
| ------------------------- | -------- | ------------------------- |
| color, background, border | 0.15s    | ease                      |
| sidebar width             | 0.3s     | cubic-bezier(0.4,0,0.2,1) |
| accordion content         | 0.25s    | ease                      |
| chevron rotate            | 0.2s     | ease                      |
| sidebar label opacity     | 0.2s     | ease                      |

## Scrollbar

```css
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-muted);
}
```

## Responsive Breakpoints

| Breakpoint | Behavior                                                                                           |
| ---------- | -------------------------------------------------------------------------------------------------- |
| ≤768px     | Sidebar collapses to bottom nav, content padding shrinks to 1rem, bottom padding adds 60px for nav |
| ≤640px     | Section padding shrinks to 1rem, grids go single column                                            |