/* LIN3S Design System — CSS port of the JSX components used by this page.
 * Ported 1:1 from _ds_bundle.js (namespace LIN3SDesignSystem_a9fd2b):
 *   components/buttons/Button.jsx   -> .lin3s-btn
 *   components/content/Eyebrow.jsx  -> .lin3s-eyebrow-c
 * Values are copied from the bundle, not re-derived.
 */

/* ---------- Button ---------- */
.lin3s-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--lin3s-font-body);
  font-size: var(--lin3s-button-size);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  border-radius: var(--lin3s-rounded-pill);
  padding: 14px 28px;             /* size=md */
  cursor: pointer;
  opacity: 1;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
  border: 1px solid transparent;
  text-decoration: none;
}

/* sizes */
.lin3s-btn--sm { padding: 10px 20px; font-size: 13px; }
.lin3s-btn--lg { padding: 16px 34px; font-size: 16px; }

/* variants */
.lin3s-btn--primary {
  background: var(--lin3s-primary);
  color: var(--lin3s-on-primary);
  border-color: var(--lin3s-primary);
}
.lin3s-btn--secondary {
  background: var(--lin3s-canvas);
  color: var(--lin3s-ink);
  border-color: var(--lin3s-ink);
}
.lin3s-btn--outline {
  background: var(--lin3s-canvas);
  color: var(--lin3s-ink);
  border-color: var(--lin3s-hairline);
}
.lin3s-btn--onInverse {
  background: var(--lin3s-on-primary);
  color: var(--lin3s-ink);
  border-color: var(--lin3s-on-primary);
}

.lin3s-btn:disabled,
.lin3s-btn[aria-disabled="true"] { cursor: not-allowed; opacity: .4; }

/* The bundle declares the .18s colour transition but ships no :hover rule.
 * These hovers are an implementation addition so the pill has an affordance. */
.lin3s-btn--primary:hover:not(:disabled)   { background: var(--lin3s-ink-soft); border-color: var(--lin3s-ink-soft); }
.lin3s-btn--secondary:hover:not(:disabled) { background: var(--lin3s-canvas-muted); }
.lin3s-btn--outline:hover:not(:disabled)   { border-color: var(--lin3s-ink); }
.lin3s-btn--onInverse:hover:not(:disabled) { background: var(--lin3s-inverse-ink-soft); border-color: var(--lin3s-inverse-ink-soft); }

.lin3s-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.lin3s-btn--primary:focus-visible { outline-color: var(--lin3s-ink); }

/* ---------- Eyebrow ---------- */
.lin3s-eyebrow-c {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--lin3s-font-body);
  font-size: var(--lin3s-eyebrow-size);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--lin3s-eyebrow-ls);
  text-transform: uppercase;
  color: var(--lin3s-ink-muted);
}
.lin3s-eyebrow-c__marker { display: inline-flex; gap: 2.5px; }
.lin3s-eyebrow-c__marker i {
  width: 5px;
  height: 6px;
  background: var(--lin3s-ink);
  border-radius: 1px;
  display: block;
}

/* ---------- StatNumber ----------
 * Ported 1:1 from _ds_bundle.js — components/content/StatNumber.jsx
 * "An oversized Besley figure used as a hero data element. Pair with a caption beneath."
 */
.lin3s-stat-c {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  align-items: flex-start;
}
.lin3s-stat-c__value {
  font-family: var(--lin3s-font-display);
  font-size: var(--lin3s-stat-size);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--lin3s-stat-ls);
  color: var(--lin3s-ink);
}
.lin3s-stat-c__caption {
  font-family: var(--lin3s-font-body);
  font-size: var(--lin3s-body-sm-size);
  line-height: 1.45;
  color: var(--lin3s-ink-muted);
  max-width: 260px;
}
/* tone="inverse" */
.lin3s-stat-c--inverse .lin3s-stat-c__value   { color: var(--lin3s-inverse-ink); }
.lin3s-stat-c--inverse .lin3s-stat-c__caption { color: var(--lin3s-inverse-ink-soft); }

/* ---------- Card ----------
 * Ported 1:1 from _ds_bundle.js — components/content/Card.jsx
 * "Shadow-light: depth from surface contrast, never drop shadow."
 */
.lin3s-card {
  border-radius: var(--lin3s-rounded-lg);
  font-family: var(--lin3s-font-body);
  background: var(--lin3s-canvas-muted);
  color: var(--lin3s-ink);
  padding: var(--lin3s-space-xl);
}
.lin3s-card--media {
  background: var(--lin3s-surface-soft);
  padding: 0;
  overflow: hidden;
}
.lin3s-card--inverse {
  background: var(--lin3s-inverse-canvas);
  color: var(--lin3s-inverse-ink);
  padding: var(--lin3s-space-xl);
}

/* ---------- Badge ----------
 * Ported 1:1 from _ds_bundle.js — components/content/Badge.jsx
 * Only the monochrome tones are ported. The semantic tones (success/warning/error) are
 * deliberately omitted: colors.css maps them onto the quarantined Communication and
 * Graphics hues, so using them on permanent UI would violate that file's own colour rule.
 */
.lin3s-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--lin3s-font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.2px;
  padding: 5px 10px;
  border-radius: var(--lin3s-rounded-pill);
  background: var(--lin3s-canvas-muted);
  color: var(--lin3s-ink);
  border: 1px solid var(--lin3s-hairline);
}
.lin3s-badge--solid {
  background: var(--lin3s-ink);
  color: var(--lin3s-on-primary);
  border: 1px solid transparent;
}
.lin3s-badge--outline {
  background: transparent;
  color: var(--lin3s-ink);
  border: 1px solid var(--lin3s-ink);
}