# Design Tokens Referenz

Alle CSS Custom Properties aus `tokens.css` — die zentrale Anlaufstelle für alle Anpassungen.

**Regel:** Immer semantische Aliases verwenden, nie direkt die Palette.

---

## Farb-Palette (nur intern)

Diese Werte nie direkt in HTML/CSS verwenden — nur als Basis für semantische Aliases.

```css
/* Graustufen */
--color-white, --color-gray-50/100/200/300/400/500/600/700/800/900, --color-black

/* Akzent (Primärfarbe) */
--color-accent-50/100/200/300/400/500/600/700/800/900
/* Standard: --color-accent-500: #6366f1 (Indigo) */

/* Status */
--color-success, --color-success-bg, --color-success-border
--color-warning, --color-warning-bg, --color-warning-border
--color-danger,  --color-danger-bg,  --color-danger-border
--color-info,    --color-info-bg,    --color-info-border
```

**Primärfarbe anpassen:** Nur `--color-accent-*`-Werte in `tokens.css` ändern → alle Komponenten folgen automatisch.

---

## Semantische Aliases (diese verwenden)

### Hintergründe

| Token | Light | Verwendung |
|---|---|---|
| `--bg` | `#ffffff` | Seiten-Hintergrund |
| `--bg-subtle` | `#f8f9fa` | Subtiler Hintergrund, Zebra-Zeilen |
| `--bg-muted` | `#f1f3f5` | Gedämpfter Hintergrund |

### Surfaces (Karten, Overlays)

| Token | Verwendung |
|---|---|
| `--surface` | Karten, Panels |
| `--surface-raised` | Erhöhte Elemente (Tooltips) |
| `--surface-overlay` | Modale Overlays, Dropdowns |

### Rahmen

| Token | Verwendung |
|---|---|
| `--border` | Standard-Rahmen |
| `--border-strong` | Betonter Rahmen |
| `--border-focus` | Fokus-Ring (= Akzentfarbe) |

### Text

| Token | Verwendung |
|---|---|
| `--text` | Primärtext |
| `--text-muted` | Sekundärtext, Metadaten |
| `--text-subtle` | Platzhalter, deaktivierte Elemente |
| `--text-on-accent` | Text auf Akzent-Hintergrund |

### Akzentfarbe

| Token | Verwendung |
|---|---|
| `--accent` | Primärfarbe (Buttons, Links, Fokus) |
| `--accent-hover` | Hover-State |
| `--accent-active` | Aktiv/Gedrückt-State |
| `--accent-subtle` | Sehr heller Hintergrund |
| `--accent-muted` | Heller Hintergrund |

---

## Typografie

### Font Families

```css
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
```

### Font Sizes

| Token | Wert | px |
|---|---|---|
| `--text-xs` | `0.75rem` | 12px |
| `--text-sm` | `0.875rem` | 14px |
| `--text-base` | `1rem` | 16px |
| `--text-md` | `1.125rem` | 18px |
| `--text-lg` | `1.25rem` | 20px |
| `--text-xl` | `1.5rem` | 24px |
| `--text-2xl` | `1.875rem` | 30px |
| `--text-3xl` | `2.25rem` | 36px |
| `--text-4xl` | `3rem` | 48px |

### Font Weights

```css
--weight-normal:   400
--weight-medium:   500
--weight-semibold: 600
--weight-bold:     700
```

### Line Heights

```css
--leading-tight:   1.25
--leading-snug:    1.375
--leading-normal:  1.5
--leading-relaxed: 1.625
```

---

## Spacing (4px-Grid)

| Token | Wert | px |
|---|---|---|
| `--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 |
| `--space-20` | `5rem` | 80px |
| `--space-24` | `6rem` | 96px |

---

## Border Radius

| Token | Wert | px |
|---|---|---|
| `--radius-sm` | `0.25rem` | 4px |
| `--radius-md` | `0.375rem` | 6px |
| `--radius-lg` | `0.5rem` | 8px |
| `--radius-xl` | `0.75rem` | 12px |
| `--radius-2xl` | `1rem` | 16px |
| `--radius-full` | `9999px` | Vollständig rund |

---

## Schatten

```css
--shadow-xs   /* Minimal, z.B. kleine Karten */
--shadow-sm   /* Standard-Karten */
--shadow-md   /* Erhöhte Elemente */
--shadow-lg   /* Dropdowns, Modals */
--shadow-xl   /* Große Overlays */
--shadow-focus /* Fokus-Ring: 0 0 0 3px rgba(accent, 0.25) */
```

---

## Übergänge

```css
--duration-fast: 120ms
--duration-base: 200ms   /* Standard */
--duration-slow: 300ms

--ease:     cubic-bezier(0.4, 0, 0.2, 1)   /* Standard */
--ease-out: cubic-bezier(0, 0, 0.2, 1)
--ease-in:  cubic-bezier(0.4, 0, 1, 1)

--transition: var(--duration-base) var(--ease)  /* Kombination für transition-Shorthand */
```

---

## Layout-Konstanten

### Container Breakpoints

| Token | Wert | px |
|---|---|---|
| `--container-sm` | `40rem` | 640px |
| `--container-md` | `48rem` | 768px |
| `--container-lg` | `64rem` | 1024px |
| `--container-xl` | `80rem` | 1280px (default) |
| `--container-2xl` | `90rem` | 1440px |

### Strukturelle Maße

```css
--nav-height:    3.5rem   /* 56px — Höhe der Topnav */
--sidebar-width: 16rem    /* 256px — Breite der Sidebar */
```

### Z-Index Skala

| Token | Wert | Verwendung |
|---|---|---|
| `--z-base` | `0` | Normal |
| `--z-raised` | `10` | Leicht erhöht |
| `--z-dropdown` | `100` | Dropdowns |
| `--z-sticky` | `200` | Sticky Elemente (Topnav) |
| `--z-overlay` | `300` | Overlays |
| `--z-modal` | `400` | Modals |
| `--z-toast` | `500` | Toast-Benachrichtigungen |

---

## Dark Mode

Aktivierung via `data-theme`-Attribut auf `<html>`:

```html
<html data-theme="light">  <!-- oder "dark" -->
```

Nur semantische Aliases werden im Dark Mode überschrieben — die Palette bleibt unverändert. Toggle-Logik inkl. `localStorage`-Persistenz und `prefers-color-scheme`-Erkennung ist in `base.html` fertig implementiert.

**Dark Mode Overrides (Beispiele):**
```css
[data-theme="dark"] {
  --bg:      var(--color-black);   /* #0d0f12 */
  --surface: #161920;
  --text:    var(--color-gray-100);
  --accent:  var(--color-accent-400);  /* Heller für besseren Kontrast */
}
```