/* ============================================================
   Balsa — Raum, Form, Elevation, Bewegung, Layout
   Spacing 4px-Basis. Schatten tiefbraun-getönt (nie reines Schwarz).
   Bewegung ruhig & funktional — nie Deko, nie Bounce.
   ============================================================ */

:root {
  /* --- Raum (4px-Basis) --- */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px;  --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px;

  /* --- Form (Radius) --- */
  --radius-xs: 4px;    /* Chips, Code */
  --radius-sm: 8px;    /* Inputs, Buttons */
  --radius-md: 16px;   /* Karten, Modals */
  --radius-lg: 24px;   /* Chat-Input, Hero-Flächen */
  --radius-pill: 999px;

  /* --- Elevation — weiche warme Schatten, tiefbraun-getönt --- */
  --shadow-sm: 0 1px 2px rgba(30, 15, 6, .06);
  --shadow-md: 0 2px 8px rgba(30, 15, 6, .08);
  --shadow-lg: 0 4px 16px rgba(30, 15, 6, .10);
  --shadow-xl: 0 12px 32px rgba(30, 15, 6, .14);
  --shadow-accent: 0 2px 6px rgba(184, 92, 58, .20);

  /* --- Bewegung (ruhig, funktional — reduced-motion ist Pflicht) --- */
  --transition-fast: 150ms ease;   /* @kind other */
  --transition-normal: 250ms ease; /* @kind other */
  --transition-slow: 400ms ease;   /* @kind other */

  /* --- Layout --- */
  --max-width-chat: 900px;
  --max-width-prose: 720px;
  --sidebar-width: 320px;
  --bp-sm: 640px; /* @kind other */
  --bp-md: 960px; /* @kind other */
  --bp-lg: 1280px; /* @kind other */  /* mobile-first */
}