/* Design-Tokens: einzige Quelle für Farben, Abstände, Typografie. */

:root {
  /* Farben */
  --color-bg: #f6f7f9;
  --color-surface: #ffffff;
  --color-surface-alt: #eef1f5;
  --color-surface-sunken: #e3e8ef;
  --color-border: #d3dae3;
  --color-border-strong: #b3bdcb;

  --color-text: #16202e;
  --color-text-muted: #55637a;
  --color-text-inverse: #ffffff;

  --color-primary: #1f5fbf;
  --color-primary-strong: #164a99;
  --color-primary-soft: #e4edfb;

  --color-accent: #7a3fb5;
  --color-accent-soft: #f0e7fa;

  --color-success: #16704a;
  --color-success-soft: #e0f2e9;
  --color-warning: #8a5a00;
  --color-warning-soft: #fdf0d8;
  --color-error: #b3261e;
  --color-error-soft: #fbe6e4;

  /* Bit-Zustände */
  --color-bit-on: #1f5fbf;
  --color-bit-on-text: #ffffff;
  --color-bit-off: #ffffff;
  --color-bit-off-text: #55637a;

  /* Abstände (4px-Raster) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Typografie */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "JetBrains Mono", Consolas, "Liberation Mono", monospace;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.0625rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 1.875rem;
  --font-size-3xl: 2.375rem;

  --line-height-tight: 1.25;
  --line-height-normal: 1.65;

  /* Radien und Schatten */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(16, 32, 56, 0.06), 0 1px 3px rgba(16, 32, 56, 0.05);
  --shadow-md: 0 4px 12px rgba(16, 32, 56, 0.08);

  /* Layout */
  --sidebar-width: 17rem;
  --content-max: 54rem;
  --header-height: 4.25rem;

  --z-header: 50;
  --z-sidebar: 40;

  /* Bewegung – bewusst sparsam */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
}

/* Breakpoints (können in Media Queries nicht als Variablen genutzt werden,
   daher hier nur dokumentiert): 640px (klein), 900px (Tablet/Sidebar), 1280px (Laptop). */

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