/*
 * Fallwerk – Designtokens ohne Farbwerte (verbindlich nach docs/DESIGN_SYSTEM.md)
 *
 * Enthält ausschließlich Typografie, Abstände, Größen, Rundungen, Schattengeometrie und Bewegung.
 * Farben stehen in theme.css (Hell und Dunkel) und accents.css (Akzentpaletten).
 * Breakpoints (in layout.css als feste Werte, da CSS-Variablen in Media Queries nicht nutzbar sind):
 * 640px, 1024px und 1440px.
 */
:root {
  /* Typografie */
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --font-size-small: 0.875rem;
  --font-size-normal: 1rem;
  --font-size-large: 1.125rem;
  --font-size-h2: 1.375rem;
  --font-size-h1: 1.75rem;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --font-weight-normal: 400;
  --font-weight-strong: 600;

  /* Abstände */
  --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;

  /* Größen */
  --content-max-width: 75rem;
  --reading-max-width: 45rem;

  /* Breitenstufen des Arbeitsbereichs (D1c): jede Ansicht nutzt genau eine; siehe docs/DESIGN_SYSTEM.md, Abschnitt „Breitenstrategie“ */
  --layout-width-narrow: var(--reading-max-width);
  --layout-width-work: 60rem;
  --layout-width-wide: var(--content-max-width);
  --layout-width-dialog: 36rem;
  --layout-width-dialog-key: 40rem;
  --sidebar-width: 15rem;
  --target-min-size: 2.75rem;
  --border-width: 1px;
  --focus-width: 2px;
  --focus-offset: 2px;

  /* Rundungen und Schattengeometrie (die Schattenfarben stehen in theme.css) */
  --radius-control: 4px;
  --radius-surface: 8px;
  --shadow-card: 0 1px 2px var(--shadow-color);
  --shadow-dialog: 0 8px 24px var(--shadow-color-strong);

  /* Bewegung */
  --transition-fast: 120ms ease-out;
}