/* ==========================================================================
   tp-tokens — Design-Tokens der Komponenten-Library
   --------------------------------------------------------------------------
   Alle Werte leiten sich aus den Theme-Variablen in base.css ab (--accent,
   --surface, --border, ...). Dadurch folgen die Komponenten automatisch dem
   Light-/Dark-Theme, ohne dass hier pro Theme ein eigener Block nötig ist.

   Konvention: Klassen der Library tragen den Präfix `tp-` und folgen BEM
   (`tp-block__element--modifier`). Zustände werden als Modifier gesetzt,
   nicht über Utility-Klassen.
   ========================================================================== */

:root {
    /* ── Fokus-Ring ──────────────────────────────────────────────────────
       Ein einziger Ring für alle interaktiven Komponenten. */
    --tp-focus-ring:   0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
    --tp-focus-border: color-mix(in srgb, var(--accent) 60%, var(--border-strong));

    --tp-danger-ring:   0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
    --tp-danger-border: color-mix(in srgb, var(--danger) 55%, var(--border-strong));

    /* ── Kontrollhöhen ──────────────────────────────────────────────────
       Eine gemeinsame Höhe hält Inputs, Selects und Segmented-Controls in
       einer Zeile exakt bündig. */
    --tp-control-h:    38px;
    --tp-control-h-sm: 32px;

    /* ── Dialog-Geometrie ───────────────────────────────────────────────── */
    --tp-dialog-pad-x:   26px;
    --tp-dialog-pad-y:   20px;
    --tp-dialog-radius:  var(--r-lg);
    --tp-dialog-max-h:   min(92dvh, 900px);
    --tp-dialog-side-w:  clamp(240px, 30%, 320px);

    /* Abstand zwischen Feldern innerhalb einer Spalte. */
    --tp-field-gap:    15px;
    --tp-fieldset-gap: 20px;
}