/* =========================================================================
   PROSPENSITY — Component CSS
   Vanilla HTML/CSS classes built on tokens from colors_and_type.css.
   Import this AFTER colors_and_type.css.
   ========================================================================= */

/* Buttons -------------------------------------------------------------- */
.btn {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 14px 22px;
  border-radius: var(--r-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  transition: all 140ms var(--ease-out);
  text-decoration: none;
  line-height: 1;
}
.btn-primary {
  background: var(--ink-900);
  color: var(--paper);
  border-color: var(--ink-900);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.btn-primary:hover { background: var(--ink-800); }
.btn-secondary {
  background: transparent;
  color: var(--ink-900);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--paper-2); }
.btn-sm { padding: 8px 14px; font-size: 13px; border-radius: var(--r-sm); }

/* Eyebrow already exists via .eyebrow in colors_and_type.css ----------- */

/* Cards ---------------------------------------------------------------- */
.card-elev {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.card-elev:hover { box-shadow: var(--shadow-md); }

/* Containers ----------------------------------------------------------- */
.container-lg { max-width: var(--container-lg); margin: 0 auto; padding: 0 32px; }
.container-md { max-width: var(--container-md); margin: 0 auto; padding: 0 32px; }

/* Mesh background (use as ::before on a relative parent) --------------- */
.mesh-bg { position: relative; isolation: isolate; }
.mesh-bg::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 60% at 12% 20%, color-mix(in oklab, var(--tide-200) 80%, transparent), transparent 60%),
    radial-gradient(ellipse 45% 55% at 85% 30%, color-mix(in oklab, var(--mist-200) 70%, transparent), transparent 60%),
    radial-gradient(ellipse 50% 60% at 50% 110%, color-mix(in oklab, var(--sage-200) 60%, transparent), transparent 65%);
  filter: blur(60px) saturate(0.9);
  opacity: 0.9;
}

/* Flourish (italic Newsreader inside sans headline) -------------------- */
/* .flourish already exists in colors_and_type.css */

/* Inputs --------------------------------------------------------------- */
.input {
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-elev-2);
  color: var(--ink-900);
  outline: none;
  transition: border-color 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
  width: 100%;
  box-sizing: border-box;
}
.input:focus { border-color: var(--tide-500); box-shadow: 0 0 0 3px color-mix(in oklab, var(--tide-300) 35%, transparent); }

/* Headings ------------------------------------------------------------- */
.h-display {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(48px, 7vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink-900);
  margin: 0;
}
.h-section {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 38px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}

/* Tag / chip ----------------------------------------------------------- */
.chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--fg-muted);
  border: 1px solid var(--border);
}
.chip-tide  { background: var(--tide-50);  color: var(--tide-700);  border-color: var(--tide-100); }
.chip-mist  { background: var(--mist-50);  color: var(--mist-700);  border-color: var(--mist-100); }
.chip-sage  { background: var(--sage-50);  color: var(--sage-700);  border-color: var(--sage-100); }