/*
 * utilities.css — small helpers + backwards-compat shims.
 *
 * Shims here exist for legacy class names that older code paths
 * still reference. Safe to delete a shim when no template uses it.
 */
/* ─── Misc ────────────────────────────────────────────────────────────── */
.st-divider { height: 1px; background: var(--st-border); margin: 1.5rem 0; }
.st-link { color: var(--st-primary); text-decoration: underline; }
.st-link:hover { color: var(--st-primary-hover); }
.st-muted { color: var(--st-text-muted); }
.st-soft  { color: var(--st-text-soft); }

/* ─── Backwards-compat shims ─────────────────────────────────────────────
   The pre-revamp code used .btn / .btn-primary / .btn-secondary / .btn-danger
   / .input / .label / .card. We map them to the new tokens so existing
   pages that haven't been migrated keep rendering. New pages should prefer
   the .st- classes. */
.btn { display: inline-flex; align-items: center; justify-content: center;
       gap: 0.5rem; padding: 0.625rem 1.25rem; border-radius: var(--st-radius-pill);
       font-weight: 500; font-size: 0.875rem; border: 1px solid transparent;
       cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease;
       white-space: nowrap; text-decoration: none; }
.btn-primary   { background: var(--st-primary); color: #fff; }
.btn-primary:hover { background: var(--st-primary-hover); }
.btn-secondary { background: var(--st-bg); color: var(--st-text);
                 border-color: var(--st-border-strong); }
.btn-secondary:hover { background: var(--st-bg-soft); }
.btn-danger    { background: var(--st-bg); color: var(--st-danger);
                 border-color: var(--st-border-strong); }
.btn-danger:hover { background: var(--st-danger-soft); border-color: var(--st-danger); }
.input  { display: block; width: 100%; padding: 0.625rem 0.875rem;
          border-radius: var(--st-radius-sm); border: 1px solid var(--st-border-strong);
          background: var(--st-bg); color: var(--st-text); font-size: 0.9375rem;
          font-family: inherit; transition: border-color 120ms ease, box-shadow 120ms ease; }
.input:focus { outline: none; border-color: var(--st-primary);
               box-shadow: 0 0 0 3px var(--st-primary-soft); }
select.input, textarea.input { font-family: inherit; }
.label  { display: block; font-size: 0.8125rem; font-weight: 500;
          color: var(--st-text); margin-bottom: 0.375rem; }
.card   { background: var(--st-bg-card); border: 1px solid var(--st-border);
          border-radius: var(--st-radius); padding: 1.25rem 1.5rem; }