/*
  Design-Tokens Lebensfreunde-Prototyp "Gesprächsstarter".
  Farbwerte 1:1 aus den CSS-Variablen von lebensfreunde.de übernommen (gemessen am
  19.09.2026, eingeloggter Bereich, :root). Abgeleitete Tokens (Radius, Schatten,
  Schrift, Abstände, Fokus) ergänzen, was für den Prototyp zusätzlich gebraucht wird.
  Quelle der Originalwerte: docs/research.md, Abschnitt "Design-System".
*/

:root {
  /* Farben, unverändert von lebensfreunde.de übernommen */
  --neutral1: #bfbdb8;
  --neutral2: #ffffff;
  --neutral3: #d9d6d0;
  --neutral3-1: #f2efe9;
  --neutral3-3: #faf7f2;
  --neutral3-4: #807e7a;
  --neutral3-5: #4d4b49;
  --neutral3-6: #000000;

  --primary1: #94268f;
  --primary1-l1: #af5cab;
  --primary1-l2: #ca93c7;
  --primary1-l3: #e4c9e3;
  --primary1-l4: #f4e9f4;
  --primary1-d1: #591756;

  --primary2: #6ebc85;
  --primary2-l1: #92cda4;
  --primary2-l2: #b7dec2;
  --primary2-l3: #dbeee1;
  --primary2-l4: #f1f8f3;
  --primary2-d1: #208320;

  --secondary1: #e2113f;
  --secondary1-l1: #e94d6f;
  --secondary1-l2: #f1889f;
  --secondary1-l3: #f8c4cf;
  --secondary1-l4: #fce7ec;
  --secondary1-d1: #880a26;

  --secondary2: #efb309;
  --secondary2-l1: #f3c647;
  --secondary2-l2: #f7d984;
  --secondary2-l3: #fbecc2;
  --secondary2-l4: #fdf7e6;
  --secondary2-d1: #d27a00;

  --secondary3: #6ebc85;
  --secondary3-l1: #92cda4;
  --secondary3-l2: #b7dec2;
  --secondary3-l3: #dbeee1;
  --secondary3-l4: #f1f8f3;
  --secondary3-d1: #208320;

  /* Semantische Zuordnung für den Prototyp */
  --lf-color-bg: var(--neutral3-3);
  --lf-color-surface: var(--neutral2);
  --lf-color-text: var(--neutral3-6);
  --lf-color-text-muted: var(--neutral3-5);
  --lf-color-text-subtle: var(--neutral3-4);
  --lf-color-border: var(--neutral3);
  --lf-color-accent: var(--primary1);
  --lf-color-accent-hover: var(--primary1-d1);
  --lf-color-accent-soft: var(--primary1-l4);
  --lf-color-success: var(--primary2);
  --lf-color-success-strong: var(--primary2-d1);
  --lf-color-warning-bg: var(--secondary2-l4);
  --lf-color-warning-icon: var(--secondary2);
  --lf-color-disabled-bg: var(--neutral3);
  --lf-color-disabled-text: var(--neutral3-4);
  --lf-color-premium: var(--secondary2);

  /* Typografie */
  --lf-font: "Open Sans", Arial, sans-serif;
  --lf-font-weight-regular: 400;
  --lf-font-weight-semibold: 600;
  --lf-font-weight-bold: 700;
  --lf-font-size-base: 18px; /* im Original 16px; im Prototyp 17-18px für Ü50-Lesbarkeit angehoben */
  --lf-font-size-small: 14px;
  --lf-font-size-h1: 32px;
  --lf-font-size-h2: 28px;
  --lf-font-size-h3: 24px;
  --lf-font-size-h4: 18px;
  --lf-line-height: 1.5;

  /* Radien und Schatten */
  --lf-radius-pill: 999px;
  --lf-radius-card: 8px;
  --lf-radius-chip: 6px;
  --lf-shadow-card: 0 0 3px rgba(0, 0, 0, 0.25);

  /* Abstände (8px-Raster) */
  --lf-space-1: 4px;
  --lf-space-2: 8px;
  --lf-space-3: 16px;
  --lf-space-4: 24px;
  --lf-space-5: 32px;
  --lf-space-6: 48px;

  /* Bedienung: Mindestgröße für Klickflächen, Fokusring */
  --lf-touch-target-min: 44px;
  --lf-focus-ring-width: 3px;
  --lf-focus-ring-color: var(--primary1);
  --lf-focus-ring-offset: 2px;

  /* Layout */
  --lf-header-height: 48px;
  --lf-max-content-width: 960px;
}

/*
  Fokusring als wiederverwendbare Klasse: sichtbar bei Tastaturbedienung,
  Kontrast AA gegen --lf-color-bg und --lf-color-surface geprüft.
*/
.lf-focus-visible:focus-visible {
  outline: var(--lf-focus-ring-width) solid var(--lf-focus-ring-color);
  outline-offset: var(--lf-focus-ring-offset);
}