/* ============================================================
   KullGames design system — MINIMAL subset copied for Scrapbook
   (tokens + fonts + base resets + button utilities only)
   Source of truth: ../../styles.css in the KullGames DS project.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Open+Sans:wght@400;600;700&family=Caveat:wght@500;600;700&display=swap');

:root{
  /* brand */
  --kg-yellow:#FFC81F; --kg-yellow-600:#E0A800; --kg-yellow-soft:#FFF4CC; --kg-gold:#9A6A00;
  /* surfaces */
  --kg-bg:#F6F8FB; --kg-surface:#FFFFFF; --kg-line:#E4E8EE;
  /* text */
  --kg-text:#16191D; --kg-text-muted:#5C6672;
  /* signal */
  --kg-success:#1F9D55; --kg-danger:#D63A33; --kg-discord:#5865F2;
  /* shape + type */
  --kg-radius:16px; --kg-radius-sm:10px; --kg-pill:999px;
  --kg-shadow:0 8px 24px rgba(16,24,40,.08);
  --kg-shadow-y:0 6px 18px rgba(255,200,31,.45);
  --font-display:"Fredoka",system-ui,sans-serif;
  --font-body:"Open Sans",system-ui,sans-serif;
  /* scrapbook addition: handwriting for back-of-photo */
  --font-hand:"Caveat",cursive;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font-body);
  color:var(--kg-text);
  background:var(--kg-bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.12;letter-spacing:-.01em;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}
input,textarea{font-family:inherit;}

.accent{color:var(--kg-gold);}
.muted{color:var(--kg-text-muted);}

/* ---------- buttons (KullGames) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.7rem 1.4rem;border:0;border-radius:var(--kg-pill);
  font-family:var(--font-display);font-weight:600;font-size:1rem;
  transition:transform .12s ease, background .15s, box-shadow .15s, color .15s, border-color .15s;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn--primary{background:var(--kg-yellow);color:var(--on-accent);box-shadow:var(--kg-shadow-y);}
.btn--primary:hover{background:var(--kg-yellow-600);}
.btn--ghost{background:#fff;color:var(--kg-text);border:1px solid var(--kg-line);}
.btn--ghost:hover{border-color:var(--kg-yellow);color:var(--kg-gold);}
.btn--light{background:#fff;color:#1a1a00;box-shadow:var(--kg-shadow);}
.btn--sm{padding:.5rem 1rem;font-size:.9rem;}