/* ============================================================
   LiveBrand.ai — Component Library
   Built entirely on tokens.css. Load tokens.css first.
   Every value here resolves to a --lb-* token.
   ============================================================ */

/* ---- Typography helpers ------------------------------------------ */
.lb-display-xl { font-family: var(--lb-font-display); font-weight: var(--lb-fw-medium); font-size: var(--lb-display-xl-size); line-height: var(--lb-display-xl-lh); letter-spacing: var(--lb-display-xl-ls); color: var(--lb-text-primary); }
.lb-display    { font-family: var(--lb-font-display); font-weight: var(--lb-fw-medium); font-size: var(--lb-display-size); line-height: var(--lb-display-lh); letter-spacing: var(--lb-display-ls); color: var(--lb-text-primary); }
.lb-h1         { font-family: var(--lb-font-display); font-weight: var(--lb-fw-medium); font-size: var(--lb-h1-size); line-height: var(--lb-h1-lh); color: var(--lb-text-primary); }
.lb-h2         { font-family: var(--lb-font-display); font-weight: var(--lb-fw-medium); font-size: var(--lb-h2-size); line-height: var(--lb-h2-lh); color: var(--lb-text-primary); }
.lb-h3         { font-family: var(--lb-font-body); font-weight: var(--lb-fw-semibold); font-size: var(--lb-h3-size); line-height: var(--lb-h3-lh); color: var(--lb-text-primary); }
.lb-body-l     { font-family: var(--lb-font-body); font-weight: var(--lb-fw-regular); font-size: var(--lb-body-l-size); line-height: var(--lb-body-l-lh); color: var(--lb-ink-700); }
.lb-body       { font-family: var(--lb-font-body); font-weight: var(--lb-fw-regular); font-size: var(--lb-body-size); line-height: var(--lb-body-lh); color: var(--lb-ink-700); }
.lb-small      { font-family: var(--lb-font-body); font-weight: var(--lb-fw-regular); font-size: var(--lb-small-size); line-height: var(--lb-small-lh); color: var(--lb-text-muted); }
.lb-caption,
.lb-eyebrow    { font-family: var(--lb-font-label); font-weight: var(--lb-fw-medium); font-size: var(--lb-caption-size); line-height: var(--lb-caption-lh); letter-spacing: var(--lb-caption-ls); text-transform: uppercase; }
.lb-caption    { color: var(--lb-text-muted); }
.lb-eyebrow    { color: var(--lb-accent); }

/* ---- Buttons ------------------------------------------------------ */
.lb-btn {
  font-family: var(--lb-font-body);
  font-weight: var(--lb-fw-medium);
  font-size: var(--lb-small-size);
  line-height: 1;
  border: none;
  border-radius: var(--lb-radius-md);
  padding: var(--lb-space-12) var(--lb-space-24);
  cursor: pointer;
  transition: background var(--lb-transition), color var(--lb-transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lb-space-8);
  text-decoration: none;
}
.lb-btn:focus-visible { outline: 2px solid var(--lb-accent); outline-offset: 3px; }

