/* Crumb & Tumble — Design Tokens
   Palette extracted from logo. Warm cream base, six pastel accents,
   sage teal for anchor text & UI chrome. */

:root {
  /* Surfaces */
  --cream: #FAF1E6;
  --cream-deep: #F3E6D1;
  --cream-warm: #FDF8EF;
  --paper: #FFFDF7;

  /* Ink */
  --ink: #3A4A4A;          /* sage-inflected charcoal */
  --ink-soft: #6B7A7A;
  --ink-muted: #9BA8A6;

  /* Pastel accents (from logo) */
  --coral: #F4A896;
  --mustard: #E8C468;
  --lilac: #D4C5E2;
  --sage: #6E9B96;
  --sage-deep: #5F8A87;
  --sky: #A8C8E8;
  --pink: #F2B5BC;
  --mint: #BDDCC8;

  /* Accent tints (soft fills) */
  --coral-tint: #FBE1D8;
  --mustard-tint: #F6E8C4;
  --lilac-tint: #ECE3F2;
  --sage-tint: #D6E4E2;
  --sky-tint: #DCE8F4;
  --pink-tint: #FADDE1;

  /* Type */
  --font-display: 'Fredoka', 'Quicksand', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
  --font-script: 'Caveat', cursive;

  /* Radii */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 2px 6px rgba(95, 138, 135, 0.08);
  --shadow-md: 0 8px 28px rgba(95, 138, 135, 0.12);
  --shadow-lg: 0 20px 60px rgba(95, 138, 135, 0.16);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: inherit; }

button { font-family: inherit; cursor: pointer; }

/* Utility: wavy underline motif matching logo's hand-drawn feel */
.wavy {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 6'><path d='M0 3 Q 7.5 0 15 3 T 30 3 T 45 3 T 60 3' fill='none' stroke='%236E9B96' stroke-width='1.5' stroke-linecap='round'/></svg>");
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: 60px 6px;
  padding-bottom: 8px;
}