/* ==========================================================
   Dark mode: the brand's own navy, not the browser's repaint.

   Samsung Internet's dark mode ignores "color-scheme: only light" and
   repaints the page itself (amber came back brown, the white sections near
   black; decision 116). A browser leaves the page alone when the page ships
   its own dark styles, so this file is that dark version, kept inside the
   brand: the navy header and hero stay exactly as they are, the white and
   tint sections turn navy, text turns light, amber stays amber.

   Loaded last. Everything is inside one media query, so the light site is
   byte for byte what it was. The palette is redefined on :root:root (two
   pseudo-classes) so it outranks the :root block core prints inline.
   ========================================================== */
@media (prefers-color-scheme: dark) {
  :root:root {
    --ba-dark-page: #0B1829;
    --wp--preset--color--tint: #12263D;
    --wp--preset--color--text-heading: #F2F4F7;
    --wp--preset--color--text-body: #C9D2DE;
    --wp--preset--color--text-muted: #A3AFC0;
    --wp--preset--color--amber-text: #E0A63F;
    --wp--preset--color--border: #2A4466;
    --wp--preset--color--border-strong: #6B7B92;
    --wp--preset--color--alert: #FF8A80;
  }

  html {
    background: var(--ba-dark-page);
  }

  /* The two light contexts become navy grounds. Cards on them are
     navy-deep, one step lighter, the way white cards sat on tint. */
  body,
  .is-white {
    --ground: var(--ba-dark-page);
    --ground-alt: var(--wp--preset--color--tint);
    --focus-ring: var(--wp--preset--color--amber);
  }

  .is-tint {
    --ground-alt: var(--wp--preset--color--navy-deep);
    --focus-ring: var(--wp--preset--color--amber);
  }

  body {
    background: var(--ba-dark-page);
    caret-color: var(--wp--preset--color--amber);
  }

  /* White surfaces: cards, the form card and its states, the search field. */
  .ba-card,
  .ba-form-card,
  .ba-form__summary,
  .ba-form__success {
    background: var(--wp--preset--color--navy-deep);
    box-shadow: none;
  }

  .ba-form__input,
  .ba-form__select,
  .ba-form__textarea,
  .ba-search.wp-block-search .wp-block-search__inside-wrapper .wp-block-search__input {
    background: var(--wp--preset--color--navy-night);
    color: var(--wp--preset--color--text-heading);
  }

  /* Core paints the search block's wrapper white behind the field. */
  .ba-search.wp-block-search .wp-block-search__inside-wrapper {
    background: transparent;
  }

  .ba-form__input:focus,
  .ba-form__select:focus,
  .ba-form__textarea:focus {
    border-color: var(--wp--preset--color--amber);
    box-shadow: 0 0 0 3px rgba(224, 166, 63, 0.25); /* allowed rgba: the focus ring, amber at 25% on navy */
  }

  .ba-form__checkbox {
    accent-color: var(--wp--preset--color--amber);
  }

  /* Navy text that sat on white. */
  .ba-btn--outline-navy {
    border-color: var(--wp--preset--color--text-heading);
    color: var(--wp--preset--color--text-heading);
  }

  .ba-btn--outline-navy:hover {
    background: var(--wp--preset--color--amber);
    border-color: var(--wp--preset--color--amber);
    color: var(--wp--preset--color--navy-night);
  }

  /* Navy-night boxes vanish on the dark page: one step lighter. */
  .ba-step__num {
    background: var(--wp--preset--color--navy-deep);
  }

  .ba-pagination .page-numbers {
    color: var(--wp--preset--color--text-heading);
  }
}