/* ============================================================================
   KoWork - Design-System, Ebene 3 (Komponenten-Token), Etappe 1 (FE-KW-21)
   ----------------------------------------------------------------------------
   Dreistufig, siehe KoUniverse-Login/Konzepte/2026-11-Design-System/SPEZIFIKATION.md:
     Ebene 1  Marke        --kf-*       koschmieder-tokens.css (Master, wörtlich kopiert)
     Ebene 2  Semantik     --color-*    styles.css, hell in :root, dunkel in [data-theme="dark"]
     Ebene 3  Komponente   --ds-*       DIESE Datei: Knopf, Eingabefeld, Fokus-Ring

   Etappe 1 verändert KEIN Aussehen. Jeder Wert hier ist der bisher in styles.css
   fest geschriebene Wert, nur unter einem Namen. Wo ein Wert aus Ebene 2 kommt,
   steht ein var(--color-...). So lässt sich später ein Knopf oder der Fokus-Ring
   an EINER Stelle ändern, und die Schwester-Apps können dieselben Namen tragen.

   Regeln:
   - Nur Eigenschaften mit Präfix --ds-, nur in :root (und [data-theme="dark"],
     falls ein Wert dort wirklich anders sein muss).
   - Keine Selektoren für Bauteile in dieser Datei. Die Bauteilregeln bleiben in
     styles.css und lesen nur var(--ds-...).
   - Neue Farben nie hier erfinden: erst Ebene 2 (--color-*), dann hier verweisen.
   ============================================================================ */
:root {
  /* Fokus-Ring (WCAG 2.4.7 / 1.4.11): durchgehend, Farbe aus Ebene 2 (hell und dunkel) */
  --ds-focus-ring-color: var(--color-focus-ring);
  --ds-focus-ring-width: 2px;
  --ds-focus-ring-width-strong: 3px;
  --ds-focus-ring-offset: 2px;

  /* Eingabefelder, Auswahllisten */
  --ds-control-border: var(--color-border-control);
  --ds-control-border-hover: var(--color-border-control-hover);

  /* Knopf, Hauptaktion */
  --ds-button-primary-bg: var(--primary-gradient);
  --ds-button-primary-shadow: 0 2px 8px rgba(41, 123, 150, 0.25);
  --ds-button-primary-shadow-hover: 0 4px 18px rgba(41, 123, 150, 0.38);
  --ds-button-primary-shadow-active: 0 1px 4px rgba(41, 123, 150, 0.2);

  /* Knopf, leise (ghost) */
  --ds-button-ghost-fg: var(--dark-blue);
  --ds-button-ghost-bg: var(--color-primary-soft);
  --ds-button-ghost-bg-hover: rgba(41, 123, 150, 0.22);

  /* Knopf, Gefahr */
  --ds-button-danger-fg: #c0392b;
  --ds-button-danger-bg-hover: rgba(192, 57, 43, 0.08);

  /* Knopf, deaktiviert */
  --ds-button-disabled-fg: #6a7f8b;
  --ds-button-disabled-bg: #dbe6ec;
}