/* =====================================================================
   zegit-zoo — Component layer
   Reusable cosmetic components built on colors_and_type.css tokens.
   Works on both light ("paper") and dark (".term") surfaces — every
   value resolves through the semantic aliases. Import after the tokens.
   ===================================================================== */

/* ---- Buttons -------------------------------------------------------- */
.zz-btn {
  font: 500 0.875rem/1 var(--font-sans);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 14px; height: 36px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background .14s ease, border-color .14s ease, color .14s ease, transform .06s ease;
}
.zz-btn:active { transform: translateY(1px); }
.zz-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
.zz-btn svg, .zz-btn i { width: 16px; height: 16px; }

.zz-btn--primary { background: var(--primary); color: var(--primary-fg); }
.zz-btn--primary:hover { background: var(--primary-hover); }
.zz-btn--secondary { background: var(--bg-raised); color: var(--fg); border-color: var(--border-strong); }
.zz-btn--secondary:hover { background: var(--bg-hover); }
.zz-btn--ghost { background: transparent; color: var(--fg-secondary); }
.zz-btn--ghost:hover { background: var(--bg-hover); color: var(--fg); }
.zz-btn--danger { background: var(--red-500); color: #fff; }
.zz-btn--danger:hover { filter: brightness(1.06); }
.zz-btn--sm { height: 28px; padding: 0 10px; font-size: 0.8125rem; }
.zz-btn--lg { height: 44px; padding: 0 20px; font-size: 0.9375rem; }
/* passkey emphasis */
.zz-btn--passkey { background: var(--primary); color: var(--primary-fg); }
.zz-btn--passkey:hover { background: var(--primary-hover); box-shadow: 0 0 0 4px var(--focus-ring); }

/* ---- Chips / badges (decision + envelope + generic) ----------------- */
.zz-chip {
  font: 600 0.6875rem/1 var(--font-mono);
  letter-spacing: 0.04em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: var(--r-sm);
  border: 1px solid transparent;
}
.zz-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.zz-chip--ok     { color: var(--ok-fg);     background: var(--ok-bg); }
.zz-chip--warn   { color: var(--warn-fg);   background: var(--warn-bg); }
.zz-chip--danger { color: var(--danger-fg); background: var(--danger-bg); }
.zz-chip--info   { color: var(--info-fg);   background: var(--info-bg); }
.zz-chip--neutral{ color: var(--fg-muted);  background: var(--bg-hover); }

/* ---- Inputs --------------------------------------------------------- */
.zz-field { display: flex; flex-direction: column; gap: 6px; }
.zz-label { font: 500 0.8125rem/1 var(--font-sans); color: var(--fg-secondary); }
.zz-input {
  font: 0.875rem/1.4 var(--font-sans);
  background: var(--bg-raised); color: var(--fg);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  padding: 9px 12px; transition: border-color .14s ease, box-shadow .14s ease;
}
.zz-input::placeholder { color: var(--fg-faint); }
.zz-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.zz-input--mono { font-family: var(--font-mono); }

/* ---- Card ----------------------------------------------------------- */
.zz-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-6);
}
.term .zz-card { box-shadow: none; }

/* ---- Table ---------------------------------------------------------- */
.zz-table { width: 100%; border-collapse: collapse; font: 0.875rem/1.4 var(--font-sans); }
.zz-table th {
  font: var(--text-eyebrow); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-muted); text-align: left; padding: 10px 14px;
  border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-raised);
}
.zz-table td { padding: 12px 14px; border-bottom: 1px solid var(--hairline); color: var(--fg-secondary); }
.zz-table td .mono, .zz-table td.mono { font-family: var(--font-mono); color: var(--fg); }
.zz-table tr:hover td { background: var(--bg-hover); }

/* ---- Logo (Direction D — "the prompt") ----------------------------- */
/* Markup: <span class="zz-logo"><span class="zz-caret">{caret svg}</span>
            <span class="zz-word">zegit</span><span class="zz-cur"></span></span>
   Size with font-size on .zz-logo; children scale in em. Lowercase wordmark. */
.zz-logo { display: inline-flex; align-items: center; font-family: var(--font-mono); font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.zz-logo .zz-caret { width: 0.66em; height: 0.92em; margin-right: 0.34em; color: var(--brand-500); display: inline-flex; }
.zz-logo .zz-caret svg { width: 100%; height: 100%; }
.zz-logo .zz-word { color: var(--fg); }
.zz-logo .zz-suffix { color: var(--fg-muted); font-weight: 500; }
.zz-logo .zz-cur { width: 0.5em; height: 1em; margin-left: 0.16em; border-radius: 1.5px; background: var(--brand-500); display: inline-block; }
.zz-logo--blink .zz-cur { animation: zz-blink 1.1s step-end infinite; }
@keyframes zz-blink { 50% { opacity: 0; } }
.term .zz-logo .zz-caret, [data-theme="dark"] .zz-logo .zz-caret { color: var(--brand-400); }
.term .zz-logo .zz-cur, [data-theme="dark"] .zz-logo .zz-cur { background: var(--brand-400); }