/* ============================================================
   Daana — Playful Geometric Design System
   Single source of truth for tokens + reusable components.
   "Stable Grid, Wild Decoration": clean content, lively world.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  /* palette (light) */
  --bg:#FFFDF5; --fg:#1E293B; --ink:#1E293B;
  --muted:#F1F5F9; --muted-fg:#64748B;
  --accent:#8B5CF6; --accent-fg:#FFFFFF;
  --secondary:#F472B6; --tertiary:#FBBF24; --quaternary:#34D399;
  --border:#E2E8F0; --card:#FFFFFF; --input:#FFFFFF; --ring:#8B5CF6;
  /* radius + border */
  --r-sm:8px; --r-md:16px; --r-lg:24px; --r-full:9999px; --bw:2px;
  /* type */
  --font-head:"Outfit",system-ui,-apple-system,sans-serif;
  --font-body:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  /* hard "pop" shadows */
  --pop:4px 4px 0 0 var(--ink);
  --pop-lg:8px 8px 0 0 var(--ink);
  --pop-soft:8px 8px 0 0 var(--border);
  --pop-pink:8px 8px 0 0 var(--secondary);
  --bounce:cubic-bezier(0.34,1.56,0.64,1);
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  font-family:var(--font-body); color:var(--fg); background:var(--bg);
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.font-head{font-family:var(--font-head);font-weight:800;letter-spacing:-.01em}

/* ---------- textures ---------- */
.dotgrid{
  background-image:radial-gradient(var(--border) 1.5px, transparent 1.5px);
  background-size:22px 22px;
}
.dotgrid-fixed{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(30,41,59,.09) 1.5px, transparent 1.5px);
  background-size:24px 24px;}

/* ---------- confetti shapes (decorative, behind content) ---------- */
.confetti{position:absolute;z-index:0;pointer-events:none}
.shape-circle{border-radius:var(--r-full);border:var(--bw) solid var(--ink)}
.shape-pill{border-radius:var(--r-full);border:var(--bw) solid var(--ink)}
.shape-blob{border:var(--bw) solid var(--ink);
  border-radius:24px 24px 24px 4px;}

/* ---------- buttons ---------- */
.btn-candy{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-head);font-weight:800;font-size:15px;
  background:var(--accent);color:var(--accent-fg);
  border:var(--bw) solid var(--ink);border-radius:var(--r-full);
  padding:13px 22px;min-height:48px;cursor:pointer;text-decoration:none;
  box-shadow:var(--pop);
  transition:transform .25s var(--bounce), box-shadow .25s var(--bounce), background .15s;
}
.btn-candy:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 0 var(--ink)}
.btn-candy:active{transform:translate(2px,2px);box-shadow:2px 2px 0 0 var(--ink)}
.btn-candy:disabled{opacity:.55;cursor:default;transform:none;box-shadow:var(--pop)}
.btn-candy .ico{display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:var(--r-full);background:#fff;color:var(--accent)}
.btn-candy.pink{background:var(--secondary)}
.btn-candy.mint{background:var(--quaternary);color:var(--ink)}
.btn-candy.amber{background:var(--tertiary);color:var(--ink)}

.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-head);font-weight:800;font-size:15px;
  background:transparent;color:var(--fg);
  border:var(--bw) solid var(--ink);border-radius:var(--r-full);
  padding:12px 20px;min-height:46px;cursor:pointer;text-decoration:none;
  transition:background .18s var(--bounce), transform .18s var(--bounce);
}
.btn-ghost:hover{background:var(--tertiary);transform:translateY(-1px)}

/* ---------- sticker card ---------- */
.pop-card{
  background:var(--card);border:var(--bw) solid var(--ink);
  border-radius:var(--r-lg);box-shadow:var(--pop-soft);
  position:relative;
}
.pop-card.pink{box-shadow:var(--pop-pink)}
.pop-card.wiggle{transition:transform .3s var(--bounce)}
.pop-card.wiggle:hover{transform:rotate(-1deg) scale(1.02)}

/* ---------- inputs ---------- */
.field{display:block;margin-bottom:12px}
.field > label,.label{
  display:block;font-family:var(--font-head);font-weight:800;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted-fg);margin-bottom:6px;
}
.input,input.input{
  width:100%;background:var(--input);color:var(--fg);font-family:var(--font-body);
  font-size:16px;font-weight:600;border:var(--bw) solid #CBD5E1;border-radius:var(--r-sm);
  padding:13px 14px;outline:none;transition:border .15s, box-shadow .15s;
}
.input::placeholder{color:#94A3B8;font-weight:500}
.input:focus{border-color:var(--accent);box-shadow:4px 4px 0 0 var(--accent)}

/* ---------- sticker notes / chips ---------- */
.note{font-weight:700;font-size:13px;border-radius:var(--r-md);
  border:var(--bw) solid var(--ink);padding:11px 13px;}
.note.err{background:#FFE4E6;color:#9F1239}
.note.ok{background:#D1FAE5;color:#065F46}
.note.info{background:#FEF3C7;color:#92400E}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);
  font-weight:800;font-size:11px;letter-spacing:.03em;text-transform:uppercase;
  padding:5px 11px;border-radius:var(--r-full);border:var(--bw) solid var(--ink);}
.chip.amber{background:var(--tertiary);color:var(--ink)}
.chip.violet{background:var(--accent);color:#fff}
.chip.pink{background:var(--secondary);color:var(--ink)}
.chip.mint{background:var(--quaternary);color:var(--ink)}
.chip.ghost{background:#fff;color:var(--muted-fg)}

/* icon in a colored circle (never floating alone) */
.ico-badge{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--r-full);border:var(--bw) solid var(--ink);
  box-shadow:var(--pop);}
.ico-badge.violet{background:var(--accent);color:#fff}
.ico-badge.pink{background:var(--secondary);color:var(--ink)}
.ico-badge.amber{background:var(--tertiary);color:var(--ink)}
.ico-badge.mint{background:var(--quaternary);color:var(--ink)}

/* ---------- motion ---------- */
@keyframes popIn{0%{opacity:0;transform:scale(.9) translateY(10px)}100%{opacity:1;transform:none}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(3deg)}75%{transform:rotate(-3deg)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.pop-in{animation:popIn .5s var(--bounce) both}
.floaty{animation:floaty 6s ease-in-out infinite}
.hover-wiggle:hover{animation:wiggle .4s ease-in-out}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}