:root {
  --paper: #FBF3E2; --paper-2: #F4E7CC; --cream: #FFFBF2;
  --ink: #3B2A20; --ink-soft: #8A6A52;
  --jade: #6CC3AE; --jade-d: #2F8F7F; --water: #9EDFD6; --water-d: #58B9B0;
  --lotus: #F7A8C4; --lotus-d: #DD6F98;
  --gold: #E8B545; --gold-l: #FFE08A; --gold-d: #B8861E;
  --mango: #FFC857; --indigo: #2B3A67; --bat: #3C6FB6;
  --wood: #C98E5A; --wood-d: #8E5A32;
  --display: "Baloo 2", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --body: "Nunito", "Avenir Next", "Segoe UI", sans-serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--body);
  background: var(--paper);
  background-image: var(--grain), radial-gradient(circle at 10% 0%, #FDE3EC 0, transparent 40%), radial-gradient(circle at 95% 10%, #DDF3EC 0, transparent 45%);
}

button { font: inherit; color: inherit; }
button:focus-visible { outline: 3px solid var(--bat); outline-offset: 3px; }

.chip {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.85rem;
  background: var(--cream);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  box-shadow: 0 2px 8px rgba(59, 42, 32, 0.12);
}