/* Webvorsprung — Design-Tokens. Einzige Quelle für Farben, Schrift, Abstände (docs/03_DESIGN.md).
   Website und Platzhalter kopieren diese Datei beim Build/Deploy. */
:root {
  /* Farben */
  --ink: #0C0F14;
  --txt: #2B313B;
  --muted: #5E6672;
  --faint: #8C939E;
  --paper: #F5F4EF;
  --bg: #FAFAF8;
  --surface: #FFFFFF;
  --line: rgba(12, 15, 20, .08);
  --line-2: rgba(12, 15, 20, .14);
  --brand: #0F7B5F;
  --brand-ink: #0B5E49;
  --brand-soft: #E7F3EE;
  --signal: #C8F169; /* nur auf dunklen Flächen */
  --up: #0F7B5F;
  --down: #C4321C;
  --warn: #A86A12;
  --info: #3157C8;

  /* Diagramm-Reihen (Konkurrenz); „Du“ ist immer --brand */
  --series-1: #5B6577;
  --series-2: #3157C8;
  --series-3: #C98A1B;
  --series-4: #8E4FA8;
  --series-5: #2A8C8C;

  /* Schrift */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-ui: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Abstände (4-px-Basis) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* Radien */
  --r-input: 6px;
  --r-card: 10px;
  --r-dialog: 14px;

  /* Schatten nur für schwebende Ebenen */
  --shadow-float: 0 1px 2px rgba(12, 15, 20, .06), 0 4px 12px rgba(12, 15, 20, .08), 0 16px 32px rgba(12, 15, 20, .06);

  /* Bewegung */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-hover: 150ms;
  --t-panel: 220ms;
  --t-dialog: 300ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-hover: 0ms; --t-panel: 0ms; --t-dialog: 0ms; }
}