/* GLOBALS — design tokens, reset, base typography, generic buttons */

:root {
  --bg:        #FDF9F6;
  --surface:   #F5F3EF;
  --ink:       #0C1020;
  --muted:     #5C6370;
  --yellow:    #FFC107;
  --yellow-dk: #E6AD00;
  --purple:    #673AB7;
  --purple-lt: #EDE7F6;
  --purple-dk: #311B92;
  --green:     #00C853;
  --green-lt:  #E8F5E9;
  --green-dk:  #009624;
  --yellow-lt: #FFF8E1;
  --white:     #FFFFFF;
  --dark:      #1A1D29;
  --dark-2:    #252836;
  --radius:    20px;
  --radius-sm: 14px;
  --shadow:    0 4px 24px rgba(12,16,32,.06);
  --shadow-lg: 0 12px 40px rgba(12,16,32,.10);
  --ease:      cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:'Plus Jakarta Sans',sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.btn {
  display:inline-flex; align-items:center; gap:8px;
  font-family:inherit; font-weight:700; font-size:.88rem;
  padding:12px 24px; border-radius:999px; border:none; cursor:pointer;
  text-decoration:none;
  transition:transform .2s var(--ease), box-shadow .2s, background .2s;
}
.btn:active { transform:scale(.98); }
.btn-yellow { background:var(--yellow); color:var(--ink); }
.btn-yellow:hover { background:var(--yellow-dk); transform:translateY(-1px); }
.btn-outline {
  background:var(--white); color:var(--ink);
  border:2px solid var(--ink); padding:10px 22px;
}
.btn-outline:hover { background:var(--ink); color:var(--white); }
.btn-outline svg { transition:transform .2s; }
.btn-outline:hover svg { transform:translateX(3px); }