/* Light theme: palette and hand fixes on top of the generated twins (cli/light-theme.py). Loaded last on every page. */
:root{color-scheme:dark}
:root[data-theme=light]{
  color-scheme:light;
  --bg:#f5f5f7; --t1:#fff; --t2:#e8e8ed; --t3:#dcdce1; --t4:#d2d2d7;
  --sep:rgba(0,0,0,.1);
  --tx:#1d1d1f; --tx2:#424245; --tx3:#6e6e73; --tx4:#86868b;
  --blue:#0066cc; --blue2:#0071e3; --green:#248a3d; --red:#e30000; --yellow:#b25000;
}
/* pictures and video keep the dark palette: white type over a frame, as on apple.com */
:root[data-theme=light] :is(.hero,.nav.top,.promo,.gt,.pcover,.player,.ap-act,.toast,.cl .ov,.upnext,.up-next){
  --tx:#f5f5f7; --tx2:#a1a1a6; --tx3:#86868b; --tx4:#6e6e73; --sep:rgba(255,255,255,.1); --t2:#1c1c1e; --t3:#2c2c2e; --t4:#3a3a3c; --blue:#2997ff;
  color:var(--tx);
}

/* theme button: the sun offers light, the moon offers dark */
.thb .tm{display:none}
:root[data-theme=light] .thb .ts{display:none}
:root[data-theme=light] .thb .tm{display:block}
.thb svg{transition:transform .5s var(--ease)}
.thb:active svg{transform:rotate(-30deg) scale(.9)}

/* Telegram-style eclipse: the new theme grows as a circle from the button (app.js) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){z-index:2}

/* title facts row: inside .hero but drawn on the page background */
:root[data-theme=light] .hero .facts{--tx:#1d1d1f; --tx2:#424245; --tx3:#6e6e73; --tx4:#86868b; --sep:rgba(0,0,0,.1); color:var(--tx)}
/* the blurred frame glow behind pages: a soft tint on light, not a grey smear (title hero keeps its dark glow) */
:root[data-theme=light] .ambient img{filter:blur(110px) saturate(1.8) brightness(1.25)!important}
:root[data-theme=light] .ambient img.on{opacity:.38}
:root[data-theme=light] .hero ~ .ambient img.on,:root[data-theme=light] .ambient:has(~ .hero) img.on{opacity:1}

/* the account menu inside the transparent header is a light popover */
:root[data-theme=light] .nav.top .menu{--tx:#1d1d1f; --tx2:#424245; --tx3:#6e6e73; --tx4:#86868b; --sep:rgba(0,0,0,.1); color:var(--tx)}
/* profile: the cover dissolves into the page, so the name under it reads in dark type */
@media (min-width:735px){
  :root[data-theme=light] .pcover{-webkit-mask-image:linear-gradient(#000 45%,transparent 100%);mask-image:linear-gradient(#000 45%,transparent 100%)}
}