# CSS_GUIDE.md

## Zweck
Dieses Dokument beschreibt die Nutzung der CSS-Design-Tokens aus `tokens.css`.

Ziel ist eine konsistente, wartbare und wiedererkennbare UI, unabhängig vom Framework oder Projekt.

---

## Grundregeln

- Keine Hardcodes für Farben, Schriften oder Abstände
- Nutzung ausschließlich über CSS-Variablen
- Tokens sind stabiler als Klassen

Regel:
> Wenn ein Wert nicht aus `:root` kommt, gehört er dort hin.

---

## Einbindung

```html
<link rel="stylesheet" href="tokens.css" />
```

Frameworks (Beispiele):
- React / Vue: global importieren
- NiceGUI / Gradio: über Custom CSS

---

## Farben verwenden

```css
.header {
  background: var(--color-primary);
  color: var(--color-surface);
}

.link {
  color: var(--color-accent);
}

.error {
  color: var(--color-error);
}
```

Regeln:
- Akzentfarbe nur für Interaktion
- Error-Farbe ausschließlich für Fehler

---

## Typografie

```css
h1, h2, h3 {
  font-weight: 600;
}

p {
  font-size: var(--font-size-md);
}

code {
  font-family: var(--font-mono);
}
```

Keine zusätzliche Schriftdefinition pro Komponente.

---

## Spacing

```css
.card {
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}
```

Regel:
- Abstände folgen dem 8-px-Grid
- keine krummen Werte

---

## Border & Radius

```css
.panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
```

Rahmen sind funktional, nicht dekorativ.

---

## Shadows

```css
.dropdown {
  box-shadow: var(--shadow-sm);
}
```

Schatten sparsam einsetzen.

---

## Erweiterungen

- Dark Mode: eigenes Token-Set (`[data-theme="dark"]`)
- Projekt-spezifische Tokens dürfen ergänzt, aber nicht ersetzt werden

---

## Anti-Patterns

- Inline-Styles mit festen Farben
- Kopierte Farbwerte aus Design-Tools
- Magic Numbers

Wenn ein UI inkonsistent wirkt, liegt es fast immer an Regelbruch hier.

---

## Status

Version: v1.0 (Baseline)

Dieses Dokument ergänzt `DESIGN.md` und ist verbindlich für Web-UIs.