/* 
  tokens.css
  Farbmodell, Typografie & Layout (Elfenbein/Stein/Papier Konzept)

  Die Regel für diese Farben lautet:
  Ruhig, präzise, diskret, erwachsen. Der Akzent darf führen, aber nie schreien.
*/

:root {
  /* HINTERGRUND & FLÄCHEN */
  --color-bg-base: #F7F5F0;
  --color-bg-surface: #EBE7DF;

  /* TEXTFARBEN */
  --color-text-base: #3B3836;
  --color-text-muted: #615C59;
  /* Signifikant mehr Kontrast für kleine Hilfetexte, vorher #7E7974 */

  /* LINIEN & AKZENTE */
  --color-border-subtle: #CFC9C0; /* Minimal klarer für Formen (vorher #D8D3CC) */
  --color-accent: #526A7A;
  --color-accent-hover: #455A68;

  /* ------------------- TYPOGRAFIE ------------------- */

  /* Hauptschrift: Nüchtern, ablenkungsfrei, extrem gut lesbar (System-Fonts) */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

  /* Schriftgrößen (Hierarchie) */
  --text-2xl: 2.5rem;
  --text-xl: 1.75rem;
  --text-base: 1.125rem;
  --text-sm: 0.95rem;
  --text-xs: 0.85rem;

  /* Schriftgewichte (niemals plakat-fett) */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Zeilenhöhen (viel Luft) */
  --line-height-tight: 1.25;
  --line-height-base: 1.65;

  /* ------------------- LAYOUT & RAUM ------------------- */

  /* Container-Breite: Absolute Breitwand-Souveränität auf großen Screens */
  --layout-max-width: 1120px;

  /* Abstände (Spacing): Atmen, nicht klatschen */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  /* Normaler Elementabstand */
  --space-lg: 2.5rem;
  /* Sektionsabstand weich */
  --space-xl: 4rem;
  /* Großer Sektionsabstand */
  --space-2xl: 6rem;

  /* Innenabstände für Boxen & Karten */
  --pad-box: 2rem;

  /* Formgebung (keine harten Ecken, weich angesetzt) */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
}

/* Responsive Verfeinerung für kleine Geräte, damit der "Air"-Effekt erhalten bleibt, aber den Screen nicht sprengt */
@media (max-width: 600px) {
  :root {
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4.5rem;
    --pad-box: 1.25rem;
    --text-2xl: 2.1rem;
    --text-xl: 1.5rem;
  }
}