/* Wonder Tinker — generated from tokens.json */
:root {
  --wonder-blue: #3e62da;
  --wonder-blue-pressed: #2c48b0;
  --orchid: #c965e1;
  --lilac: #eba4f4;
  --teal: #018786;
  --deep-teal: #015152;
  --aqua: #00c1d0;
  --violet: #ce93e5;
  --paper: #f8fdfd;
  --night: #10163a;
  --ink: #1f2a55;
  --highlight: var(--orchid);
  --highlight-soft: var(--lilac);
  --focus: var(--deep-teal);
  --line: #6b7193;
  --disabled-surface: #e6e9f2;
  --disabled-text: #5f6585;
  --error: #b42318;
  --error-soft: #fdecea;
  --success: var(--deep-teal);
  --success-soft: #e0eee8;
  --visited: #7b2d91;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 96px;
  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-lg: 40px;
  --radius-pill: 999px;
  --stroke-doodle: 3px;
  --stroke-focus: 3px;
  --glow-aqua: 0 0 28px 2px #00c1d047;
  --glow-aqua-bright: 0 0 40px 8px #00c1d066;
  --glow-orchid: 0 0 28px 2px #c965e147;
  --glow-orchid-bright: 0 0 40px 8px #c965e166;
  --font-display: "Grandstander", "Chalkboard SE", "Comic Sans MS", system-ui, sans-serif;
  --font-body: "Literata", Georgia, "Times New Roman", serif;
  --font-hand: "Gochi Hand", "Chalkboard SE", "Comic Sans MS", cursive;
}
.display-xl { font-family: var(--font-display); font-size: 64px; line-height: 0.95; font-weight: 800; letter-spacing: -0.5px; }
.display-lg { font-family: var(--font-display); font-size: 44px; line-height: 1; font-weight: 800; }
.heading { font-family: var(--font-display); font-size: 28px; line-height: 1.15; font-weight: 700; }
.button { font-family: var(--font-display); font-size: 16px; line-height: 1; font-weight: 700; letter-spacing: 0.5px; }
.label { font-family: var(--font-display); font-size: 14px; line-height: 1.2; font-weight: 700; letter-spacing: 1px; }
.display-xl-sm { font-family: var(--font-display); font-size: 40px; line-height: 1; font-weight: 800; }
.display-lg-sm { font-family: var(--font-display); font-size: 32px; line-height: 1.05; font-weight: 800; }
.heading-sm { font-family: var(--font-display); font-size: 24px; line-height: 1.2; font-weight: 700; }
.lead { font-family: var(--font-body); font-size: 21px; line-height: 1.5; font-weight: 400; }
.lead-sm { font-family: var(--font-body); font-size: 19px; line-height: 1.5; font-weight: 400; }
.body { font-family: var(--font-body); font-size: 17px; line-height: 1.6; font-weight: 400; }
.body-strong { font-family: var(--font-body); font-size: 17px; line-height: 1.6; font-weight: 700; }
.small { font-family: var(--font-body); font-size: 14px; line-height: 1.5; font-weight: 400; }
.quote { font-family: var(--font-body); font-size: 19px; line-height: 1.5; font-weight: 400; font-style: italic; }
.note { font-family: var(--font-hand); font-size: 24px; line-height: 1.1; font-weight: 400; }