/* anstrich. — DS component interaction states.
   The Wordmark / Button / Input primitives from the design-system bundle are
   rendered to static HTML with their rest-state inline styles; their hover /
   active / focus states (which the React versions drove from component state)
   are reproduced here as CSS so they work with zero JS. */

/* Clash Grotesk display face — the lowercase display cut used for headlines.
   (Loaded from Fontshare in the document head for anstrich pages.) */
.clash { font-family: 'Clash Grotesk', 'Hanken Grotesk', system-ui, sans-serif; }

/* ---- Button ---- */
.ans-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.ans-btn:active { transform: translateY(1px); }
.ans-btn[disabled] { cursor: not-allowed; opacity: 0.4; }

.ans-btn--primary { background: var(--accent); color: var(--text-on-coral); }
.ans-btn--primary:hover { background: var(--accent-hover); }

.ans-btn--secondary { background: transparent; color: var(--text); border-color: var(--border); }
.ans-btn--secondary:hover { background: var(--surface-raised); border-color: var(--border-strong); }

.ans-btn--ghost { background: transparent; color: var(--text-body); }
.ans-btn--ghost:hover { color: var(--text); }

.ans-btn--light { background: var(--paper); color: var(--ink-900); }
.ans-btn--light:hover { background: #ffffff; }

/* ---- Input ---- */
.ans-input {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  outline: none;
  width: 100%;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ans-input:focus { border-color: var(--border-strong); box-shadow: var(--glow-accent); }