/*
 * The Tippio palette — the one source for the whole web (content pages, the
 * Tipper game, the landing) and mirrored from the iOS app. Names are the
 * app's own. Light values on :root; dark values under an explicit
 * [data-theme="dark"] and, for the un-stamped "system" state, under
 * prefers-color-scheme guarded so an explicit light choice still wins.
 *
 * Apps map their own role names (--bg, --panel…) onto these; nothing here
 * should be app-specific.
 */
:root {
  --app-background: #FCFCFC;
  --app-text: #00122A;
  --titles: #5A7184;
  --icons: #89D6FB;
  --logo: #029CEA;
  --selected-category: #8C52FF;
  --tab-bar-color: #8C52FF;
  --selected-frames: #D4EFFB;
  --frames-and-capsules: #E9F6FD;
  --menu-pop-up: #F4FAFF;
  --success: #AAE365;
  --errors: #E36570;
  --warning: #F0A93B;
  --always-dark-text-color: #00122A;
  --header-border: rgba(37, 86, 150, 0.16);
  --outline-soft: rgba(2, 156, 234, 0.24);
  --shadow-card: 0 16px 30px rgba(12, 40, 83, 0.11);
  --font-nav: "Manrope", "Avenir Next", "Segoe UI", sans-serif;
}
:root[data-theme="dark"] {
  --app-background: #00122A;
  --app-text: #FCFCFC;
  --titles: #8FA6B8;
  --selected-frames: #255696;
  --frames-and-capsules: #042A5D;
  --menu-pop-up: #0D2D4D;
  --tab-bar-color: #89D6FB;
  --header-border: rgba(137, 214, 251, 0.2);
  --outline-soft: rgba(137, 214, 251, 0.32);
  --shadow-card: 0 18px 34px rgba(0, 12, 30, 0.58);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --app-background: #00122A;
    --app-text: #FCFCFC;
    --titles: #8FA6B8;
    --selected-frames: #255696;
    --frames-and-capsules: #042A5D;
    --menu-pop-up: #0D2D4D;
    --tab-bar-color: #89D6FB;
    --header-border: rgba(137, 214, 251, 0.2);
    --outline-soft: rgba(137, 214, 251, 0.32);
    --shadow-card: 0 18px 34px rgba(0, 12, 30, 0.58);
  }
}