/* Neutral, tokenized theme. The joyful guinea-pig brand is applied in M6 by
   overriding these tokens — components reference tokens, never hard-coded values
   (Design Brief §9, D-22). */
:root {
  --color-bg: #fbf7f0;
  --color-surface: #ffffff;
  --color-text: #2b2a28;
  --color-muted: #6b6862;
  --color-border: #e4ddd1;
  --color-primary: #2b2a28; /* neutral now; tangerine in M6 */
  --color-primary-text: #ffffff;
  --color-ok: #2f7d4f;
  --color-err: #b3402f;
  --radius: 10px;
  --space: 16px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
}
main { max-width: 480px; margin: 0 auto; padding: calc(var(--space) * 2); }
h1 { font-size: 1.5rem; }
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: calc(var(--space) * 1.5);
}
label { display: block; margin: var(--space) 0 4px; font-weight: 600; font-size: 0.9rem; }
input[type="text"], input[type="email"] {
  width: 100%; padding: 10px; border: 1px solid var(--color-border);
  border-radius: var(--radius); font-size: 1rem; background: var(--color-bg);
}
.checkbox { display: flex; gap: 8px; align-items: flex-start; margin: var(--space) 0; font-weight: 400; }
button {
  margin-top: var(--space); width: 100%; padding: 12px; border: 0;
  border-radius: var(--radius); background: var(--color-primary);
  color: var(--color-primary-text); font-size: 1rem; font-weight: 600; cursor: pointer;
}
.muted { color: var(--color-muted); font-size: 0.85rem; }
.ok { color: var(--color-ok); }
.err { color: var(--color-err); }
#result { margin-top: var(--space); }