/* Appearance. theme.js sets data-theme on <html> to "light" or "dark".
   Dark mode only swaps the color tokens from app.css, so a restyle keeps working
   as long as it sticks to the tokens (and gives them dark values here). */
:root[data-theme="dark"]{
--bg:#1A130E;--bg0:rgba(26,19,14,0);--card:#2A2018;--line:#3D3026;--line2:#564535;--ink:#F7ECDD;--muted:#B8A18B;--soft:#211913;
--bananasoft:#3A3014;--pink:#FF5C93;--pinksoft:#3B1A27;--pinkink:#FF9EC0;--mint:#3CC6A5;--mintsoft:#15352C;--mintink:#83E2C8;--cherry:#FF6B80;
--onink:#1A130E;
--shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.25);--lift:0 12px 32px rgba(0,0,0,.5);
color-scheme:dark}

/* Things that sit on banana yellow keep dark text in both modes. */
.ohero,.tile.owed,.prow .n b .you{color:var(--onbanana)}
.tile.owed small,.tile.owed em{color:var(--onbanana)}
.ohero .bar .a{background:var(--onbanana)}
.ohero .btn.primary,.ohero button.primary{background:var(--onbanana);border-color:var(--onbanana);color:#fff}
.ohero.calm{color:var(--ink)}
.ohero.calm .bar .a{background:var(--ink)}
.ohero.oweh{color:#fff}

:root[data-theme="dark"] .chip.bad{background:#40181F}
:root[data-theme="dark"] .tile.owe{border-color:#5A2238}
:root[data-theme="dark"] .item .chk{border-color:#6A5745}
:root[data-theme="dark"] .sheetbg{background:rgba(0,0,0,.55)}
:root[data-theme="dark"] .ohero img,:root[data-theme="dark"] .hero img{filter:drop-shadow(0 4px 10px rgba(0,0,0,.25))}
:root[data-theme="dark"] .brand span{text-shadow:2px 2px 0 #7A5A00}

/* app.css predates dark mode and hardcodes white in a few places. These point them at tokens.
   (Same selectors as app.css, so they win by loading later.) */
:root{--onink:#fff;--onbanana:#2B1B10;--bg0:rgba(255,247,234,0)}
button,.btn,input,select,.bills a,.tabs button[aria-selected="true"],.item .step button,.dockcard,.pick button,.bd,.tile,.hist{background:var(--card)}
.tabs button{background:none}
.asbar button{background:var(--card);border-color:var(--card)}
.av.sm{border-color:var(--card)}
button.primary,.btn.primary,.pill.dark,.item.on .chk,.toast,.sq .tag.payer{color:var(--onink)}
.item.on .chk{background:var(--ink)}
button.primary,.btn.primary{background:var(--ink)}
button.pinkb,.btn.pinkb{background:var(--pink)}
.btn.venmo{background:#3D95CE}.btn.cashapp{background:#00D64F}.btn.apple{background:#111}
button.link{background:none}
.dock{background:linear-gradient(var(--bg0),var(--bg) 22%)}
.tile.owed{background:var(--banana)}
.tile.owe{background:var(--pinksoft)}
.seg button[aria-pressed="true"],.segsm button[aria-pressed="true"]{background:var(--pinksoft)}
.asbar button{color:var(--ink)}
.sq .tag.pend{color:var(--onbanana)}