/* ============================================
   Kuchu-Puchu — Shared Site Styles
   ============================================ */

:root{
  --cream:#FFF9F0;
  --plum:#3D2645;
  --plum-soft:#6b4d78;
  --kuchu-red:#FF4D5E;
  --kuchu-red-dark:#E33A4B;
  --puchu-yellow:#FFCA3A;
  --puchu-yellow-dark:#F0AE12;
  --sky:#3EC6E0;
  --green:#7ED957;
  --pink:#FF6B9D;

  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --shadow-soft: 0 10px 30px rgba(61,38,69,.10);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--cream);
  font-family:'Quicksand', sans-serif;
  color:var(--plum);
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, .display{
  font-family:'Fredoka', sans-serif;
  font-weight:600;
}

a{ color:inherit; text-decoration:none; }

img, svg{ display:block; max-width:100%; }

/* ---------- Nav ---------- */
.site-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  max-width:1000px;
  margin:0 auto;
}
.site-nav .brand{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:'Fredoka', sans-serif;
  font-weight:600;
  font-size:20px;
}
.site-nav .brand svg{ width:34px; height:34px; }
.site-nav .brand .ku{ color:var(--kuchu-red); }
.site-nav .brand .pu{ color:var(--puchu-yellow-dark); }
.site-nav .links{
  display:flex;
  gap:22px;
  font-weight:600;
  font-size:14px;
}
.site-nav .links a{
  color:var(--plum-soft);
  transition: color .15s;
}
.site-nav .links a:hover,
.site-nav .links a.active{
  color:var(--kuchu-red);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  font-family:'Fredoka', sans-serif;
  font-weight:600;
  font-size:16px;
  color:#fff;
  background:var(--kuchu-red);
  border:none;
  padding:12px 30px;
  border-radius:999px;
  cursor:pointer;
  box-shadow:0 6px 0 var(--kuchu-red-dark);
  transition: transform .1s;
}
.btn:active{ transform: translateY(4px); box-shadow:0 2px 0 var(--kuchu-red-dark); }
.btn.btn-yellow{ background:var(--puchu-yellow-dark); box-shadow:0 6px 0 #c98d0d; }
.btn.btn-yellow:active{ box-shadow:0 2px 0 #c98d0d; }

/* ---------- Cards ---------- */
.card{
  background:#fff;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft);
}

/* ---------- Footer ---------- */
.site-footer{
  text-align:center;
  padding:40px 20px 30px;
  color:var(--plum-soft);
  font-size:13px;
  font-weight:600;
}
.site-footer .foot-links{
  margin-top:8px;
  display:flex;
  gap:16px;
  justify-content:center;
}

/* ---------- Utility ---------- */
.container{
  max-width:1000px;
  margin:0 auto;
  padding:0 20px;
}
.center{ text-align:center; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}