/* ==========================================================================
   Binary Bliss — Design System v2.0 base layer
   Every rule is scoped beneath the page-level root `.bb-v2` (spec §3.2).
   A page without that root is untouched by this file.
   No element-level selector appears outside `.bb-v2`. No !important.
   ========================================================================== */

/* The v2 root carries its own typography + rhythm so legacy element rules
   cannot leak into v2 components. */
.bb-v2 {
  font-family: var(--bb-font-body);
  font-size: var(--bb-fs-400);
  line-height: var(--bb-lh-body);
  color: var(--bb-text-primary);
  background-color: var(--bb-surface);
  -webkit-text-size-adjust: 100%;
}

.bb-v2 *,
.bb-v2 *::before,
.bb-v2 *::after {
  box-sizing: border-box;
}

/* ---- Layout primitives -------------------------------------------------- */
.bb-v2 .bb-container {
  width: 100%;
  max-width: var(--bb-container);
  margin-inline: auto;
  padding-inline: var(--bb-space-5);
}
.bb-v2 .bb-container--narrow {
  max-width: var(--bb-container-narrow);
}
.bb-v2 .bb-section {
  padding-block: var(--bb-section-y);
}
.bb-v2 .bb-section--tight {
  padding-block: var(--bb-space-9);
}
.bb-v2 .bb-section--analytical {
  background-color: var(--bb-surface-analytical);
}
.bb-v2 .bb-section--dark {
  background-color: var(--bb-surface-dark);
  color: var(--bb-text-primary-dark);
}

.bb-v2 .bb-stack > * + * {
  margin-top: var(--bb-space-5);
}
.bb-v2 .bb-flow > * + * {
  margin-top: var(--bb-space-4);
}

/* ---- Typography -------------------------------------------------------- */
.bb-v2 .bb-display {
  font-family: var(--bb-font-display);
  font-size: var(--bb-fs-900);
  line-height: var(--bb-lh-tight);
  letter-spacing: var(--bb-ls-display);
  font-weight: var(--bb-fw-regular);
  color: var(--bb-text-primary);
  margin: 0;
}
.bb-v2 .bb-h2 {
  font-family: var(--bb-font-display);
  font-size: var(--bb-fs-1000);
  line-height: var(--bb-lh-snug);
  letter-spacing: var(--bb-ls-display);
  font-weight: var(--bb-fw-regular);
  margin: 0 0 var(--bb-space-4);
}
.bb-v2 .bb-h3 {
  font-family: var(--bb-font-body);
  font-size: var(--bb-fs-600);
  line-height: var(--bb-lh-snug);
  font-weight: var(--bb-fw-semibold);
  margin: 0 0 var(--bb-space-3);
}
.bb-v2 .bb-lead {
  font-size: var(--bb-fs-500);
  line-height: var(--bb-lh-body);
  color: var(--bb-text-secondary);
  max-width: var(--bb-measure);
  margin: 0;
}
.bb-v2 .bb-body {
  color: var(--bb-text-secondary);
  max-width: var(--bb-measure);
  margin: 0;
}
.bb-v2 .bb-label {
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-300);
  font-weight: var(--bb-fw-semibold);
  letter-spacing: var(--bb-ls-label);
  text-transform: uppercase;
  color: var(--bb-accent);
  margin: 0 0 var(--bb-space-3);
}
.bb-v2 .bb-section--dark .bb-label {
  color: var(--bb-accent-on-dark);
}
.bb-v2 .bb-section--dark .bb-lead,
.bb-v2 .bb-section--dark .bb-body {
  color: var(--bb-text-secondary-dark);
}
.bb-v2 .bb-numeral {
  font-family: var(--bb-font-display);
  font-size: var(--bb-fs-800);
  line-height: 1;
  color: var(--bb-text-primary);
}

/* ---- Focus: preserve the established 3px ring treatment ---------------- */
.bb-v2 :where(a, button, [tabindex], summary, input, select, textarea):focus-visible {
  outline: var(--bb-focus-width) solid var(--bb-focus-ring);
  outline-offset: var(--bb-focus-offset);
  border-radius: var(--bb-radius-xs);
}
.bb-v2 .bb-section--dark :where(a, button):focus-visible {
  outline-color: var(--bb-focus-ring-dark);
}
.bb-v2 main:focus {
  outline: none;
}

/* ---- Accessibility defaults live in the base layer (spec §3.2) ---------- */
.bb-v2 .bb-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.bb-v2 .bb-touch {
  min-height: var(--bb-touch-min);
}

/* ---- Motion ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .bb-v2 *,
  .bb-v2 *::before,
  .bb-v2 *::after {
    animation-duration: 0.001ms;
    animation-iteration-count: 1;
    transition-duration: 0.001ms;
    scroll-behavior: auto;
  }
}