/*
 * Design-Tokens aus dem Dashboard-Artboard (claude.ai/design, Projekt
 * "TableTop Com"). Einzige Stelle mit Farb-/Maß-Literalen — alles weitere
 * CSS referenziert ausschließlich diese Variablen (siehe docs/ARCHITEKTUR.md
 * Abschnitt 5 und Lastenheft Abschnitt 8).
 */
:root {
  /* Farben */
  --projekt-color-bg: #0A0B0C;
  --projekt-color-bg-inset: #0E1012;
  --projekt-color-surface: #16181B;
  --projekt-color-surface-alt: #1D2024;
  --projekt-color-border: #2A2E33;
  --projekt-color-border-strong: #3A3F46;
  --projekt-color-text: #E8E9EA;
  --projekt-color-text-muted: #9AA0A6;
  --projekt-color-text-subtle: #6B7178;
  --projekt-color-accent: #E5533D;
  --projekt-color-accent-ink: #0A0B0C;

  /* Mana-Farben (aktiv), kanonisch aus ManaPips.dc.html */
  --projekt-mana-w: #C8C3B4;
  --projekt-mana-u: #6E8BA6;
  --projekt-mana-b: #6B6470;
  --projekt-mana-r: #A66A5C;
  --projekt-mana-g: #6E8A72;
  --projekt-mana-inactive-bg: #2A2E33;
  --projekt-mana-inactive-ink: #9AA0A6;

  /* Typografie */
  --projekt-font-sans: 'Archivo', system-ui, sans-serif;
  --projekt-font-mono: 'IBM Plex Mono', monospace;
  --projekt-font-size-hero: 36px;
  --projekt-font-size-h2: 22px;
  --projekt-font-size-body: 15px;
  --projekt-font-size-sm: 13px;
  --projekt-font-size-xs: 12px;
  --projekt-font-size-label: 11px;
  --projekt-font-size-label-sm: 10px;
  --projekt-font-weight-regular: 400;
  --projekt-font-weight-medium: 500;
  --projekt-font-weight-semibold: 600;
  --projekt-letter-spacing-tight: -0.02em;
  --projekt-letter-spacing-label: 0.08em;

  /* Radien */
  --projekt-radius-sm: 4px;
  --projekt-radius-md: 6px;
  --projekt-radius-lg: 8px;
  --projekt-radius-xl: 10px;
  --projekt-radius-full: 50%;

  /* Abstände */
  --projekt-space-1: 4px;
  --projekt-space-2: 6px;
  --projekt-space-3: 8px;
  --projekt-space-4: 12px;
  --projekt-space-5: 16px;
  --projekt-space-6: 20px;
  --projekt-space-7: 24px;
  --projekt-space-8: 32px;

  /* Komponentenmaße */
  --projekt-height-topbar: 60px;
  --projekt-height-control: 36px;
  --projekt-height-input: 40px;
  --projekt-height-row: 44px;
  --projekt-height-row-lg: 52px;
  --projekt-height-icon-btn: 32px;
  --projekt-width-sidebar: 240px;
  --projekt-layout-max-width: 1440px;
}