/* =============================================================
   Modrich Labs — Shared Components
   Requires colors_and_type.css. Load both in every surface.
   ============================================================= */

/* =============================================================
   Buttons
   Base carries structure; size variant carries density.
   Default sizing is sm (dense, product UI). Use btn-md for
   editorial/marketing contexts.
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 500;
  font-size: 13px; padding: 9px 16px;
  border-radius: 4px; border: 1px solid transparent;
  cursor: pointer; line-height: 1;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--bg-tint);
  color: var(--ml-border-strong);
  border-color: transparent;
  cursor: not-allowed;
  pointer-events: none;
}

/* Size variants */
.btn-md { font-size: 14px; padding: 11px 18px; } /* Marketing site, editorial contexts */

/* Color variants */
.btn-primary { background: var(--ml-blue); color: var(--fg-inverse); }
.btn-primary:not(:disabled):hover { background: var(--ml-blue-hover); }

.btn-secondary { background: var(--bg-surface); color: var(--fg-1); border-color: var(--ml-text); }
.btn-secondary:not(:disabled):hover { background: var(--ml-text); color: var(--fg-inverse); }

.btn-tertiary { background: transparent; color: var(--ml-blue); border: none; padding-left: 0; padding-right: 0; }
/* CSS-only arrow: permitted exception. Pseudo-element content is not in the a11y tree and renders as decoration only. */
.btn-tertiary::after { content: "→"; margin-left: 6px; }

/* =============================================================
   Data labels
   Dense uppercase mono labels: form fields, table headers,
   stat cards, metadata. Distinct from editorial section labels
   (12px / 0.08em — set directly on .section-label in each kit).
   ============================================================= */
.ml-label-data {
  font-family: var(--font-mono);
  font-size: var(--fs-label-data);
  line-height: var(--lh-label-data);
  letter-spacing: var(--ls-label-data);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-2);
}