:root {
  --surface-0: #f4f3f0;
  --surface-1: #eeece7;
  --surface-2: #ffffff;
  --text-primary: #1c1c1a;
  --text-secondary: #5f5e5a;
  --text-muted: #8a8983;
  --text-accent: #0c447c;
  --text-danger: #791f1f;
  --text-success: #27500a;
  --text-warning: #633806;
  --bg-accent: #e6f1fb;
  --bg-warning: #faeeda;
  --border: #ddd9d0;
  --border-strong: #c7c2b6;
  --radius: 8px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-0);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
}

#root { max-width: 1100px; margin: 0 auto; padding: 24px 16px 60px; }

button {
  font-family: inherit;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: var(--radius);
  border: 0.5px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-primary);
  cursor: pointer;
}
button:hover { background: var(--surface-1); }
button:active { transform: scale(0.98); }

input, select, textarea {
  font-family: inherit;
}

a { color: var(--text-accent); }

::placeholder { color: var(--text-muted); }