/*
 * Bodie Design System — bodie.css
 * Single source of truth for Bodie's visual language: tokens + logo + components.
 * Extracted from the live marketing site (getbodie.ai) and the demo hub.
 *
 * Token layer is mirrored from ../tokens/*.json (regenerate with `npm run build`,
 * which writes dist/bodie.tokens.css); this file pairs those tokens with the
 * component layer so any product can drop it in and look like Bodie.
 *
 * 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">
 *
 * Logo: use .bd-logo (mark + wordmark) or .bd-wordmark (text only). The mark is
 * also shipped as dist/bodie-mark.svg for favicons. Never hand-draw a Bodie logo.
 */

: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-green-tint: #E7F8EE;
  --bd-color-amber: #F59E0B;
  --bd-color-amber-tint: #FBF1E0;
  --bd-color-red: #DC2626;
  --bd-color-red-tint: #FAEAEA;
  --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-on-brand: var(--bd-color-white);
  --bd-status-ok: var(--bd-color-green);
  --bd-status-ok-tint: var(--bd-color-green-tint);
  --bd-status-warn: var(--bd-color-amber);
  --bd-status-warn-tint: var(--bd-color-amber-tint);
  --bd-status-danger: var(--bd-color-red);
  --bd-status-danger-tint: var(--bd-color-red-tint);

  /* ===== type ===== */
  --bd-font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  --bd-font-mono: 'Geist', ui-monospace, SFMono-Regular, monospace;
  --bd-weight-light: 300;
  --bd-weight-regular: 400;
  --bd-weight-medium: 500;
  --bd-weight-semibold: 600;
  --bd-weight-bold: 700;
  --bd-weight-black: 800;
  --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;
  --bd-text-base: 17px;

  /* type scale */
  --bd-size-display: clamp(2.8rem, 5.6vw, 4.4rem);
  --bd-size-h1: clamp(2.8rem, 5.6vw, 4.4rem);
  --bd-size-h2: clamp(2.1rem, 4.2vw, 3.2rem);
  --bd-size-h3: 1.2rem;
  --bd-size-lead: 1.2rem;
  --bd-size-body: 1.0625rem;
  --bd-size-sm: 0.9375rem;
  --bd-size-xs: 0.82rem;
  --bd-size-kicker: 0.72rem;

  /* ===== layout ===== */
  --bd-radius-sm: 8px;
  --bd-radius: 14px;
  --bd-radius-pill: 999px;
  --bd-gutter: 40px;
  --bd-container: 1240px;
  --bd-nav-height: 68px;
  --bd-section-pad: 5.5rem;

  /* ===== elevation + motion ===== */
  --bd-shadow-sm: 0 1px 6px rgba(0, 0, 0, 0.08);
  --bd-shadow-card: 0 1px 3px rgba(30, 29, 24, 0.05);
  --bd-transition: 0.15s ease;

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

/* =====================================================================
   BASE — apply .bd (or .bd-scope) to a root element to opt in
   ===================================================================== */
.bd, .bd-scope {
  font-family: var(--bd-font-sans);
  font-size: var(--bd-text-base);
  line-height: var(--bd-leading-body);
  color: var(--bd-text);
  background: var(--bd-background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.bd-wrap { max-width: var(--bd-container); margin: 0 auto; padding: 0 var(--bd-gutter); }
.bd-section { padding: var(--bd-section-pad) 0; }
.bd-section--alt { background: var(--bd-background-alt); }
.bd-sep { border: none; border-top: 0.5px solid var(--bd-border); margin: 0; }

/* =====================================================================
   LOGO — the one true Bodie mark. Do not reinvent.
   .bd-logo     = mark + wordmark (app headers)
   .bd-wordmark = text only (matches getbodie.ai nav)
   Size the lockup by setting font-size on .bd-logo (default 1.3rem).
   ===================================================================== */
.bd-wordmark {
  font-family: var(--bd-font-sans);
  font-weight: var(--bd-weight-bold);
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--bd-text);
  text-decoration: none;
}
.bd-logo { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; line-height: 1; font-size: 1.3rem; }
.bd-logo__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.55em; height: 1.55em;
  border-radius: 0.34em;
  background: var(--bd-brand);
  color: var(--bd-on-brand);
  font-family: var(--bd-font-sans);
  font-weight: var(--bd-weight-bold);
  font-size: inherit;
  line-height: 1;
  flex-shrink: 0;
}
.bd-logo .bd-wordmark { font-size: inherit; }

