/* ============================================================
   PLAYERENCE — APP CHROME EXTENSION TOKENS
   Local extension to playerence.css for surfaces that exist in
   *this* app but aren't in the canonical token sheet:
     - the dark navy top bar (kept brand-dark in both themes)
     - the translucent strip used on the page subheader
   Loaded immediately after playerence.css so `var()` lookups still
   resolve in the original cascade order. Keep this file additive
   only — never override an existing token here.

   PR 2 of the visual-refresh sequence.
   ============================================================ */

.theme-light,
:root:not(.theme-dark) {
  --bg-appbar:        var(--neutral-800);   /* #25303B  */
  --bg-appbar-hover:  var(--neutral-700);   /* #3A4754  */
  --fg-on-appbar:     #FFFFFF;
  --border-on-appbar: var(--neutral-700);

  --bg-strip:         rgba(255, 255, 255, 0.5);
}

.theme-dark {
  --bg-appbar:        var(--neutral-1000);  /* #0A0E13 — deeper navy */
  --bg-appbar-hover:  var(--neutral-800);   /* #25303B */
  --fg-on-appbar:     #FFFFFF;
  --border-on-appbar: var(--neutral-700);

  --bg-strip:         rgba(35, 45, 56, 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not(.theme-light):not(.theme-dark) {
    --bg-appbar:        #0A0E13;
    --bg-appbar-hover:  #25303B;
    --fg-on-appbar:     #FFFFFF;
    --border-on-appbar: #3A4754;
    --bg-strip:         rgba(35, 45, 56, 0.5);
  }
}