/* ============================================================
   Axorum core components — extracted from the design system's
   style injector (components/core/styleInject.js). Supplies the
   button, badge, ledger, verdict, and field CSS the marketing
   site reuses. Tokens come from colors/typography/spacing.
   ============================================================ */

.ax-ui { font-family: var(--font-sans); box-sizing: border-box; }
.ax-ui *, .ax-ui *::before, .ax-ui *::after { box-sizing: border-box; }

/* ---------------- Button ---------------- */
.ax-btn {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  border: var(--border-hair) solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
  text-decoration: none;
}
.ax-btn:focus-visible { outline: var(--border-med) solid var(--focus-ring); outline-offset: 2px; }
.ax-btn--sm { font-size: var(--text-sm); padding: 6px 12px; height: 32px; }
.ax-btn--md { font-size: var(--text-sm); padding: 9px 16px; height: 40px; }
.ax-btn--lg { font-size: var(--text-base); padding: 12px 22px; height: 48px; }

.ax-btn--primary { background: var(--ax-green-700); color: var(--ax-paper); border-color: var(--ax-green-700); }
.ax-btn--primary:hover { background: var(--ax-green-600); border-color: var(--ax-green-600); }
.ax-btn--primary:active { background: var(--ax-green-900); border-color: var(--ax-green-900); transform: translateY(1px); }

.ax-btn--secondary { background: var(--ax-paper-pure); color: var(--ax-ink-900); border-color: var(--ax-neutral-300); }
.ax-btn--secondary:hover { background: var(--ax-neutral-100); border-color: var(--ax-neutral-400); }
.ax-btn--secondary:active { background: var(--ax-neutral-200); transform: translateY(1px); }

.ax-btn--ghost { background: transparent; color: var(--ax-green-700); border-color: transparent; }
.ax-btn--ghost:hover { background: var(--ax-green-100); }
.ax-btn--ghost:active { background: var(--ax-green-200); }

.ax-btn--danger { background: transparent; color: var(--state-refused); border-color: var(--state-refused-border); }
.ax-btn--danger:hover { background: var(--state-refused-soft); }
.ax-btn--danger:active { background: var(--state-refused-soft); transform: translateY(1px); }

.ax-btn:disabled, .ax-btn[aria-disabled="true"] {
  cursor: not-allowed; opacity: 0.45;
  background: var(--ax-neutral-200); color: var(--ax-ink-600);
  border-color: var(--ax-neutral-300); transform: none;
}
.ax-btn--ghost:disabled, .ax-btn--danger:disabled { background: transparent; }
.ax-btn--full { width: 100%; }
.ax-btn svg { width: 1.05em; height: 1.05em; stroke-width: 2; }

/* ---------------- Badge ---------------- */
.ax-badge {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: var(--radius-xs);
  border: var(--border-hair) solid transparent;
  text-transform: uppercase;
  line-height: 1.3;
}
.ax-badge .ax-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.ax-badge--pass    { background: var(--state-posted-soft); color: var(--state-posted); border-color: var(--state-posted-border); }
.ax-badge--pass    .ax-dot { background: var(--state-posted); }

/* ---------------- Eyebrow ---------------- */
.ax-eyebrow-c {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  font-weight: var(--weight-medium); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--text-accent);
  display: inline-flex; align-items: center; gap: 10px;
}
.ax-eyebrow-c--rule::before { content: ""; width: 22px; height: 1.5px; background: currentColor; display: block; }