/* Shared design tokens for Otto Radar -- one copy instead of duplicating
   this :root block in every template. Palette is deliberately clean/minimal
   (near-black ink, one blue accent) rather than the logo's literal
   red/green bubble-lettering -- the logo mark is used small (see
   nav-shell.css .brand-mark) rather than as the site's color system. */
:root {
  --ink: #0b0b0c;
  --ink-soft: #68686d;
  --line: #e7e7e5;
  --canvas: #f8f8fb;
  --surface: #ffffff;
  --accent: #2563eb;
  --accent-dark: #1d4ed8;
  --accent-soft: #eff6ff;
  --danger: #dc2626;
}

* { box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, "Segoe UI", sans-serif;
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }

a { color: inherit; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--ink); color: var(--surface);
  border: none; border-radius: 6px; padding: 9px 16px; font-size: 13.5px; font-weight: 500;
  cursor: pointer; transition: transform 120ms ease-out, background 160ms ease;
  font-family: inherit; text-decoration: none;
}
.btn:hover { background: #262626; }
.btn:active { transform: scale(0.97); }
.btn-accent { background: var(--accent); }
.btn-accent:hover { background: var(--accent-dark); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--canvas); border-color: var(--ink-soft); }
.btn-block { width: 100%; }

.pill {
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 13px; font-size: 12.5px; font-weight: 500; cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 120ms ease-out;
  color: var(--ink); font-family: inherit;
}
.pill:hover { border-color: var(--ink-soft); }
.pill:active { transform: scale(0.97); }
.pill.selected { background: var(--accent); border-color: var(--accent); color: #fff; }

.field-label {
  font-size: 11px; color: var(--ink-soft); text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 600;
}

input[type=text], input[type=number], input[type=email], input[type=password], select {
  padding: 9px 11px; font-size: 13.5px; border: 1px solid var(--line); border-radius: 6px;
  font-family: inherit; background: var(--surface); color: var(--ink);
}
input:focus, select:focus { outline: none; border-color: var(--accent); }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 24px 28px;
}

.error-banner {
  background: #fef2f2; border: 1px solid #fecaca; color: var(--danger);
  border-radius: 6px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px;
}