/* pay.com.au theme: the logo's blue tile and charcoal wordmark. Prism
   structure stays; the logo supplies the colour. */
:root {
  --blue: #415ca2; --sky-blue: #7caace; --charcoal: #393939;

  --bg: #f6f7fa;
  --fg: #1f2230;
  --surface-soft: #f2f4f8;
  --border: #e3e6ee;
  --dot: #dde2ec;
  --accent: var(--blue);
  --accent-soft: #eaeef7;

  --pill-bg: var(--blue);
  --pill-fg: #fff;
  /* The Prism inversion reads badly on blue, so progress is a light wash instead. */
  --fill-bg: rgba(255, 255, 255, .28);
  --fill-blend: normal;
  --logo-h: 22px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1119; --fg: #eef1f7; --surface: #141a26; --surface-soft: #1b2231; --border: #262f42; --dot: #1d2433;
    --accent: #8ea5e8; --accent-soft: #1b2744;
    --pill-bg: #5873c4;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1119; --fg: #eef1f7; --surface: #141a26; --surface-soft: #1b2231; --border: #262f42; --dot: #1d2433;
  --accent: #8ea5e8; --accent-soft: #1b2744;
  --pill-bg: #5873c4;
}

/* The wordmark's blue dots become the selection marker. */
.row[aria-current="true"]::before { width: 6px; height: 6px; top: 50%; margin-top: -3px; left: -3px; border-radius: 50%; }
.confbar .f { background: var(--blue); }
.stepper .s-dot.ok { background: var(--sky-blue); }
.about { background: var(--accent-soft); border-color: #d6ddee; }
:root[data-theme="dark"] .about { background: var(--accent-soft); border-color: var(--border); }