/* =========================================================================
   Sprachclub Design-System · Tokens (AP-30)
   Framework-unabhaengig: reine CSS-Variablen, Praefix --ds-, damit nichts mit
   den bestehenden Variablen in style.css kollidiert. Angular (Phase 5) bindet
   genau diese Datei ein. Werte stammen aus der bestehenden Marke (style.css).
   Kontraste nach WCAG AA prueft DesignKontrastTest (Testsuite).
   ========================================================================= */
:root {
  /* ---- Farben: Marke ---- */
  --ds-gelb: #ffcf2c;            /* Markengelb: Flaechen, Akzente - nie als Schriftfarbe auf Weiss */
  --ds-gelb-stark: #f8d254;
  --ds-gelb-hell: #fff6d4;
  --ds-gelb-hauch: #fff9e8;      /* Seitenhintergrund */
  --ds-navy: #132a37;            /* Haupttext, Primaerknopf */
  --ds-navy-weich: #264554;

  /* ---- Farben: Rollen ---- */
  --ds-text: var(--ds-navy);
  --ds-text-leise: #5a6670;      /* Nebentext: 5,6:1 auf --ds-hintergrund */
  --ds-hintergrund: var(--ds-gelb-hauch);
  --ds-flaeche: #ffffff;
  --ds-flaeche-weich: #fffef8;
  --ds-linie: rgba(19, 42, 55, 0.14);
  --ds-linie-stark: rgba(19, 42, 55, 0.24);
  --ds-link: #1d4f91;            /* 8,1:1 auf Weiss */

  --ds-primaer: var(--ds-navy);
  --ds-primaer-text: #ffffff;
  --ds-akzent: var(--ds-gelb);
  --ds-akzent-text: var(--ds-navy);

  --ds-erfolg: #166534;          /* dunkler als style.css (#16a34a waere als Schrift nur 3,3:1) */
  --ds-erfolg-flaeche: #e8f5e9;
  --ds-warnung: #b45309;
  --ds-warnung-flaeche: #fff3e0;
  --ds-fehler: #b91c1c;
  --ds-fehler-flaeche: #fdecea;
  --ds-info: #1d4f91;
  --ds-info-flaeche: #e3f2fd;

  --ds-fokus: 0 0 0 3px rgba(29, 79, 145, 0.45);   /* sichtbar auf Weiss und Gelb */

  /* ---- Schrift ---- */
  --ds-schrift: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ds-schrift-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ds-fs-klein: 0.8125rem;      /* 13px */
  --ds-fs-text: 1rem;            /* 16px - nie kleiner fuer Fliesstext (mobil) */
  --ds-fs-gross: 1.125rem;
  --ds-fs-h3: 1.25rem;
  --ds-fs-h2: clamp(1.375rem, 2.5vw, 1.75rem);
  --ds-fs-h1: clamp(1.75rem, 4vw, 2.25rem);
  --ds-zeilenhoehe: 1.5;
  --ds-gewicht-normal: 400;
  --ds-gewicht-halbfett: 600;
  --ds-gewicht-fett: 800;

  /* ---- Abstaende (4er-Raster) ---- */
  --ds-abstand-1: 4px;
  --ds-abstand-2: 8px;
  --ds-abstand-3: 12px;
  --ds-abstand-4: 16px;
  --ds-abstand-5: 24px;
  --ds-abstand-6: 32px;
  --ds-abstand-7: 48px;

  /* ---- Rundungen ---- */
  --ds-rund-klein: 8px;
  --ds-rund: 12px;
  --ds-rund-gross: 18px;
  --ds-rund-pille: 999px;

  /* ---- Schatten ---- */
  --ds-schatten-1: 0 2px 10px rgba(19, 42, 55, 0.06);
  --ds-schatten-2: 0 8px 24px rgba(19, 42, 55, 0.08);
  --ds-schatten-3: 0 24px 64px rgba(19, 42, 55, 0.14);

  /* ---- Layout ---- */
  --ds-breite: 1040px;
  --ds-ziel-groesse: 44px;       /* Mindest-Tippflaeche (WCAG 2.5.5) */
}