/* ============================================================
 * Boardly Controls — Button-Utilities (.td-btn*)
 *
 * UI-Restyle: aus theme-demo.css herausgeloest, als die Theme-Demo-Seite entfernt wurde.
 * Diese Klassen sind app-weite Button-Utilities (~40 Nutzungen quer durch Listen-/Board-/
 * Modal-/Invitation-Seiten), KEIN Demo-Code. Der `td-`-Praefix ist historisch (frueher
 * "theme-demo"); ein Rename auf `.btn*` ist ein separater, groesserer Refactor und bewusst
 * aufgeschoben — Funktion + Aussehen bleiben hier unveraendert.
 *
 * Reihenfolge im HTML (App.razor): … -> pages.css -> controls.css.
 * ============================================================ */

.td-btn {
    padding: 0.5rem 1rem;
    border-radius: var(--r-2);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform 150ms var(--ease), background 150ms var(--ease);
}

.td-btn:hover {
    transform: translateY(-1px);
}

.td-btn-primary {
    background: var(--accent);
    color: var(--accent-ink);
    border: 1px solid var(--accent);
}

.td-btn-secondary {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line-strong);
}

.td-btn-danger {
    background: var(--danger);
    color: var(--accent-ink);
    border: 1px solid var(--danger);
}

.td-btn-ghost {
    background: transparent;
    color: var(--ink-2);
    border: 1px solid transparent;
}

.td-btn-ghost:hover {
    background: var(--surface-2);
    color: var(--ink);
}