# Design Tokens — Ninja Nexus

## Farver

### Brand

| Token | Light | Dark | Brug |
|-------|-------|------|------|
| `--color-primary` | `#E63946` | `#FF4D5A` | Primær accent (Ninja red) |
| `--color-primary-hover` | `#D62839` | `#FF6B76` | Hover state |
| `--color-secondary` | `#1D3557` | `#457B9D` | Sekundær (Navy) |
| `--color-accent` | `#F4A261` | `#F4A261` | Highlights, badges |

### Semantisk

| Token | Light | Dark |
|-------|-------|------|
| `--color-success` | `#2A9D8F` | `#40C9B8` |
| `--color-warning` | `#E9C46A` | `#F0D78C` |
| `--color-error` | `#E63946` | `#FF4D5A` |
| `--color-info` | `#457B9D` | `#6BA3C7` |

### Overflader

| Token | Light | Dark |
|-------|-------|------|
| `--color-bg-primary` | `#F8F9FA` | `#0D1117` |
| `--color-bg-secondary` | `#FFFFFF` | `#161B22` |
| `--color-bg-elevated` | `#FFFFFF` | `#21262D` |
| `--color-bg-overlay` | `rgba(0,0,0,0.5)` | `rgba(0,0,0,0.7)` |

### Tekst

| Token | Light | Dark |
|-------|-------|------|
| `--color-text-primary` | `#1A1A2E` | `#E6EDF3` |
| `--color-text-secondary` | `#6C757D` | `#8B949E` |
| `--color-text-disabled` | `#ADB5BD` | `#484F58` |
| `--color-text-inverse` | `#FFFFFF` | `#0D1117` |

### Borders

| Token | Light | Dark |
|-------|-------|------|
| `--color-border-default` | `#DEE2E6` | `#30363D` |
| `--color-border-focus` | `#E63946` | `#FF4D5A` |

---

## Typografi

| Token | Værdi |
|-------|-------|
| `--font-family-primary` | `'Inter', 'Segoe UI', system-ui, sans-serif` |
| `--font-family-mono` | `'JetBrains Mono', 'Cascadia Code', monospace` |
| `--font-size-xs` | `0.75rem` (12px) |
| `--font-size-sm` | `0.875rem` (14px) |
| `--font-size-base` | `1rem` (16px) |
| `--font-size-lg` | `1.125rem` (18px) |
| `--font-size-xl` | `1.25rem` (20px) |
| `--font-size-2xl` | `1.5rem` (24px) |
| `--font-size-3xl` | `2rem` (32px) |
| `--font-weight-normal` | `400` |
| `--font-weight-medium` | `500` |
| `--font-weight-semibold` | `600` |
| `--font-weight-bold` | `700` |
| `--line-height-tight` | `1.25` |
| `--line-height-normal` | `1.5` |
| `--line-height-relaxed` | `1.75` |

---

## Spacing

| Token | Værdi |
|-------|-------|
| `--space-0` | `0` |
| `--space-1` | `0.25rem` (4px) |
| `--space-2` | `0.5rem` (8px) |
| `--space-3` | `0.75rem` (12px) |
| `--space-4` | `1rem` (16px) |
| `--space-5` | `1.25rem` (20px) |
| `--space-6` | `1.5rem` (24px) |
| `--space-8` | `2rem` (32px) |
| `--space-10` | `2.5rem` (40px) |
| `--space-12` | `3rem` (48px) |
| `--space-16` | `4rem` (64px) |

---

## Radius

| Token | Værdi | Brug |
|-------|-------|------|
| `--radius-none` | `0` | — |
| `--radius-sm` | `4px` | Inputs, badges |
| `--radius-md` | `8px` | Cards, buttons |
| `--radius-lg` | `12px` | Modals, panels |
| `--radius-xl` | `16px` | Desktop widgets |
| `--radius-full` | `9999px` | Avatars, pills |

---

## Skygger

| Token | Light | Dark |
|-------|-------|------|
| `--shadow-sm` | `0 1px 2px rgba(0,0,0,0.05)` | `0 1px 2px rgba(0,0,0,0.3)` |
| `--shadow-md` | `0 4px 6px rgba(0,0,0,0.07)` | `0 4px 6px rgba(0,0,0,0.4)` |
| `--shadow-lg` | `0 10px 15px rgba(0,0,0,0.1)` | `0 10px 15px rgba(0,0,0,0.5)` |
| `--shadow-xl` | `0 20px 25px rgba(0,0,0,0.15)` | `0 20px 25px rgba(0,0,0,0.6)` |

---

## Animation

| Token | Værdi |
|-------|-------|
| `--duration-fast` | `150ms` |
| `--duration-normal` | `250ms` |
| `--duration-slow` | `400ms` |
| `--easing-default` | `cubic-bezier(0.4, 0, 0.2, 1)` |
| `--easing-bounce` | `cubic-bezier(0.34, 1.56, 0.64, 1)` |

---

## Z-index

| Token | Værdi | Brug |
|-------|-------|------|
| `--z-base` | `0` | Normal content |
| `--z-dropdown` | `100` | Dropdowns |
| `--z-sticky` | `200` | Taskbar |
| `--z-modal` | `300` | Modals |
| `--z-launcher` | `400` | Launcher overlay |
| `--z-notification` | `500` | Toast/notifications |

---

## v2 — Desktop Shell (2026-06)

**Aktiv i WPF Shell.** Erstatter v1 Ninja Red på desktop-oplevelsen. Se [NEXUS_VISUAL_DIRECTION_V2.md](./NEXUS_VISUAL_DIRECTION_V2.md).

### Brand v2

| Token | Hex | Brug |
|-------|-----|------|
| `--color-primary-purple` | `#8A4FFF` | Logo gradient, primær accent |
| `--color-primary-blue` | `#2D9CFF` | Glow, ikoner, horizon |
| `--color-deep-navy` | `#081225` | Desktop baggrund |
| `--color-dark-surface` | `#0F172A` | Paneler, glass base |
| `--color-accent-cyan` | `#00D4FF` | Highlights, links, status |
| `--color-success` | `#22C55E` | Online, optimal status |

### Glass v2

| Token | Værdi | Brug |
|-------|-------|------|
| `--glass-bg` | `#1AFFFFFF` (10% white) | Panel baggrund |
| `--glass-border` | `#33FFFFFF` | Kant |
| `--glass-blur` | Simuleret via shadow | WPF har ikke ægte backdrop blur |
| `--glow-purple` | `#668A4FFF` | Logo, dock hover |
| `--glow-cyan` | `#6600D4FF` | Horizon, search focus |

### WPF resource keys

Implementeret i `source/nexus-shell/NexusShell/Themes/NexusDesignTokens.xaml`:

- `NexusPurpleBrush`, `NexusBlueBrush`, `NexusCyanBrush`
- `NexusDeepNavyBrush`, `NexusDarkSurfaceBrush`
- `NexusGlassBrush`, `NexusGlassBorderBrush`
- `NexusHorizonGradient`, `NexusLogoGradient`

---

*Se også: [THEMES.md](./THEMES.md) · [BRANDING.md](./BRANDING.md) · [NEXUS_VISUAL_DIRECTION_V2.md](./NEXUS_VISUAL_DIRECTION_V2.md)*
