/* Castunes in light mode.
 *
 * Chosen in Settings (or the account menu), stored on the device, and set on
 * <html data-theme="light"> before anything draws -- see listen.html. Dark is
 * the default and stays the brand's home.
 *
 * Not an inversion. The surfaces are a warm off-white with a slight lean to
 * the red, the red itself goes a shade deeper so it holds on white, and the
 * places that are a picture -- an artist's banner, the featured artist, a
 * genre header, the full-screen player, the mini player -- stay dark with
 * white type, the way every music app keeps its artwork. Those regions get
 * the dark palette back by redefining the tokens inside them, so everything
 * nested in them (track rows, buttons, menus) follows without a rule each.
 */
:root[data-theme="light"] {
  --ground:  #ECE9E8;
  --panel:   #FFFFFF;
  --s1:      #F5F2F1;
  --s2:      #EAE6E5;
  --s3:      #DBD6D5;
  --line:    #E4DFDE;
  --text:    #161212;
  --dim:     #5C5555;
  --dimmer:  #8B8382;
  --red-hi:  #B81E17;
  --red-soft: rgba(149, 6, 6, .1);
  --ok:      #1F8A57;
  color-scheme: light;
}

/* The picture regions keep the dark palette. */
:root[data-theme="light"] :is(.spot, .ahead, .ghead, .npfull, .mini, .onb, .tc-top, .gtile, .liked-tile, .hist-tile, .crop-frame) {
  --ground: #070707; --panel: #121212; --s1: #1A1A1A; --s2: #242424; --s3: #2E2E2E; --line: #2A2A2A;
  --text: #F5F5F5; --dim: #C9C2C1; --dimmer: #9a9393; --red-hi: #C4241C;
  color: var(--text); color-scheme: dark;
}
:root[data-theme="light"] .ahead::after { background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(10,8,8,.45) 50%, rgba(10,8,8,.82) 100%); }
:root[data-theme="light"] .ghead::after { background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(10,8,8,.45) 50%, rgba(10,8,8,.85) 100%); }
:root[data-theme="light"] .ahead { margin-bottom: 0; }

