/* ─────────────────────────────────────────────────────────────
   theplot.tv shared components — buttons, chips, cards, panels.

   One copy for every static page (index, about, plans, privacy, terms,
   community, 404). Load after /theme.css. Values come from theme.css tokens,
   which are checked against @plot/core/tokens.js by `npm run tokens:marketing`.
   The Storybook stories import this file directly, so there is no mirror to
   keep in sync.

   Rules of the system, in short:
   · Pink (--pink) is a FILL behind charcoal text. It never colours type.
   · Structure comes from the two creams and hairlines, not shadows.
   · Headlines are Gabarito bold; body is DM Sans; the serif is for quotes.
   ───────────────────────────────────────────────────────────── */

/* Buttons — pill, 44px minimum hit area at .btn-large */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1.4rem;
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
  border: none;
  color: var(--text);
}
.btn-primary { background: var(--fill); }
.btn-primary:hover { background: var(--fill-hover); transform: translateY(-1px); }
.btn-outline,
.btn-outline-white { background: var(--surface); }
.btn-outline:hover,
.btn-outline-white:hover { background: var(--surface-hover); transform: translateY(-1px); }
.btn-ink { background: var(--ink); color: var(--bg); }
.btn-ink:hover { background: var(--ink-hover); transform: translateY(-1px); }
.btn-large { padding: 0.85rem 2.2rem; font-size: 0.85rem; min-height: 44px; }
.btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
@media (max-width: 600px) {
  .btn-large { padding: 0.75rem 1.5rem; font-size: 0.85rem; }
}

/* Chips — small labels. Cream by default; pink and sage carry meaning. */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.7rem;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.chip-pink { background: var(--fill); }
.chip-sage { background: var(--sage); }
.chip-plain { text-transform: none; letter-spacing: 0.02em; font-weight: 500; font-size: 0.66rem; }

/* Section eyebrow — a chip that sits above a headline */
.section-eyebrow { display: inline-flex; margin-bottom: 1.4rem; }

/* Cards and panels — the deeper cream, 20px radius, no border, no shadow */
.card {
  background: var(--surface);
  border-radius: 20px;
}
.card-pad { padding: 1.75rem 2rem; }
.card-ink { background: var(--ink); color: var(--bg); }

/* Hairline rule and the rows that use it */
.rule { height: 1px; background: var(--rule); }
.row-list > * + * { border-top: 1px solid var(--rule); }

/* Display type helpers */
.display { font-family: var(--display); font-weight: 700; letter-spacing: var(--display-tracking); line-height: 0.95; }
.caps { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); }
.quote { font-family: var(--display); font-weight: 500; }