.lb-btn--primary   { color: #FFFFFF; background: var(--lb-accent); }
.lb-btn--primary:hover { background: var(--lb-accent-hover); }

.lb-btn--secondary { color: var(--lb-text-primary); background: transparent; border: 1px solid var(--lb-ink-700); }
.lb-btn--secondary:hover { background: var(--lb-ground-cream); }

.lb-btn--ghost     { color: var(--lb-text-muted); background: transparent; }
.lb-btn--ghost:hover { background: var(--lb-ground-cream); color: var(--lb-text-primary); }

.lb-btn--dark      { color: #FFFFFF; background: var(--lb-ink-900); }
.lb-btn--dark:hover { background: var(--lb-ink-700); }

.lb-btn--pill      { border-radius: var(--lb-radius-pill); padding: var(--lb-space-8) var(--lb-space-16); }

/* ---- LIVE pill / On-air tag -------------------------------------- */
@keyframes lb-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(46, 99, 255, 0.45); }
  70%  { box-shadow: 0 0 0 7px rgba(46, 99, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 99, 255, 0); }
}
.lb-live {
  display: inline-flex;
  align-items: center;
  gap: var(--lb-space-8);
  border: 1px solid var(--lb-border);
  border-radius: var(--lb-radius-pill);
  padding: 7px 14px;
}
.lb-live__dot {
  width: 8px; height: 8px;
  background: var(--lb-accent);
  border-radius: 50%;
  animation: lb-pulse 2s infinite;
  flex-shrink: 0;
}
.lb-live__label {
  font-family: var(--lb-font-label);
  font-weight: var(--lb-fw-medium);
  font-size: var(--lb-caption-size);
  letter-spacing: var(--lb-caption-ls);
  text-transform: uppercase;
  color: var(--lb-text-primary);
}
/* Dark "On air" variant */
.lb-live--dark { background: var(--lb-ink-900); border-color: var(--lb-ink-900); padding: 8px 15px; }
.lb-live--dark .lb-live__label { color: #FFFFFF; }
@media (prefers-reduced-motion: reduce) { .lb-live__dot { animation: none; } }

/* ---- Form fields -------------------------------------------------- */
.lb-field { display: flex; flex-direction: column; gap: var(--lb-space-8); }
.lb-label {
  font-family: var(--lb-font-body);
  font-weight: var(--lb-fw-medium);
  font-size: 0.8125rem; /* 13px */
  color: var(--lb-ink-700);
}
.lb-input {
  font-family: var(--lb-font-body);
  font-size: var(--lb-small-size);
  color: var(--lb-text-primary);
  background: var(--lb-surface);
  border: 1px solid var(--lb-border);
  border-radius: var(--lb-radius-sm);
  padding: 11px 14px;
  outline: none;
  transition: border-color var(--lb-transition), box-shadow var(--lb-transition);
}
.lb-input::placeholder { color: var(--lb-ink-300); }
.lb-input:focus { border-color: var(--lb-accent); box-shadow: 0 0 0 3px var(--lb-focus-ring); }

/* ---- Card --------------------------------------------------------- */
.lb-card {
  background: var(--lb-surface);
  border: 1px solid var(--lb-border);
  border-radius: var(--lb-radius-lg);
  padding: var(--lb-space-24);
}

/* ---- Badges ------------------------------------------------------- */
.lb-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--lb-font-label);
  font-weight: var(--lb-fw-medium);
  font-size: 0.6875rem; /* 11px */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--lb-radius-sm);
  padding: 4px 10px;
  color: var(--lb-text-muted);
  background: var(--lb-ground-cream);
}
.lb-badge--accent { color: var(--lb-accent-hover); background: var(--lb-accent-soft); }

/* ---- Avatar chip (echoes the logo circle) ------------------------ */
.lb-avatar { position: relative; width: 44px; height: 44px; flex-shrink: 0; }
.lb-avatar__ring { position: absolute; inset: -4px; border: 2px solid var(--lb-accent); border-radius: 50%; opacity: 0.9; }
.lb-avatar__disc {
  width: 44px; height: 44px;
  background: var(--lb-ink-900);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--lb-font-display);
  font-weight: var(--lb-fw-medium);
  font-size: 18px;
  color: #FFFFFF;
}
.lb-avatar__status {
  position: absolute; right: -2px; bottom: -2px;
  width: 12px; height: 12px;
  background: var(--lb-success);
  border: 2px solid var(--lb-surface);
  border-radius: 50%;
}