/* =====================================================================
   TYPOGRAPHY
   ===================================================================== */
.bd-h1, .bd-h2, .bd-display {
  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-display { font-size: var(--bd-size-display); }
.bd-h1 { font-size: var(--bd-size-h1); }
.bd-h2 { font-size: var(--bd-size-h2); }
.bd-h3 {
  font-family: var(--bd-font-sans);
  font-size: var(--bd-size-h3);
  font-weight: var(--bd-weight-semibold);
  letter-spacing: var(--bd-tracking-snug);
  line-height: 1.3;
  color: var(--bd-text);
}
.bd-kicker {
  display: block;
  font-size: var(--bd-size-kicker);
  font-weight: var(--bd-weight-semibold);
  letter-spacing: var(--bd-tracking-wide);
  text-transform: uppercase;
  color: var(--bd-brand);
}
.bd-lead { font-size: var(--bd-size-lead); color: var(--bd-text-soft); line-height: var(--bd-leading-body); }
.bd-sub  { font-size: var(--bd-size-body); color: var(--bd-text-soft); line-height: var(--bd-leading-body); }
.bd-muted { color: var(--bd-text-mute); }
.bd-ac { color: var(--bd-brand); }
.bd-link {
  color: var(--bd-text-soft); text-decoration: none; font-weight: var(--bd-weight-medium);
  transition: color var(--bd-transition);
}
.bd-link:hover { color: var(--bd-text); }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.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; white-space: nowrap;
  transition: opacity var(--bd-transition), transform 0.1s ease, border-color var(--bd-transition);
}
.bd-btn:active { transform: scale(0.98); }
.bd-btn--primary { background: var(--bd-brand); color: var(--bd-on-brand); }
.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-btn--sm { padding: 0.55rem 1.2rem; font-size: 0.88rem; }

/* =====================================================================
   PILLS, TAGS, BADGES, CHIPS
   ===================================================================== */
/* brand chip (e.g. demo capability label) */
.bd-pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  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;
}
/* outlined tag with optional live dot (hero "A family-run software studio") */
.bd-tag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--bd-background); border: 0.5px solid var(--bd-border);
  border-radius: var(--bd-radius-pill); padding: 0.38rem 0.95rem;
  font-size: 0.82rem; color: var(--bd-text-soft);
}
.bd-led { width: 7px; height: 7px; border-radius: 50%; background: var(--bd-status-ok); flex-shrink: 0; position: relative; }
.bd-led::after {
  content: ''; position: absolute; top: -1px; left: -1px; width: 9px; height: 9px;
  border-radius: 50%; background: color-mix(in srgb, var(--bd-status-ok) 40%, transparent);
  animation: bd-ledpulse 2s ease-out infinite;
}
@keyframes bd-ledpulse { 0% { transform: scale(0.8); opacity: 0.8; } 70% { transform: scale(1.6); opacity: 0; } 100% { transform: scale(0.8); opacity: 0; } }

/* status badges (app UIs: "3 to review", "All clear") */
.bd-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.75rem; font-weight: var(--bd-weight-semibold);
  border-radius: var(--bd-radius-pill); padding: 0.25rem 0.6rem; line-height: 1.2;
}
.bd-badge--ok     { color: var(--bd-status-ok);     background: var(--bd-status-ok-tint); }
.bd-badge--warn   { color: var(--bd-status-warn);   background: var(--bd-status-warn-tint); }
.bd-badge--danger { color: var(--bd-status-danger); background: var(--bd-status-danger-tint); }
.bd-badge--brand  { color: var(--bd-brand);         background: var(--bd-brand-tint); }

