@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400..900&family=Nunito+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');

/* ===== Beginner Builders Academy — shared design system ===== */
:root{
  --cream:#FFF8F3; --cream-2:#FDEFE7; --ink:#171717; --pink:#F43F72; --pink-soft:#FCE1E8;
  --aqua:#39C6BE; --aqua-soft:#DBF4F2; --green:#49B978; --lav:#A99AF8;
  --card:#ffffff; --muted:#8b8079; --line:#efe1d6;
  --shadow:0 10px 30px rgba(180,120,110,.10);
  --shadow-lift:0 18px 44px rgba(180,120,110,.16);
  --r-lg:26px; --r-md:18px; --r-sm:12px;
  --display:"Fraunces", Georgia, "Times New Roman", serif;
  --body:"Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bee-url:url('/bea.png');
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --cream:#1d1917; --cream-2:#262019; --ink:#f4ece5; --card:#28221e;
    --muted:#b0a498; --line:#3a322c; --pink-soft:#40232c; --aqua-soft:#1f322f;
    --shadow:0 12px 34px rgba(0,0,0,.35); --shadow-lift:0 20px 48px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --cream:#1d1917; --cream-2:#262019; --ink:#f4ece5; --card:#28221e;
  --muted:#b0a498; --line:#3a322c; --pink-soft:#40232c; --aqua-soft:#1f322f;
  --shadow:0 12px 34px rgba(0,0,0,.35); --shadow-lift:0 20px 48px rgba(0,0,0,.45);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;}
body{font-family:var(--body); background:var(--cream); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:var(--display); line-height:1.12; text-wrap:balance; margin:0; font-weight:600; letter-spacing:-.01em;}
a{color:inherit;}
img{max-width:100%;}
.wrap{max-width:1080px; margin:0 auto; padding-inline:20px;}

/* Bea icon — a square element painted with the hosted PNG */
.bee{display:inline-block; background:var(--bee-url) center/contain no-repeat; aspect-ratio:1/1; flex-shrink:0; width:40px;}

/* Buttons */
.btn{font-family:var(--body); font-weight:800; font-size:.98rem; border:none; border-radius:999px; padding:13px 24px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; transition:transform .12s ease;}
.btn:hover{transform:translateY(-2px);}
.btn:focus-visible{outline:3px solid var(--aqua); outline-offset:2px;}
.btn.primary{background:var(--pink); color:#fff; box-shadow:0 8px 20px rgba(244,63,114,.30);}
.btn.aqua{background:var(--aqua); color:#07302e; box-shadow:0 8px 20px rgba(57,198,190,.28);}
.btn.ghost{background:transparent; color:var(--ink); border:2px solid var(--line);}
.btn.sm{padding:9px 16px; font-size:.86rem;}
.btn:disabled{opacity:.55; cursor:default; transform:none;}
@media (prefers-reduced-motion: reduce){ .btn:hover{transform:none;} }

/* Eyebrow / labels */
.eyebrow{font-family:var(--body); font-weight:800; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--aqua); margin:0 0 12px;}

/* App nav (logged-in pages) */
.appnav{position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--cream) 90%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.appnav .bar{display:flex; align-items:center; gap:12px; padding:12px 0; max-width:1080px; margin:0 auto; padding-inline:20px;}
.lockup{display:flex; align-items:center; gap:10px; text-decoration:none; background:none; border:none; padding:0; cursor:pointer;}
.lockup .bee{width:40px;}
.lockup .word{display:flex; flex-direction:column; align-items:flex-start; line-height:1;}
.lockup .word b{font-family:var(--body); font-weight:800; font-size:1.06rem; letter-spacing:-.01em; color:var(--ink);}
.lockup .word span{font-family:var(--body); font-weight:700; font-size:.58rem; letter-spacing:.26em; text-transform:uppercase; color:var(--pink); margin-top:3px;}
.navspace{margin-left:auto;}
.navlink{font-family:var(--body); font-weight:700; font-size:.9rem; color:var(--muted); text-decoration:none; background:none; border:none; cursor:pointer; padding:9px 13px; border-radius:999px;}
.navlink:hover{color:var(--ink);}
.navlink.active{color:var(--ink); background:var(--card); box-shadow:var(--shadow);}
.navlink.signout{border:1px solid var(--line);}

/* Footer (every page) */
.site-foot{border-top:1px solid var(--line); background:var(--cream-2); padding-block:26px; margin-top:40px;}
.site-foot .foot-inner{max-width:1080px; margin:0 auto; padding-inline:20px; display:flex; align-items:center; gap:14px;}
.site-foot .bee{width:34px;}
.site-foot p{margin:0; font-size:.92rem; color:var(--muted); line-height:1.5;}
.site-foot a{color:var(--pink); font-weight:800; text-decoration:none;}
.site-foot a:hover{text-decoration:underline;}

/* Cards + form primitives */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow); padding:22px;}
label{display:block; font-size:.8rem; font-weight:800; margin:14px 0 6px;}
label .opt{font-weight:600; color:var(--muted); text-transform:none;}
input[type=text], input[type=email], input[type=password], select{width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:12px; font-size:1rem; font-family:inherit; background:var(--cream); color:var(--ink);}
input:focus, select:focus{outline:2px solid var(--aqua); border-color:var(--aqua);}
.msg{margin-top:14px; font-size:.9rem; min-height:1.1em;}
.msg.ok{color:var(--green);}
.msg.err{color:var(--pink);}
.chip{display:inline-block; background:transparent; border:1.5px solid var(--line); border-radius:999px; padding:8px 13px; font-size:.82rem; font-weight:700; color:var(--ink);}
.tag{display:inline-block; font-size:.68rem; font-weight:800; color:var(--aqua); border:1px solid var(--aqua); border-radius:6px; padding:2px 7px;}

@media (max-width:720px){
  .appnav .navlink.hide-sm{display:none;}
}