/* Design tokens of the spike: 18 px text, 48 px touch targets, 4 px spacing grid. */
:root {
  --spike-font-size: 18px;
  --spike-tap: 48px;
  --spike-space-1: 4px;
  --spike-space-2: 8px;
  --spike-space-3: 12px;
  --spike-space-4: 16px;
  --spike-space-6: 24px;
  --spike-space-8: 32px;
  --spike-color-bg: #ffffff;
  --spike-color-text: #1f2328;
  --spike-color-primary: #1d4e89;
  --spike-color-banner-bg: #fff3cd;
  --spike-color-banner-text: #5c4400;
  --spike-color-banner-border: #e0b84c;
}

html {
  font-size: var(--spike-font-size);
}

body {
  background-color: var(--spike-color-bg);
  color: var(--spike-color-text);
}

a, button, .btn, input, select, textarea {
  min-height: var(--spike-tap);
}

.btn, .spike-tap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--spike-tap);
  padding: var(--spike-space-2) var(--spike-space-4);
}