/* Headers tinted from the cover: the tint, washed light, fading to the page. */
:root[data-theme="light"] .phead { background: linear-gradient(180deg, color-mix(in srgb, var(--tint, #b33) 32%, #fff) 0%, rgba(255,255,255,0) 100%); }

/* Chrome */
:root[data-theme="light"] .topbar.solid { background: rgba(255,255,255,.9); box-shadow: 0 1px 0 var(--line); }
:root[data-theme="light"] :is(.histbtn, .bell) { background: rgba(22,18,18,.06); color: var(--dim); }
:root[data-theme="light"] :is(.histbtn, .bell):hover { color: var(--text); }
:root[data-theme="light"] .avatar-btn { border-color: rgba(0,0,0,.08); }
:root[data-theme="light"] .side .sblock, :root[data-theme="light"] .main, :root[data-theme="light"] .npanel { box-shadow: 0 1px 2px rgba(0,0,0,.04); }
:root[data-theme="light"] .scroller { scrollbar-color: #c9c3c2 transparent; }
:root[data-theme="light"] .slist, :root[data-theme="light"] .np-body { scrollbar-color: #c9c3c2 transparent; }

/* Buttons that were "white on dark" become "ink on light". */
:root[data-theme="light"] .btn.white, :root[data-theme="light"] .pb-play, :root[data-theme="light"] .chip.on, :root[data-theme="light"] .toast { color: #fff; }
:root[data-theme="light"] .btn.white:hover { background: #000; }
:root[data-theme="light"] .btn.line { border-color: #CFC9C8; }
:root[data-theme="light"] .btn.line:hover { border-color: var(--text); }
:root[data-theme="light"] :is(.spot, .ahead, .ghead, .npfull, .mini, .onb) .btn.white { color: #0e0e0e; }
:root[data-theme="light"] :is(.spot, .ahead, .ghead, .npfull, .mini, .onb) .btn.line { border-color: rgba(255,255,255,.55); }
:root[data-theme="light"] :is(.npfull, .mini) .pb-play, :root[data-theme="light"] .spot .chip.on { color: #0e0e0e; }
:root[data-theme="light"] .ibtn.bg { background: rgba(22,18,18,.05); }
:root[data-theme="light"] .ibtn.bg:hover { background: rgba(22,18,18,.1); }
:root[data-theme="light"] .searchbox input:focus { border-color: #b9b2b1; background: var(--panel); }
:root[data-theme="light"] .slider .rail { background: #D6D0CF; }
:root[data-theme="light"] .slider .buf { background: #c4bdbc; }
:root[data-theme="light"] .slider .knob { box-shadow: 0 1px 4px rgba(0,0,0,.35); }

/* The Home / Listen switch */
:root[data-theme="light"] .msw { background: #F1EDEC; box-shadow: inset 0 0 0 1px #E0D9D8; }
:root[data-theme="light"] .msw-opt { color: #7A6F6E; }
:root[data-theme="light"] .msw-opt:hover { color: #1a1414; }
:root[data-theme="light"] .msw-opt.on { color: #fff; }

/* Menus, dialogs, bars that float */
:root[data-theme="light"] .menu { background: #fff; border: 1px solid #E4DFDE; box-shadow: 0 18px 50px rgba(30,20,20,.18); }
:root[data-theme="light"] .menu button, :root[data-theme="light"] .menu a { color: #221c1c; }
:root[data-theme="light"] .menu button:hover, :root[data-theme="light"] .menu a:hover { background: #F3EFEE; }
:root[data-theme="light"] .menu button.menu-danger, :root[data-theme="light"] .menu button.menu-danger svg { color: #b3170f; }
:root[data-theme="light"] .menu hr { border-top-color: #EAE5E4; }
:root[data-theme="light"] .menu input { background: #F7F4F3; border-color: #DCD6D5; }
:root[data-theme="light"] .modal { background: #fff; box-shadow: 0 30px 80px rgba(30,20,20,.25); }
:root[data-theme="light"] .scrim { background: rgba(20,14,14,.45); }
:root[data-theme="light"] :is(.savebar, .early-pop) { background: #fff; border-color: #E4DFDE; box-shadow: 0 18px 50px rgba(30,20,20,.18); }
:root[data-theme="light"] .savebar span { color: var(--text); }
:root[data-theme="light"] .early-pop b { color: var(--text); }

/* Text that was "light grey on dark" */
:root[data-theme="light"] :is(.about p, .lyrics-static, .lyr.static p, .welcome p, .links-col a, .pf-prev-links span, .cm-tag.pin, .nt-t q, .nt-body, .tag-sugg button, .gchip, .gchip:hover, .stat-l:hover, .tag button:hover, .fchip button:hover, .links-col a:hover) { color: var(--text); }
:root[data-theme="light"] .lyr p { color: rgba(22,18,18,.32); }
:root[data-theme="light"] .lyr p:hover { color: rgba(22,18,18,.7); }
:root[data-theme="light"] .lyr p.past { color: rgba(22,18,18,.58); }
:root[data-theme="light"] .lyr p.now { color: var(--text); }
:root[data-theme="light"] .gchip.on, :root[data-theme="light"] .gchip.on:hover { color: #fff; }
:root[data-theme="light"] .welcome { background: linear-gradient(90deg, rgba(149,6,6,.12), rgba(149,6,6,.03)); }

/* Lines and dashed edges */
:root[data-theme="light"] :is(.adrop, .coverbox, .tadd) { border-color: #CFC9C8; }
:root[data-theme="light"] :is(.adrop.busy) { border-color: #CFC9C8; }
:root[data-theme="light"] :is(.tbtn, .cm-at, .tag-sugg button) { border-color: #D3CDCC; }
:root[data-theme="light"] .check li span, :root[data-theme="light"] .rp-dot { border-color: #BDB6B5; }
:root[data-theme="light"] :is(.sw-row, .kv) { border-top-color: rgba(22,18,18,.07); }
:root[data-theme="light"] :is(.sl-tracks, .up-note) { border-top-color: rgba(22,18,18,.08); }
:root[data-theme="light"] .chart-grid span::after { border-top-color: rgba(22,18,18,.08); }
:root[data-theme="light"] .trow .grip { color: #b5aead; }
:root[data-theme="light"] .nt-t q { border-left-color: #D3CDCC; }
:root[data-theme="light"] :is(.acard, .mfeed) { border-color: rgba(22,18,18,.06); }

/* Surfaces drawn with a literal colour */
:root[data-theme="light"] .sw { background: #CFC9C8; }
:root[data-theme="light"] .sw span { background: #fff; }
:root[data-theme="light"] .jtile { background: rgba(22,18,18,.045); }
:root[data-theme="light"] .jtile:hover { background: rgba(22,18,18,.085); }
:root[data-theme="light"] .jtile.on { background: rgba(149, 6, 6, .1); }
:root[data-theme="light"] .sleeve { background: linear-gradient(180deg, #fff, #F4F0EF); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
:root[data-theme="light"] .sl-ph { color: #b8b0af; background: repeating-linear-gradient(135deg, #F1EDEC 0 12px, #EAE6E5 12px 24px); }
:root[data-theme="light"] .ai { background: #EFEBEA; color: #4a4444; border-color: #D3CDCC; }
:root[data-theme="light"] .kindc:hover { background: #FBF1F0; }
:root[data-theme="light"] :is(.bar.zero i, .sync-prog) { background: #D6D0CF; }
:root[data-theme="light"] .pub-art .rings { background: var(--panel); }
:root[data-theme="light"] .fbadge.album, :root[data-theme="light"] .fbadge.ep { background: #161212; color: #fff; }
:root[data-theme="light"] .tc-eq { opacity: .3; }
:root[data-theme="light"] .uc-i { background: rgba(149, 6, 6, .08); }
:root[data-theme="light"] .match-ring { background: radial-gradient(closest-side, var(--s1) 78%, transparent 80% 100%), conic-gradient(var(--red-hi) calc(var(--p) * 1%), var(--s3) 0); }

/* Red-on-dark accents, a shade deeper on white */
:root[data-theme="light"] .cm-at.on, :root[data-theme="light"] .uc-i { color: var(--red-hi); }
:root[data-theme="light"] .cm-at.on { background: rgba(196, 36, 28, .1); }

/* Status colours that need more weight on white */
:root[data-theme="light"] :is(.err, .fld-e, .adrop-err, .cm-warn, .tile em.down, .stp.wait, .tr-main .bad) { color: #C62828; }
:root[data-theme="light"] :is(.ok, .stp.live, .tile em.up) { color: #1F8A57; }
:root[data-theme="light"] .stp.live { background: rgba(31, 138, 87, .1); }
:root[data-theme="light"] .stp.sched, :root[data-theme="light"] .sched-out b, :root[data-theme="light"] .sl-meta .sl-when, :root[data-theme="light"] .fchip i { color: #9A6100; }
:root[data-theme="light"] .stp.sched { background: rgba(240, 180, 60, .16); }
:root[data-theme="light"] .stp.wait { background: rgba(198, 40, 40, .08); }
:root[data-theme="light"] .rp-urgent { background: rgba(240, 180, 60, .12); border-color: rgba(200, 140, 30, .35); color: #6b4a00; }
:root[data-theme="light"] .rp-urgent b { color: #4a3300; }
:root[data-theme="light"] .move.down { color: #C62828; }

/* Phones */
@media (max-width: 760px) {
  :root[data-theme="light"] .mtabs { background: #fff; }
  :root[data-theme="light"] .mtabs a.on svg { background: rgba(0,0,0,.07); }
}

/* Switching themes eases the change rather than snapping. */
:root.theming *, :root.theming *::before, :root.theming *::after { transition: background-color .35s ease, color .35s ease, border-color .35s ease !important; }

/* "On" and hover states, restated: the light rules above are more specific
   than the dark ones they replace, so without these they would win over
   every state too -- a switch that is on would still look off. */
:root[data-theme="light"] .sw.on { background: var(--red); }
:root[data-theme="light"] :is(.adrop:hover, .adrop.over, .coverbox.over, .tadd:hover) { border-color: var(--red-hi); }
:root[data-theme="light"] .tag-sugg button:hover { border-color: var(--red-hi); }
:root[data-theme="light"] .check li.ok span { border-color: var(--ok); background: var(--ok); color: #fff; }
:root[data-theme="light"] .tbtn.on { border-color: #8f8786; background: var(--s3); color: var(--text); }
:root[data-theme="light"] .tbtn.e-t.on { background: #6f6767; border-color: #6f6767; color: #fff; }
:root[data-theme="light"] .jtile.on .jt b { color: var(--red-hi); }

/* Artist Pick, About, share and the playlist editor */
:root[data-theme="light"] .pick-wash { opacity: .14; }
:root[data-theme="light"] a.pick:hover .pick-wash { opacity: .22; }
:root[data-theme="light"] .pick-art, :root[data-theme="light"] .pe-cov-btn { box-shadow: 0 10px 24px rgba(40, 20, 20, .22); }
:root[data-theme="light"] :is(.pe-del, .pk-rm, .sh-err) { color: #C62828; }
:root[data-theme="light"] .sort-lift { box-shadow: 0 12px 30px rgba(40, 20, 20, .18), 0 0 0 1px var(--line); }

/* Countdown page and Coming soon */
:root[data-theme="light"] .cdp-hero { background: linear-gradient(180deg, color-mix(in srgb, var(--tint, #b33) 32%, #fff) 0%, rgba(255,255,255,0) 100%); }
:root[data-theme="light"] .cdp-wash { opacity: .18; }
:root[data-theme="light"] .cd-u i { color: var(--dim); }
:root[data-theme="light"] .cd-sep { color: var(--dimmer); }
:root[data-theme="light"] .cd-n { background: #1c1616; }
:root[data-theme="light"] .card .art .fo-faces .fo-face { border-color: #fff; }

/* Feature requests */
:root[data-theme="light"] :is(.rq-sched, .fchip i.wait, .feat-wait svg) { color: #9A6100; }
:root[data-theme="light"] :is(.rq-no:hover, .rq-confirm .rq-no) { color: #C62828; }
:root[data-theme="light"] .rq-play { background: #161212; color: #fff; }
:root[data-theme="light"] .rq-play.on { background: var(--red); }
:root[data-theme="light"] .song-wrap.tinted { background: linear-gradient(180deg, color-mix(in srgb, var(--tint, #b33) 32%, #fff) 0, rgba(255,255,255,0) 440px); }

/* Lyrics card and the sync screen */
:root[data-theme="light"] .lyr p { color: rgba(22,18,18,.3); }
:root[data-theme="light"] .lyr p.past { color: rgba(22,18,18,.5); }
:root[data-theme="light"] .lyr p.now { color: var(--text); }
:root[data-theme="light"] .lyr-box { background: var(--s1); }
:root[data-theme="light"] .sync-lines p { color: rgba(22,18,18,.3); }
:root[data-theme="light"] .sync-lines p.done { color: rgba(22,18,18,.6); }
:root[data-theme="light"] :is(.sync-lines p.next, .sync-lines p.next.gap i) { color: var(--text); }
/* The full-screen player stays dark in light mode: its lyrics stay light. */
:root[data-theme="light"] .npfull .lyr p { color: rgba(245,245,245,.34); }
:root[data-theme="light"] .npfull .lyr p:hover { color: rgba(245,245,245,.75); }
:root[data-theme="light"] .npfull .lyr p.past { color: rgba(245,245,245,.5); }
:root[data-theme="light"] .npfull .lyr p.now { color: #fff; }
:root[data-theme="light"] .cf-ic { background: rgba(196, 36, 28, .1); color: #C4241C; }

/* Collaborative playlists (collab.js): the people line sits on a light header. */
:root[data-theme="light"] .pc-by:hover { background: rgba(0, 0, 0, .06); }
:root[data-theme="light"] .pc-x:hover, :root[data-theme="light"] .pc-leave:hover { color: #c62828; }
:root[data-theme="light"] .pwa-glyph { color: #0a66d6; }