/* API brand tokens — Arial, teal/yellow, Australian English. No em-dashes anywhere. */
:root {
  --api-teal: #007481;
  --api-teal-dark: #00525c;
  --api-yellow: #f5b800;
  --api-text: #1a1a1a;
  --api-text-muted: #555;
  --api-bg: #ffffff;
  --api-bg-subtle: #f5f7f8;
  --api-border: #d8dde0;
  --api-error: #b3261e;
  --api-warning: #b87a00;
  --api-success: #2e7d32;

  --radius: 4px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: var(--api-text);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--api-bg); }

button {
  font-family: inherit;
  font-size: 14px;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--api-teal);
  background: var(--api-teal);
  color: white;
  border-radius: var(--radius);
  cursor: pointer;
}
button:hover { background: var(--api-teal-dark); }
button:disabled { background: var(--api-border); border-color: var(--api-border); cursor: not-allowed; }
button.secondary {
  background: var(--api-bg);
  color: var(--api-teal);
}
button.secondary:hover { background: var(--api-bg-subtle); }

input, textarea {
  font-family: inherit;
  font-size: 14px;
  padding: var(--space-sm);
  border: 1px solid var(--api-border);
  border-radius: var(--radius);
  width: 100%;
}
input:focus, textarea:focus {
  outline: 2px solid var(--api-teal);
  outline-offset: -1px;
}