/* ============================================================
   Follow the Drop — base tokens, typography, shared bits
   Aesthetic: national-park interpretive sign × children's
   nature picture book. Warm cream paper, forest ink, clay accents.
   ============================================================ */

:root {
  --paper:      #f7efdc;
  --paper-deep: #eee0c0;
  --paper-edge: #d9c79e;
  --ink:        #2e3a2c;
  --ink-soft:   #56624f;
  --pine:       #3e6b4e;
  --pine-deep:  #2c4f39;
  --river:      #1f7a99;
  --river-deep: #155e78;
  --sky:        #cdeaf2;
  --clay:       #c14f2c;
  --clay-deep:  #9d3c1f;
  --sun:        #f0b03a;

  --font-display: "Baloo 2", "Comic Sans MS", cursive;
  --font-body: "Andika", "Verdana", sans-serif;

  --radius-card: 18px;
  --shadow-card: 0 10px 30px rgba(30, 40, 25, 0.35);

  /* Subtle paper grain, used on every cream surface */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  font-family: var(--font-body);
  color: var(--ink);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

/* Cream "park sign" surface used by every panel */
.paper {
  background: var(--paper) var(--grain);
  border: 2px solid var(--paper-edge);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* Big friendly primary button (clay badge, like park-sign callouts) */
.btn-clay {
  font-family: var(--font-display);
  font-weight: 700;
  background: var(--clay);
  color: #fff7ea;
  border-radius: 999px;
  border-bottom: 4px solid var(--clay-deep);
  padding: 10px 20px;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.btn-clay:hover { transform: translateY(-2px) scale(1.03); filter: brightness(1.07); }
.btn-clay:active { transform: translateY(1px); border-bottom-width: 2px; }

/* Reduced motion: kill the fancy stuff */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}