/* =====================================================================
   STADIA GLOBAL — home page on a black canvas
   Keeps the FigureAI type and layout, but sets them on black like the
   product pages, with colored and grey sections floating as rounded bays.
   Active when <body data-theme="home-dark">. Remove that attribute (or
   this file's <link>) to return to the white home page.
   ===================================================================== */
[data-theme="home-dark"] {
  background: var(--color-absolute-black);
  color: var(--color-lab-white);
  color-scheme: dark;
}
html:has(body[data-theme="home-dark"]) { background: var(--color-absolute-black); }
[data-theme="home-dark"] ::selection { background: var(--color-lab-white); color: var(--color-absolute-black); }

/* ---------- Loader ---------- */
html [data-theme="home-dark"] .loader { background: var(--color-absolute-black); color: var(--color-lab-white); }
[data-theme="home-dark"] .loader__label { color: #8e8e93; }
[data-theme="home-dark"] .loader__track { background: #333336; }
[data-theme="home-dark"] .loader__bar { background: var(--color-lab-white); }

/* ---------- Header ---------- */
[data-theme="home-dark"] .site-header { color: var(--color-lab-white); background: rgba(0, 0, 0, 0.45); }
[data-theme="home-dark"] .site-header.is-scrolled { border-color: rgba(255, 255, 255, 0.14); background: rgba(20, 20, 22, 0.7); }
[data-theme="home-dark"] .site-nav li + li { border-left-color: rgba(255, 255, 255, 0.22); }
@media (max-width: 767px) {
  [data-theme="home-dark"] .site-nav { background: #111; color: var(--color-lab-white); border-color: #333336; }
  [data-theme="home-dark"] .site-nav li + li,
  [data-theme="home-dark"] .site-header.is-over-dark .site-nav li + li { border-top-color: #333336; }
}

/* Header flips to light over the light contact panel (the original light/dark header switch, reversed) */
[data-theme="home-dark"] .site-header.is-over-light {
  color: var(--color-figure-black); background: rgba(255, 255, 255, 0.78);
  border-color: var(--color-calibration-gray);
}
[data-theme="home-dark"] .site-header.is-over-light .site-nav li + li { border-left-color: var(--color-calibration-gray); }

/* ---------- Buttons: pill inverts to white on black ---------- */
[data-theme="home-dark"] .btn--pill { background: var(--color-lab-white); color: var(--color-absolute-black); border-color: var(--color-lab-white); }
[data-theme="home-dark"] .btn--pill:hover { background: transparent; color: var(--color-lab-white); }

/* ---------- Hero: black stage, grey photo, title stays white ---------- */
[data-theme="home-dark"] .h-hero .pin-stage { background: var(--color-absolute-black); }
/* Title starts as a white outline over the photo and fills in solid as the photo retracts
   (the dark-canvas version of the original white-to-black title change) */
[data-theme="home-dark"] .h-hero__title {
  color: color-mix(in srgb, var(--color-lab-white) calc(var(--t, 1) * 100%), transparent);
  -webkit-text-stroke: calc((1 - var(--t, 1)) * 2px) var(--color-lab-white);
}
[data-theme="home-dark"] .h-hero__more .body { color: #c7c7cc; }

/* ---------- Statement: words light up white on black ---------- */
[data-theme="home-dark"] .h-statement__text { color: var(--color-lab-white); }

/* ---------- At a glance: graphite grey bay ---------- */
[data-theme="home-dark"] .h-glance { background: var(--stadia-grey-dark); }
[data-theme="home-dark"] .h-glance .spec-rail,
[data-theme="home-dark"] .h-glance .spec-rail__row { border-color: #3a3a3c; }

/* ---------- Contact: light grey bay with dark text ---------- */
[data-theme="home-dark"] .h-contact { background: var(--stadia-grey-light); color: var(--color-figure-black); }
[data-theme="home-dark"] .h-contact .btn--pill { background: var(--color-figure-black); color: var(--color-lab-white); border-color: var(--color-figure-black); }
[data-theme="home-dark"] .h-contact .btn--pill:hover { background: var(--color-absolute-black); }
[data-theme="home-dark"] .h-contact ::selection { background: var(--color-figure-black); color: var(--color-lab-white); }

/* ---------- Footer on black ---------- */
[data-theme="home-dark"] .site-footer { border-top: 0; }
[data-theme="home-dark"] .footer-base { border-top-color: #333336; color: #8e8e93; }
[data-theme="home-dark"] .footer-base a:hover,
[data-theme="home-dark"] .motion-optin:hover { color: var(--color-lab-white); }