/* Bridge AI component utilities.
   Real, on-brand parts a design can use directly. Every class here is built from the
   locked tokens, so the look stays consistent without any compiled JS components.
   No pills. No gradients. No drop shadows. Elevation = surface contrast + 1px Ash ring. */

/* ── Layout ───────────────────────────────────────────────────────────── */
.bridge-page    { max-width: var(--page-max-width); margin: 0 auto; padding-inline: var(--spacing-24); }
.bridge-section { padding-block: var(--section-gap); }
.bridge-stack   { display: flex; flex-direction: column; gap: var(--element-gap); }

/* ── Buttons (radius 4px, monochrome contrast is the only affordance) ───── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-8);
  font-family: var(--font-dm-sans); font-size: 15px; font-weight: var(--font-weight-medium);
  line-height: 1; padding: 10px 22px; border-radius: var(--radius-button);
  border: 1px solid transparent; cursor: pointer;
  transition: border-color .15s ease, opacity .15s ease;
}
.btn-primary   { background: var(--color-ink); color: var(--color-paper-white); }
.btn-primary:hover   { opacity: .88; }
.btn-secondary { background: transparent; color: var(--color-ink); border-color: var(--color-ash-border); }
.btn-secondary:hover { border-color: var(--color-ink); }
.btn-ghost     { background: transparent; color: var(--color-ink); border: 0; padding-inline: 0; font-weight: var(--font-weight-regular); }
.btn-ghost:hover     { text-decoration: underline; }

/* ── Cards (radius 6px, hairline ring, never a drop shadow) ─────────────── */
.card          { background: var(--color-bone); border-radius: var(--radius-card); padding: var(--card-padding); }
.card-elevated { background: var(--color-pure-white); border-radius: var(--radius-card); padding: var(--spacing-24); box-shadow: var(--shadow-ring); }
.card-title    { font-size: var(--text-body); font-weight: var(--font-weight-medium); color: var(--color-ink); }
.card-body     { font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-graphite); }

/* ── Flush input (radius 0px distinguishes it from buttons/cards) ───────── */
.input {
  width: 100%; background: var(--color-pure-white); color: var(--color-ink);
  border: 1px solid var(--color-ash-border); border-radius: var(--radius-input);
  padding: 12px 16px; font-family: var(--font-dm-sans); font-size: var(--text-body);
}
.input:focus { outline: none; border-color: var(--color-ink); }

/* ── Caps label / caption (11px, +0.12em) ──────────────────────────────── */
.caption {
  font-size: var(--text-caption); letter-spacing: var(--tracking-caption);
  text-transform: uppercase; font-weight: var(--font-weight-medium); color: var(--color-graphite);
}

/* ── Stat / figure block (number as instrument) ────────────────────────── */
.stat        { display: flex; flex-direction: column; gap: var(--spacing-8); }
.stat-value  { font-family: var(--font-mono); font-size: var(--text-heading-lg); font-weight: var(--font-weight-light); line-height: 1; color: var(--color-ink); }
.stat-label  { font-size: var(--text-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--color-graphite); }

/* ── Section rule ──────────────────────────────────────────────────────── */
.rule { border: 0; border-top: 1px solid var(--color-ash-border); }

/* ── Tag / chip (radius 4px, never a pill) ─────────────────────────────── */
.tag {
  display: inline-flex; align-items: center; gap: var(--spacing-4);
  background: var(--color-bone); color: var(--color-graphite);
  border: 1px solid var(--color-ash-border); border-radius: var(--radius-button);
  padding: 4px 10px; font-size: var(--text-caption); letter-spacing: var(--tracking-caption);
  text-transform: uppercase; font-weight: var(--font-weight-medium);
}

/* ── Dark Obsidian variant (decks / hero only; never mixed with light) ──── */
.bridge-dark              { background: var(--color-obsidian); color: var(--color-pure-white); }
.bridge-dark h1,
.bridge-dark h2,
.bridge-dark h3,
.bridge-dark h4           { color: var(--color-pure-white); }
.bridge-dark .card        { background: var(--color-dark-raised); }
.bridge-dark .card-body   { color: #c9c7c2; }
.bridge-dark .rule        { border-color: var(--color-dark-border); }
.bridge-dark .btn-primary { background: var(--color-pure-white); color: var(--color-obsidian); }
.bridge-dark .stat-value  { color: var(--color-pure-white); }