/* ============================================================
   Logo lockup — the "LiveBrand.ai" mark
   Structure mirrors the approved guide:
   circle mark ("Live", Inter 300) + two concentric rings that stop
   before the "B" + "Brand" (Playfair Display 500) + ".ai".
   Size with --lb-logo-size on the .lb-logo element.
   Variants: default = B1 (white ground). Add .lb-logo--cream or
   .lb-logo--dark for B2 / B3.
   RULES: never recolor the rings independently, never stretch,
   rotate, or add shadows/gradients/outlines.
   ============================================================ */
.lb-logo {
  --lb-logo-size: 56px;
  --_circle: var(--lb-logo-size);
  --_ink: var(--lb-ground-black);        /* circle + ring ink (B1) */
  --_live: #FFFFFF;                       /* "Live" text color */
  --_brand: var(--lb-ground-black);       /* "Brand" wordmark color */
  --_ai: var(--lb-ink-300);               /* ".ai" color */
  --_ring-outer-op: 0.10;
  --_ring-inner-op: 0.25;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.lb-logo__mark {
  position: relative;
  width: var(--_circle);
  height: var(--_circle);
  flex-shrink: 0;
}
/* Ring container is clipped on the right so rings terminate before "Brand". */
.lb-logo__rings {
  position: absolute;
  top: calc(var(--_circle) * -0.29);
  bottom: calc(var(--_circle) * -0.29);
  left: calc(var(--_circle) * -0.29);
  right: -2px;
  overflow: hidden;
}
.lb-logo__ring {
  position: absolute;
  /* Center on the CIRCLE's center (0.29 offset + half the circle = 0.79),
     not the container's — the container is clipped on the right so the
     rings terminate before "Brand", which shifts its own center. */
  left: calc(var(--_circle) * 0.79); top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid var(--_ink);
}
.lb-logo__ring--outer { width: calc(var(--_circle) * 1.41); height: calc(var(--_circle) * 1.41); opacity: var(--_ring-outer-op); }
.lb-logo__ring--inner { width: calc(var(--_circle) * 1.20); height: calc(var(--_circle) * 1.20); opacity: var(--_ring-inner-op); }
.lb-logo__disc {
  position: absolute; inset: 0;
  background: var(--_ink);
  border-radius: 50%;
  display: grid; place-items: center;
}
.lb-logo__live {
  font-family: var(--lb-font-body);
  font-weight: var(--lb-fw-light);
  font-size: calc(var(--_circle) * 0.52);
  letter-spacing: -0.015em;
  color: var(--_live);
  line-height: 1;
}
.lb-logo__word {
  display: inline-flex;
  align-items: baseline;
  margin-left: 1px;
}
.lb-logo__brand {
  font-family: var(--lb-font-serif);
  font-weight: var(--lb-fw-medium);
  font-size: calc(var(--_circle) * 0.52);
  color: var(--_brand);
}
.lb-logo__ai {
  font-family: var(--lb-font-body);
  font-size: calc(var(--_circle) * 0.21);
  color: var(--_ai);
  margin-left: 3px;
}

/* B2 · Warm cream ground — circle uses Ink-900, not pure black. */
.lb-logo--cream { --_ink: var(--lb-ink-900); --_brand: var(--lb-ink-900); }

/* B3 · Pure black ground — reversed: white circle, black "Live". */
.lb-logo--dark {
  --_ink: #FFFFFF;
  --_live: var(--lb-ground-black);
  --_brand: #FFFFFF;
  --_ai: #7C756A;
  --_ring-outer-op: 0.14;
  --_ring-inner-op: 0.30;
}

/* ---- Nav bar ------------------------------------------------------ */
.lb-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--lb-border);
  border-radius: var(--lb-radius-pill);
  padding: 10px 20px;
  background: var(--lb-surface);
}
.lb-nav__links { display: flex; align-items: center; gap: 18px; }
.lb-nav__link {
  font-family: var(--lb-font-body);
  font-weight: var(--lb-fw-medium);
  font-size: 0.8125rem; /* 13px */
  color: var(--lb-text-muted);
  text-decoration: none;
}
.lb-nav__link:hover { color: var(--lb-text-primary); }