/* Erzeugt aus tokens.json / tokens.dark.json. Werte nur dort aendern. */
:root {
  --color-bg: #ffffff;
  --color-surface: #f6f7f9;
  --color-surface-raised: #ffffff;
  --color-border: #e3e6ea;
  --color-border-input: #868e98;
  --color-text: #14171c;
  --color-text-muted: #5b6470;
  --color-accent: #0b6b6f;
  --color-accent-hover: #08565a;
  --color-on-accent: #ffffff;
  --color-danger: #c62f2f;
  --color-success: #1f7a4d;
  --color-warning: #8a5a00;
  --color-overlay: #14171c;

  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs: 12px;   --leading-xs: 16px;
  --text-sm: 14px;   --leading-sm: 20px;
  --text-base: 16px; --leading-base: 24px;
  --text-lg: 20px;   --leading-lg: 28px;
  --text-xl: 28px;   --leading-xl: 34px;

  --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --shadow-pop: 0 12px 32px rgba(16,24,40,.16);

  --motion-fast: 120ms; --motion-base: 200ms; --motion-ease: cubic-bezier(.2,.8,.2,1);

  --sidebar-w: 64px; --header-h: 56px; --list-w: 320px; --panel-w: 360px; --dialog-w: 560px;

  --project-1: #7cb342; --project-2: #e53935; --project-3: #fb8c00; --project-4: #fdd835; --project-5: #ab47bc;
  --project-6: #1e88e5; --project-7: #26a69a; --project-8: #ec407a; --project-9: #9ccc65; --project-10: #1a3fd0;
}

:root[data-theme="dark"] {
  --color-bg: #0f1217;
  --color-surface: #181c23;
  --color-surface-raised: #1f242d;
  --color-border: #2a303a;
  --color-border-input: #7b8494;
  --color-text: #e8eaee;
  --color-text-muted: #9aa3b0;
  --color-accent: #5fd0d0;
  --color-accent-hover: #86e0e0;
  --color-on-accent: #06201f;
  --color-danger: #ff8a8a;
  --color-success: #4cc38a;
  --color-warning: #e0b04a;
  --color-overlay: #000000;
  --shadow-card: 0 1px 2px rgba(0,0,0,.4);
  --shadow-pop: 0 12px 32px rgba(0,0,0,.5);
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-base: 0ms; }
}