:root {
  /* --- Geometrie --- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  /* --- Typografie --- */
  --font-family:
    "Inter", -apple-system, BlinkMacSystemFont, Roboto, Ubuntu, sans-serif;

  /* Dunkles Anthrazit für maximalen Kontrast auf weißem Glas */
  --font-color: oklch(25% 0 0);
  --text-muted: oklch(45% 0 0);
  --text-header: oklch(15% 0 0);

  --font-size-bigger: clamp(18px, 1.4vw + 0.8rem, 26px);
  --font-size-root: clamp(16px, 1.2vw + 0.5rem, 22px);
  --font-size-small: clamp(0.8rem, 0.96vw + 0.4rem, 1.1rem);
  --font-size-smaller: clamp(0.7rem, 0.84vw + 0.35rem, 0.96rem);

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;

  --section-background-color: oklch(98% 0 0 / 60%); /* oklch(99% 0 0 / 72%); */
  --article-background-color: oklch(98% 0 0 / 60%);
  /* Borders: Ein kühles Hellgrau, passend zum Beton/Metall */
  --article-border-color: oklch(85% 0 0);
  --border: oklch(88% 0 0); /* Sehr helles Grau für subtile Ränder */
  --border-radius: 8px;
  --border-width: 1px;

  /* --- Farben (Library Theme) --- */

  /* Primary: Das Blau der Sitzmöbel */
  --color-primary: oklch(60% 0.16 250);
  --color-primary-dark: oklch(50% 0.16 250);
  --color-primary-soft: oklch(
    60% 0.16 250 / 0.15
  ); /* Für Hintergründe/Badges */

  /* Hintergründe: Glassmorphismus Basis */
  /* Wir nutzen fast reines Weiß mit hoher Deckkraft, da der Hintergrund sehr unruhig ist */
  --bg: transparent; /* Body ist transparent, damit Bild durchscheint */

  /* Standard Hintergrund für Header/Sidebar (Milchglas) */
  --bg-alt: oklch(98% 0 0 / 60%);

  /* Karten/Elevated Elements (etwas deckender) */
  --bg-elevated: oklch(100% 0 0 / 92%);

  --border: oklch(88% 0 0); /* Sehr helles Grau für subtile Ränder */

  /* Text Farben Mapping */
  --text: var(--font-color);
  --text-muted: oklch(30% 0 0);
  --text-header: var(--color-primary);

  /* Schatten: Weich, um Elemente vom Hintergrund abzuheben */
  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.08);

  /* Motion */
  --transition-fast: 0.18s ease-out;
  --transition-normal: 0.25s ease;

  /* Default Transition for Theme Switching */
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}