/*
 * Bodie Design System — bodie.css
 * Single-file stylesheet: design tokens (CSS custom properties) + base element styles.
 * Source of truth: ../tokens/*.json. Regenerate the token layer with `npm run build`.
 * Font: load Geist before this file:
 *   <link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
 */

:root {
  /* primitives */
  --bd-color-white: #FFFFFF;
  --bd-color-paper-2: #FAFAF8;
  --bd-color-paper-3: #F4F2EE;
  --bd-color-ink: #1E1D18;
  --bd-color-ink-soft: #5A574C;
  --bd-color-ink-mute: #9A9384;
  --bd-color-rule: #E8E4DC;
  --bd-color-rule-soft: #F0EDE7;
  --bd-color-cobalt: #122E7F;
  --bd-color-cobalt-tint: #E7EAF3;
  --bd-color-cobalt-deep: #0C1F5C;
  --bd-color-green: #22C55E;
  --bd-color-surface-1: #F5F4F1;
  --bd-color-surface-2: #ECEAE5;

  /* semantic roles — bind to these in app code */
  --bd-background: var(--bd-color-white);
  --bd-background-alt: var(--bd-color-paper-2);
  --bd-text: var(--bd-color-ink);
  --bd-text-soft: var(--bd-color-ink-soft);
  --bd-text-mute: var(--bd-color-ink-mute);
  --bd-border: var(--bd-color-rule);
  --bd-border-soft: var(--bd-color-rule-soft);
  --bd-brand: var(--bd-color-cobalt);
  --bd-brand-tint: var(--bd-color-cobalt-tint);
  --bd-brand-deep: var(--bd-color-cobalt-deep);
  --bd-status-ok: var(--bd-color-green);

  /* type */
  --bd-font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  --bd-weight-regular: 400;
  --bd-weight-medium: 500;
  --bd-weight-semibold: 600;
  --bd-weight-bold: 700;
  --bd-tracking-tight: -0.028em;
  --bd-tracking-snug: -0.012em;
  --bd-tracking-wide: 0.09em;
  --bd-leading-tight: 1.08;
  --bd-leading-body: 1.6;

  /* layout */
  --bd-radius-sm: 8px;
  --bd-radius: 14px;
  --bd-radius-pill: 999px;
  --bd-gutter: 40px;
  --bd-container: 1240px;

  /* surfaces */
  --bd-surface-gradient: linear-gradient(150deg, var(--bd-color-surface-1) 0%, var(--bd-color-surface-2) 100%);
}

/* ---- base elements (opt in by applying .bd or using inside a .bd scope) ---- */
.bd, .bd-scope {
  font-family: var(--bd-font-sans);
  font-size: 17px;
  line-height: var(--bd-leading-body);
  color: var(--bd-text);
  background: var(--bd-background);
  -webkit-font-smoothing: antialiased;
}

.bd-h1, .bd-h2 {
  font-family: var(--bd-font-sans);
  font-weight: var(--bd-weight-semibold);
  letter-spacing: var(--bd-tracking-tight);
  line-height: var(--bd-leading-tight);
  text-wrap: balance;
  color: var(--bd-text);
}
.bd-h1 { font-size: clamp(2.8rem, 5.6vw, 4.4rem); }
.bd-h2 { font-size: clamp(2.1rem, 4.2vw, 3.2rem); }
.bd-h3 {
  font-family: var(--bd-font-sans);
  font-size: 1.2rem;
  font-weight: var(--bd-weight-semibold);
  letter-spacing: var(--bd-tracking-snug);
}

.bd-kicker {
  display: block;
  font-size: 0.72rem;
  font-weight: var(--bd-weight-semibold);
  letter-spacing: var(--bd-tracking-wide);
  text-transform: uppercase;
  color: var(--bd-brand);
}

/* ---- components ---- */
.bd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.78rem 1.6rem; border-radius: var(--bd-radius-sm);
  font-family: var(--bd-font-sans); font-size: 0.93rem; font-weight: var(--bd-weight-semibold);
  text-decoration: none; border: none; cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.bd-btn:active { transform: scale(0.98); }
.bd-btn--primary { background: var(--bd-brand); color: #fff; }
.bd-btn--primary:hover { opacity: 0.87; }
.bd-btn--outline { background: transparent; color: var(--bd-text); border: 0.5px solid var(--bd-border); }
.bd-btn--outline:hover { border-color: var(--bd-text-soft); }

.bd-card {
  background: var(--bd-background);
  border: 0.5px solid var(--bd-border);
  border-radius: var(--bd-radius);
  overflow: hidden;
}
.bd-card__media {
  background: var(--bd-surface-gradient);
  height: 160px;
  display: flex; align-items: center; justify-content: center;
}

.bd-pill {
  display: inline-flex; align-items: center;
  font-family: var(--bd-font-sans); font-weight: var(--bd-weight-medium);
  font-size: 0.68rem; letter-spacing: 0.02em;
  color: var(--bd-brand); background: var(--bd-brand-tint);
  border-radius: var(--bd-radius-pill); padding: 0.3rem 0.7rem;
}

.bd-back-link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--bd-font-sans); font-size: 0.875rem; font-weight: var(--bd-weight-medium);
  color: var(--bd-text-mute);
  background: none; border: none; cursor: pointer; padding: 0; text-decoration: none;
}
.bd-back-link:hover { color: var(--bd-text); }