/* ============================================================================
   COMPONENT PRIMITIVES (CSS) — buttons, eyebrow, tag, card
   The action vocabulary and recurring small patterns of the O@W site,
   available as plain CSS classes (the React components mirror these).
   ========================================================================== */

/* --- Eyebrow — small uppercase label with a purple dot, sits above headings */
.g-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space--2);
  margin-bottom: var(--space--5);
  font-size: var(--text-small--font-size);
  font-weight: var(--font--primary-semi-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.g-eyebrow::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: var(--radius--round); background: var(--swatch--brand-1); }

/* --- Tag — outlined rounded label */
.g-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space--2);
  padding: var(--space--1) var(--space--3);
  font-size: var(--text-small--font-size);
  border: var(--border-width--main) solid var(--theme--border);
  border-radius: var(--radius--round);
}

/* --- Buttons — solid purple pill, inverts to navy on hover -------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space--2);
  padding: var(--space--3) var(--space--5);
  font-family: var(--font--primary-family);
  font-size: var(--text-main--font-size);
  font-weight: var(--font--primary-medium);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: var(--border-width--main) solid var(--button--border);
  border-radius: var(--radius--round);
  background-color: var(--button--background);
  color: var(--button--text);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover {
  background-color: var(--button--background-hover);
  color: var(--button--text-hover);
  border-color: var(--button--border-hover);
}

/* Secondary / outline */
.btn.is-secondary {
  --button--background: transparent;
  --button--text: var(--theme--text);
  --button--border: var(--theme--text);
  --button--background-hover: var(--swatch--brand-1);
  --button--text-hover: var(--swatch--light);
  --button--border-hover: var(--swatch--brand-1);
}
/* Orange */
.btn.is-orange {
  --button--background: var(--swatch--brand-2);
  --button--text: var(--swatch--brand-2-text);
  --button--border: var(--swatch--brand-2);
}

/* Text / link button with animated arrow */
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space--2);
  font-weight: var(--font--primary-medium);
  text-decoration: none;
  color: inherit;
}
.btn-text:hover { color: var(--swatch--brand-1); }
.btn-text .arrow { transition: transform .2s ease; }
.btn-text:hover .arrow { transform: translateX(0.25rem); }

/* Button group */
.btn-group { display: inline-flex; flex-wrap: wrap; gap: var(--space--4); }

/* --- Card — generic padded white surface, hairline border, 1rem radius --- */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space--4);
  padding: var(--space--6);
  background-color: var(--swatch--light);
  border: var(--border-width--main) solid var(--theme--border);
  border-radius: var(--radius--main);
}