/* Fun family theme (light, warm, playful). Loaded after style.css; overrides tokens. */
@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@500;600;700;800&display=swap");
:root,:root[data-app=family]{color-scheme:light;
  --font:"Nunito",-apple-system,system-ui,sans-serif;--head:"Fredoka","Nunito",system-ui,sans-serif;
  --bg:#fff6e8;--bg2:#fdeed6;--card:#ffffff;--card2:#fff3e0;--card3:#ffe6c2;
  --tx:#2a1e3d;--tx2:#4a3d5c;--mu:#6b5d78;--bd:rgba(90,60,20,.10);--bd2:rgba(90,60,20,.20);
  --ok:#15803d;--warn:#b45309;--bad:#c2410c;--info:#1d4ed8;
  --glass:rgba(255,250,240,.88);--shadow:0 3px 0 rgba(90,60,20,.08),0 10px 24px rgba(120,80,30,.10);
  --r-s:16px;--r:22px;--r-l:26px;--r-xl:32px;
  --ac:#ff5c8a;--ac-ink:#fff;--ac-soft:#ffe0ea;
  --p-leo:#16a34a;--p-eva:#9333ea;--p-diego:#2563eb;--p-mum:#db2777;--p-family:#ea8a00}
body{background:radial-gradient(1200px 600px at 100% -10%,#dff1ff 0,transparent 60%),radial-gradient(900px 500px at -10% 110%,#ffe3ec 0,transparent 60%),var(--bg);background-attachment:fixed;color:var(--tx);font-weight:600}
h1,h2,h3,.hero .date,.hero .clock,.wkbar h2,.cdc b,.day .dh b,.fun-greet,.login h2{font-family:var(--head);letter-spacing:0}
.mu{color:var(--mu)}
.sec{color:var(--tx2);font-family:var(--head);font-size:15px;letter-spacing:.04em}
.card,.lane,.day,.mc,.cdc{border:2px solid var(--bd);box-shadow:var(--shadow)}
.card{border-radius:var(--r-l)}
.lane{border-top-width:8px;border-top-color:var(--pc);border-radius:var(--r-l);background:color-mix(in srgb,var(--pc) 6%,#fff)}
.lane h3{font-size:22px}
.ev{background:color-mix(in srgb,var(--pc) 13%,#fff);border-left-width:6px;border-radius:14px;color:var(--tx)}
.ev .tm{color:var(--tx2)}.ev .sub{color:var(--mu)}
.ev.hol{--pc:var(--p-family)}
.flag{color:#8a3b00;background:#ffe2b8}
button{border:2px solid var(--bd);background:#fff;font-weight:700;border-radius:16px}
button.pri{background:var(--ac);color:#fff;box-shadow:0 4px 0 #d63a6a}
button.pri:active{box-shadow:0 1px 0 #d63a6a;transform:translateY(3px)}
input,select,textarea{background:#fffaf2;border:2px solid var(--bd2);color:var(--tx)}
.pchip{border-width:3px;color:var(--tx);background:#fff}
.pchip.on{background:var(--pc);color:#fff}
.fun-av{font-size:1.15em;margin-right:4px}
.dot{box-shadow:0 0 0 2px #fff}
/* hero */
.fun-greet{font-size:30px;font-weight:700;color:var(--tx);padding:18px 4px 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fun-greet small{font-family:var(--font);font-size:15px;color:var(--mu);font-weight:700}
.hero .eyebrow{color:#7a4b00;background:#ffe9b8;display:inline-block;padding:4px 12px;border-radius:99px;font-size:13px}
.hero .clock{color:var(--tx)}
.wx{background:linear-gradient(135deg,#e3f3ff,#fff4d6);border:2px solid var(--bd);border-radius:26px;padding:10px 16px;box-shadow:var(--shadow)}
.wx>div:first-child{font-size:54px!important;filter:drop-shadow(0 3px 2px rgba(0,0,0,.12))}
/* countdowns */
.cdc{border:0;color:#fff;min-width:150px;border-radius:24px;background:var(--cdbg,#ff8a3d);box-shadow:0 5px 0 rgba(0,0,0,.12)}
.cdc b{font-size:40px;color:#fff}.cdc span{color:#fff;font-weight:800}
.cdc .fun-cde{font-size:28px;float:right}
.cdc:nth-child(5n+1){--cdbg:#c2410c}.cdc:nth-child(5n+2){--cdbg:#7e22ce}.cdc:nth-child(5n+3){--cdbg:#0369a1}.cdc:nth-child(5n+4){--cdbg:#be185d}.cdc:nth-child(5n){--cdbg:#15803d}
/* week/month */
.day{border-radius:22px}.day.today{border-color:var(--ac);box-shadow:0 0 0 4px var(--ac-soft),var(--shadow)}
.day.hol,.mc.hol{background:#fff4dc}
.day .dh span{color:var(--mu)}
.mc{border-radius:14px}.mc.today{border-color:var(--ac);border-width:3px}
.mc .mi{background:color-mix(in srgb,var(--pc) 18%,#fff);color:var(--tx);font-weight:700}
.li .ck{border:3px solid var(--bd2)}.li.done .ck{background:#22c55e;border-color:#22c55e}
.step i{height:8px;background:#ffe0c0}.step i.on{background:var(--ac)}
/* nav */
.tabbar{background:var(--glass);border-top:2px solid var(--bd)}
.tabbar button,.side button{color:var(--mu);border:0;background:transparent;box-shadow:none}
.tabbar button.on,.side button.on{color:var(--ac)}
@media (min-width:900px){.side:not([hidden]){background:#fff;border-right:2px solid var(--bd)}.side button.on{background:var(--ac-soft)}}
.sheet{background:#fffaf2}
.toast{background:#2a1e3d;color:#fff;font-weight:800}
.scrim{background:rgba(60,30,10,.35)}
.src{background:#fff3e0}.src a{color:#b8174d}
/* login (CSS only) */
.login h2{color:var(--tx)}.login .logo{box-shadow:0 8px 20px rgba(120,60,200,.25)}
/* seasonal */
.fun-season{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.fun-season i{position:absolute;top:-40px;font-style:normal;font-size:26px;opacity:.55;animation:leaf 14s linear infinite}
@keyframes leaf{to{transform:translateY(110vh) rotate(360deg)}}
#shell{position:relative;z-index:1}
/* confetti */
.fun-conf{position:fixed;z-index:50;pointer-events:none;width:10px;height:14px;border-radius:3px;animation:conf 1.1s cubic-bezier(.2,.7,.4,1) forwards}
@keyframes conf{to{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}
/* evening dim (display mode only) */
body.kiosk.fun-dim{filter:brightness(.72) saturate(.9)}
.fun-set .row{margin:8px 0}.fun-set .emo{display:flex;gap:6px;flex-wrap:wrap}.fun-set .emo button{min-height:40px;padding:4px 8px;font-size:22px}.fun-set .emo button.on{border-color:var(--ac);background:var(--ac-soft)}
.pchip.on{background:color-mix(in srgb,var(--pc) 65%,#000);border-color:color-mix(in srgb,var(--pc) 65%,#000)}
:root,:root[data-app=family]{--ac:#d6266a}
button.pri{box-shadow:0 4px 0 #9e1450}
.tabbar button.on,.side button.on,button.ghost{color:#a3104a}