/* =====================================================================
   CARDS
   ===================================================================== */
.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; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem;
}
.bd-card__body { padding: 1.25rem 1.25rem 1.5rem; }
.bd-card__eyebrow { font-size: 0.8125rem; font-weight: var(--bd-weight-semibold); color: var(--bd-text-mute); margin-bottom: 0.35rem; }
.bd-card__title { font-family: var(--bd-font-sans); font-size: 1.1rem; font-weight: var(--bd-weight-semibold); letter-spacing: var(--bd-tracking-snug); margin-bottom: 0.4rem; color: var(--bd-text); }
.bd-card__desc { font-size: var(--bd-size-sm); color: var(--bd-text-soft); line-height: 1.55; }

/* icon tile (the white rounded square with a brand-stroked glyph) */
.bd-icon-tile {
  width: 52px; height: 52px; background: var(--bd-background); border-radius: 12px;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--bd-shadow-sm);
}
.bd-icon-tile svg { width: 24px; height: 24px; stroke: var(--bd-brand); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bd-icon-tile--soft { width: 42px; height: 42px; border-radius: 10px; background: var(--bd-brand-tint); box-shadow: none; }
.bd-icon-tile--soft svg { width: 20px; height: 20px; stroke-width: 2; }

/* =====================================================================
   STATS
   ===================================================================== */
.bd-stat__value { font-family: var(--bd-font-sans); font-size: 3.2rem; font-weight: var(--bd-weight-semibold); line-height: 1; letter-spacing: -0.03em; color: var(--bd-text); }
.bd-stat__unit  { font-size: 1.5rem; }
.bd-stat__label { font-size: 0.87rem; color: var(--bd-text-soft); margin-top: 0.5rem; line-height: 1.45; max-width: 220px; }

/* =====================================================================
   FORMS
   ===================================================================== */
.bd-field { margin-bottom: 1.2rem; }
.bd-label { display: block; font-size: 0.8rem; font-weight: var(--bd-weight-semibold); margin-bottom: 0.45rem; color: var(--bd-text-soft); }
.bd-input, .bd-textarea {
  width: 100%; padding: 0.72rem 0.9rem; border: 0.5px solid var(--bd-border); border-radius: var(--bd-radius-sm);
  font-size: 0.93rem; font-family: var(--bd-font-sans); color: var(--bd-text); background: var(--bd-background);
  transition: border-color var(--bd-transition); outline: none;
}
.bd-input:focus, .bd-textarea:focus { border-color: var(--bd-brand); }
.bd-textarea { resize: vertical; min-height: 90px; }

/* =====================================================================
   NAV + FOOTER
   ===================================================================== */
.bd-nav { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bd-background) 90%, transparent); backdrop-filter: blur(14px); border-bottom: 0.5px solid var(--bd-border-soft); }
.bd-nav__inner { max-width: var(--bd-container); margin: 0 auto; padding: 0 var(--bd-gutter); display: flex; align-items: center; justify-content: space-between; height: var(--bd-nav-height); }
.bd-footer { border-top: 0.5px solid var(--bd-border); padding: 2.5rem 0; }
.bd-footer__inner { max-width: var(--bd-container); margin: 0 auto; padding: 0 var(--bd-gutter); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.bd-footer__copy { font-size: 0.8rem; color: var(--bd-text-mute); }

/* =====================================================================
   MOTION — scroll reveal (opt in via .bd-reveal, toggle .in when visible)
   ===================================================================== */
.bd-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.bd-reveal.in { opacity: 1; transform: none; }
.bd-reveal.bd-d1 { transition-delay: 0.08s; }
.bd-reveal.bd-d2 { transition-delay: 0.16s; }
.bd-reveal.bd-d3 { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) { .bd-reveal { opacity: 1; transform: none; } }