/* ============================================================================
   Jain Chindalia & Co. — Component primitives
   Reused by preview cards and both UI kits. Requires colors_and_type.css.
   ========================================================================== */

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600;
  letter-spacing: 0.01em; line-height: 1;
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 11px 18px; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
  text-decoration: none; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }

.btn--primary { background: var(--seal); color: var(--ink-on-dark); }
.btn--primary:hover { background: var(--seal-bright); color: var(--ink-on-dark); }

.btn--secondary { background: var(--surface-card); color: var(--ink-1); border-color: var(--line-strong); }
.btn--secondary:hover { background: var(--paper-1); border-color: var(--ink-3); }

.btn--ghost { background: transparent; color: var(--seal); padding-left: 6px; padding-right: 6px; }
.btn--ghost:hover { color: var(--seal-bright); }

.btn--quiet { background: transparent; color: var(--ink-2); border-color: var(--line); }
.btn--quiet:hover { background: var(--paper-1); color: var(--ink-1); }

.btn[disabled], .btn--disabled { opacity: 0.5; pointer-events: none; box-shadow: none; }
.btn--sm { padding: 7px 12px; font-size: var(--fs-caption); }
.btn--lg { padding: 14px 24px; font-size: var(--fs-body); }

/* ---- Form fields -------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label {
  font-family: var(--font-sans); font-size: var(--fs-caption); font-weight: 600;
  color: var(--ink-2); letter-spacing: 0.02em;
}
.input, .select, .textarea {
  font-family: var(--font-sans); font-size: var(--fs-small); color: var(--ink-1);
  background: var(--bg-raised);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 10px 12px; width: 100%;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--seal);
  box-shadow: 0 0 0 3px var(--seal-tint);
}
.field .hint { font-size: var(--fs-caption); color: var(--ink-3); }

/* ---- Status chips ------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-size: var(--fs-caption); font-weight: 600;
  white-space: nowrap;
  padding: 4px 11px; border-radius: var(--radius-pill); line-height: 1.2;
  border: 1px solid transparent;
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip--ok    { background: var(--ok-tint);    color: var(--ok); }
.chip--warn  { background: var(--warn-tint);  color: var(--warn); }
.chip--alert { background: var(--alert-tint); color: var(--alert); }
.chip--info  { background: var(--info-tint);  color: var(--info); }
.chip--muted { background: var(--paper-2);    color: var(--ink-2); }

/* ---- Card --------------------------------------------------------------- */
.card {
  background: var(--surface-card); border: 1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
}
.card--pad { padding: var(--space-5); }
.card__kicker { margin-bottom: 10px; }

/* ---- Eyebrow + rule motif ---------------------------------------------- */
.kicker { display: inline-flex; align-items: center; gap: 10px; }
.kicker .tick { width: 22px; height: 2px; background: var(--brass); }