/* ============================================================
   bacap – Design Tokens
   ------------------------------------------------------------
   Zentrale Quelle für Farben, Abstände, Größen, Radien, Schatten.
   Wird von allen Rechnern und globalen Stylesheets konsumiert.
   ============================================================ */

:root{
  /* Farben (bestehende Variablen aus styles.css als Default beibehalten) */
  --bg:#eef2f7;
  --card:#fff;
  --txt:#0f172a;
  --muted:#6b7280;
  --br:#e5e7eb;

  --pri:#ff6b00;
  --pri-600:#1d4ed8;
  --accent:#ff6b00;
  --ring:rgba(37,99,235,.25);

  --bar-paid:#3b82f6;
  --bar-int:#f59e0b;

  --info-bg:#eef2ff;
  --info-fg:#3b82f6;

  /* Eingabefelder: deutlicher Kontrast zur Card (Light + Dark) */
  --w-field-bg:#e2e8f0;
  --w-field-br:#64748b;
  --w-field-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 0 rgba(15,23,42,.06);

  /* Info-Icon "i" – Größe identisch in allen Rechnern (Entnahmeplan-Wert) */
  --i-icon-size:32px;
  --i-icon-font:11px;

  /* Action-Buttons (Neu berechnen, Zurücksetzen, ...) */
  --btn-h:34px;
  --btn-pad-x:14px;
  --actions-pad:10px 14px;
  --actions-gap:8px;

  /* Schatten */
  --shadow-sm:0 6px 18px rgba(0,0,0,.06);
  --shadow-md:0 12px 30px rgba(0,0,0,.08);
  --shadow-tooltip:0 12px 40px rgba(0,0,0,.25);

  /* Radien */
  --radius-sm:8px;
  --radius-md:10px;
  --radius-lg:12px;
  --radius-xl:14px;
  --radius-2xl:18px;
  --radius-pill:999px;

  /* Formular-Feldgrößen (kompakte Variante: Default für alle Rechner) */
  --field-h:32px;
  --field-pad-y:2px;
  --field-pad-x:8px;
  --field-font:15px;
  --field-radius:var(--radius-md);

  /* Steuerfeld-Variante (kompakt: gleiche Höhe wie normale Inputs,
     damit die Tax-Row sich beim Öffnen so wenig wie möglich vergrößert) */
  --tax-field-h:30px;
  --tax-field-pad-y:3px;
  --tax-field-pad-x:9px;

  /* Standardbreiten – jeder Rechner kann lokal überschreiben */
  --field-w:180px;
  --field-w-compact:110px;
  --compact-select-w:110px;
  --tax-field-w:110px;

  /* Form-Tabelle (möglichst kompakt) */
  --w-row-pad-y:3px;
  --w-row-pad-x:4px;
  --w-cell-gap:12px;
  --w-inputs-max:560px;
  /* Feste Breite der Label-Spalte, damit alle Rechner dieselbe Eingabe-
     Position haben (sonst variiert die Spalte mit dem längsten Label
     pro Rechner – z.B. "Ertragsverwendung" beim Fondssparrechner).
     Wert so gewählt, dass auch das längste Label ("Ertragsverwendung",
     ~165px) inklusive Gap und Info-Icon mit Reserve hineinpasst. */
  --w-col-label:210px;

  /* Tooltip */
  --tt-bg:var(--card);
  --tt-border:var(--br);
  --tt-min-w:240px;
  --tt-max-w:min(420px, 85vw);

  /* Breakpoints (Information für Entwickler – CSS @media nutzt die festen Werte) */
  --bp-mobile:520px;
  --bp-stack:760px;
  --bp-tablet:900px;
  --bp-desktop:1100px;
}

/* Dark-Mode-Overrides der Feldfarben */
:root[data-theme="dark"]{
  --w-field-bg:#0f172a;
  --w-field-br:#475569;
  --w-field-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 1px rgba(0,0,0,.35);
}