/* ==========================================================================
   Numzi shared design system  —  see docs/design-language.md
   Warm / handmade / sticker-book: cream paper, ink outlines, hard 3D shadows.
   ========================================================================== */

:root{
  --cream:#FDF6E9; --kraft:#EFE3C8; --warm:#E0CCA8; --ink:#3D2C1E; --brown:#9B6B4A;
  --orange:#E8844A; --yellow:#F5C842; --sage:#7BBF8E; --sky:#7BBFDB; --lavender:#B59FD6; --coral:#E87B7B;
  --card:#FEFAF4;
  /* darker shades for hard 3D shadows */
  --orange-d:#b85e28; --sky-d:#4fa3c7; --sage-d:#4a9e68; --lavender-d:#6B5FA8;
  --steel:#5C8FA8; --steel-d:#2e6a85; --yellow-d:#c9a820;
}
[data-theme="dark"]{
  --cream:#1C1208; --kraft:#261A0D; --warm:#4A3020; --ink:#F0E4CC; --brown:#C8A070;
  --orange:#F09460; --yellow:#F5C842; --sage:#90D4A0; --sky:#90CCE8; --lavender:#C4B4E8; --coral:#F09090;
  --card:#2A1C0E;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:'Nunito',sans-serif; background:var(--cream); color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}
a{color:inherit; text-decoration:none;}
h1,h2,h3,.display{font-family:'Fredoka One',cursive; font-weight:400;}

.container{max-width:1000px; margin:0 auto; padding:1.5rem 1.25rem 3.5rem;}

/* ─── NAV ─────────────────────────────────────────────────────────────── */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:0 2.5rem; min-height:100px; background:var(--cream);
  border-bottom:3px solid var(--warm); position:sticky; top:0; z-index:100; gap:1rem;
}
.nav-logo{line-height:0;} .nav-logo img{height:60px; display:block;}
.nav-right{display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; justify-content:flex-end;}

/* pill nav-links — each its own accent + hard shadow */
.pill{
  font-family:'Fredoka One',cursive; font-size:1.02rem; color:#fff; padding:.4rem 1.05rem;
  border-radius:10px; white-space:nowrap; border:none; cursor:pointer; display:inline-block; line-height:1.4;
}
.pill:active{transform:translateY(2px);}
.pill.games{background:var(--orange);   box-shadow:0 3px 0 var(--orange-d);}
.pill.videos{background:var(--sky);      box-shadow:0 3px 0 var(--sky-d);}
.pill.activities{background:var(--sage); box-shadow:0 3px 0 var(--sage-d);}
.pill.outcomes{background:#9B8FD6;        box-shadow:0 3px 0 var(--lavender-d);}
.pill.books{background:var(--steel);      box-shadow:0 3px 0 var(--steel-d);}
.pill.home{background:var(--yellow); color:var(--ink); box-shadow:0 3px 0 var(--yellow-d);}

/* theme toggle */
.theme-toggle{
  background:none; border:2.5px solid var(--ink); border-radius:50%;
  width:42px; height:42px; font-size:1.1rem; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.theme-toggle:hover{background:var(--warm);}

/* ─── AVATAR + MENU ───────────────────────────────────────────────────── */
.avatar-wrap{position:relative;}
.avatar{
  width:44px; height:44px; border-radius:50%; background:var(--lavender); color:#fff;
  border:2.5px solid var(--ink); font-family:'Fredoka One',cursive; font-size:1.15rem; cursor:pointer;
  box-shadow:0 3px 0 var(--lavender-d); display:flex; align-items:center; justify-content:center;
}
.avatar:active{transform:translateY(2px); box-shadow:0 1px 0 var(--lavender-d);}
.menu{
  position:absolute; right:0; top:56px; background:var(--card); border:2.5px solid var(--ink);
  border-radius:16px; min-width:200px; overflow:hidden; display:none; z-index:200; box-shadow:4px 4px 0 var(--ink);
}
.menu.open{display:block;}
.menu-head{padding:.9rem 1rem; border-bottom:2px solid var(--warm);}
.menu-head .nm{font-family:'Fredoka One',cursive; font-size:.98rem;}
.menu-head .em{color:var(--brown); font-size:.78rem; word-break:break-all;}
.menu a,.menu button{
  display:block; width:100%; text-align:left; padding:.8rem 1rem; background:none; border:none;
  font-family:'Nunito'; font-weight:800; font-size:.92rem; color:var(--ink); cursor:pointer;
}
.menu a:hover,.menu button:hover{background:var(--kraft);}

/* ─── BUTTONS ─────────────────────────────────────────────────────────── */
.btn{
  font-family:'Fredoka One',cursive; color:#fff; background:var(--orange); border:2.5px solid var(--ink);
  border-radius:12px; padding:.8rem 1.4rem; font-size:1.05rem; cursor:pointer; box-shadow:0 4px 0 var(--orange-d);
  display:inline-block;
}
.btn:active{transform:translateY(2px); box-shadow:0 2px 0 var(--orange-d);}
.btn.ghost{background:var(--kraft); color:var(--ink); box-shadow:0 4px 0 var(--warm);}
.btn.lavender{background:var(--lavender); box-shadow:0 4px 0 var(--lavender-d);}

/* ─── CARDS / BADGES ──────────────────────────────────────────────────── */
.card{background:var(--card); border:2.5px solid var(--ink); border-radius:18px; padding:1.4rem;}
.badge{
  display:inline-block; font-family:'Fredoka One',cursive; font-size:.85rem; padding:.2rem .8rem;
  border-radius:999px; border:2px solid var(--ink); background:var(--yellow); color:var(--ink);
}

/* ─── RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width:760px){
  .nav{padding:.85rem 1.1rem;}
  .nav-logo img{height:46px;}
  .pill{font-size:.88rem; padding:.35rem .8rem;}
}