# Design System Specification

## Core Principles

1. **Function over flash** — No decorative elements
2. **Typography-first hierarchy** — Size, weight, spacing do the work
3. **Semantic colors only** — Colors indicate meaning, not decoration
4. **Selective interactivity** — Hover effects only on interactive elements

---

## Color System

### Duo-Tone Base

| Token | Light Mode | Dark Mode | Usage |
|-------|------------|-----------|-------|
| `--bg-primary` | `#ffffff` | `#0f0f10` | Page background |
| `--bg-secondary` | `#f4f4f5` | `#18181b` | Cards, panels |
| `--text-primary` | `#09090b` | `#fafafa` | Headings, body |
| `--text-secondary` | `#71717a` | `#a1a1aa` | Labels, hints |
| `--border` | `#e4e4e7` | `#27272a` | Dividers, inputs |
| `--accent` | `#0d9488` | `#14b8a6` | Primary actions |

### Semantic Indicators

| Token | Value | Usage |
|-------|-------|-------|
| `--indicator-normal` | `#22c55e` | In range, healthy |
| `--indicator-warning` | `#eab308` | Borderline, attention |
| `--indicator-critical` | `#ef4444` | Out of range, urgent |
| `--indicator-info` | `#3b82f6` | Neutral info |

---

## Typography

- **Font**: System stack (`-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`)
- **Scale**: 12 / 14 / 16 / 18 / 24 / 32px
- **Weights**: 400 (regular), 500 (medium), 600 (semibold)

---

## Restrictions

- ❌ No gradients
- ❌ No shadows deeper than `0 1px 2px`
- ❌ No decorative animations
- ❌ No hover effects on non-interactive elements (table rows, cards)
- ✅ Transitions only for state changes (expand/collapse, loading)

---

## Component Guidelines

### Buttons
- Primary: filled with `--accent`
- Secondary: outlined
- Hover: darken 10%, no scale/glow

### Tables
- No row hover
- Alternating bg optional (use `--bg-secondary`)
- Color indicators in dedicated status column

### Cards
- Flat, bordered
- No shadow
- Consistent padding (16px)

### Forms
- Label above input
- Border on focus only
- Error states use `--indicator-critical`