/*
  Midbase home theme overrides.
  Base design system (typography, colour tokens, components) is copied
  verbatim from the Iteiga reference site in /reference/css/style.css.
  This file re-themes it dark and translucent so the particle canvas
  (#page-bg, kept from the previous home.html) stays visible behind the
  content instead of being fully covered by the reference site's white
  section backgrounds.
*/

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 90px; }

body { background: transparent; }

#page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.hero-tagline {
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--color-blue-300);
  opacity: .85;
  margin: -8px 0 22px;
}

/* Re-theme every section dark + translucent, instead of alternating
   white/tint backgrounds, so the drifting particles read through. */
.section-dark {
  background: rgba(10, 23, 48, .74);
  backdrop-filter: blur(2px);
}
.hero {
  background: linear-gradient(160deg, rgba(5, 12, 26, .93) 0%, rgba(16, 37, 68, .93) 100%);
}
.card-dark {
  background: rgba(16, 37, 68, .6);
  backdrop-filter: blur(6px);
}
.layer-toggle {
  background: rgba(16, 37, 68, .55);
  border-color: rgba(255, 255, 255, .14);
}
.spec-item { background: rgba(255, 255, 255, .06); }
.case-card, .stack { border-color: rgba(255, 255, 255, .16); }
.case-step p { color: var(--color-ink-100); }
.section-dark .card-number, .card-dark .card-number { color: var(--color-blue-300); }
.site-footer { background: rgba(5, 12, 26, .88); }

.person-avatar {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.8rem;
  color: #fff;
  background: var(--color-navy-700);
}

/* Reference's flip-labels use a translucent tint (amber/green wash) meant
   for a white page background; against our dark, translucent sections
   that wash reads as murky. Swap for plain, fully opaque fills instead. */
.flip-label-old {
  color: var(--color-navy-900);
  background: #fff;
}
.flip-label-new {
  color: #fff;
  background: var(--color-blue-600);
}