/* ============================================================
   MAIN.CSS
   Design tokens, reset, base typography, shared buttons/utilities.
   Loaded on every page — keep this file lean.
   ============================================================ */

:root{
  --bg:#FBF7EF;
  --bg-soft:#F2E7D3;
  --white:#FFFFFF;
  --ink:#33363B;
  --ink-soft:#83868D;
  /* signature pastel set — deliberately not pink-led, mixed evenly so no single "gendered" hue dominates */
  --mint:#8FE0C7;
  --mint-deep:#3FAE8C;
  --coral:#FFAA82;
  --coral-deep:#F2825A;
  --sky:#8FCEEA;
  --sky-deep:#4F9BC7;
  --sun:#FFC966;
  --violet:#B7A8EA;
  --violet-deep:#9483DC;
  --shadow: 0 24px 48px -28px rgba(51,54,59,0.28);
  --shadow-sm: 0 10px 24px -16px rgba(51,54,59,0.22);
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-pill: 999px;
  --ease: cubic-bezier(.32,.72,.35,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Quicksand', system-ui, sans-serif;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.display{
  font-family:'Quicksand', system-ui, sans-serif;
  font-weight:700;
  letter-spacing:-0.01em;
  margin:0;
}
em{font-style:italic;font-weight:600;color:inherit;}
a{color:inherit;}
button{font-family:inherit;}
img,svg{display:block;}
:focus-visible{outline:3px solid var(--mint-deep); outline-offset:3px; border-radius:8px;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
@media(max-width:640px){.wrap{padding:0 18px;}}

/* ---------- PAGE TRANSITION (#app-content swaps on every route change) ---------- */
#app-content.enter{animation:page-fade .5s var(--ease) both;}
@keyframes page-fade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* ---------- SCROLL REVEAL ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease), transform .7s var(--ease);}
[data-reveal].in-view{opacity:1;transform:translateY(0);}

/* ---------- SHARED BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--ink);color:var(--bg);
  padding:15px 30px;border-radius:var(--radius-pill);
  font-size:16px;font-weight:700;border:none;cursor:pointer;
  text-decoration:none;box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease-bounce), background .2s;
}
.btn:hover{transform:translateY(-3px);background:var(--mint-deep);}
.btn:active{transform:translateY(-1px) scale(0.95);}
.btn-ghost{background:var(--white);color:var(--ink);box-shadow:none;border:1.5px solid rgba(51,54,59,0.14);}
.btn-ghost:hover{background:var(--bg-soft);color:var(--ink);}
.btn-sm{padding:10px 20px;font-size:14px;}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  #app-content.enter{animation:none!important;}
  *{transition-duration:0.01ms!important;}
}