@import "https://fonts.googleapis.com/css2?family=Commissioner:wght@400;500;600;650&family=IBM+Plex+Mono:wght@400;500&display=swap";

/* src/tokens.css */
:root {
  --pewter-accent: #4a6680;
  --pewter-accent-text: #46617a;
  --pewter-paper: #ffffff;
  --pewter-ground: #f3f4f5;
  --pewter-side: #e7eaed;
  --pewter-rule: #dadde1;
  --pewter-ink: #1a1f25;
  --pewter-muted: #5f6770;
  --pewter-blue-soft: #dce3ea;
  --pewter-warning: #b4441c;
  --pewter-warning-soft: #f8e8e2;
  --pewter-radius-tight: 4px;
  --pewter-radius-control: 6px;
  --pewter-radius-surface: 8px;
  --pewter-radius-pill: 99px;
  --pewter-shadow-chat: 0 8px 26px rgba(40, 49, 58, 0.12);
  --accent: var(--pewter-accent);
  --accent-text: var(--pewter-accent-text);
  --surface: var(--pewter-paper);
  --paper: var(--pewter-paper);
  --ground: var(--pewter-ground);
  --tint: var(--pewter-side);
  --line: var(--pewter-rule);
  --ink: var(--pewter-ink);
  --muted: var(--pewter-muted);
  --soft-blue: var(--pewter-blue-soft);
  --blue-soft: var(--pewter-blue-soft);
  --soft-red: var(--pewter-warning-soft);
  --clay-soft: var(--pewter-warning-soft);
  --alert: var(--pewter-warning);
  --clay: var(--pewter-warning);
  --blue: var(--pewter-accent);
  --blue-text: var(--pewter-accent-text);
  --r4: var(--pewter-radius-tight);
  --r6: var(--pewter-radius-control);
  --r8: var(--pewter-radius-surface);
}
.pewter-button {
  border: 0;
  border-radius: var(--pewter-radius-pill);
  padding: 7px 14px;
  font: 13px / 1.5 Commissioner, sans-serif;
  cursor: pointer;
}
.pewter-button-primary {
  color: var(--pewter-paper);
  background: var(--pewter-accent);
}
.pewter-button-secondary {
  color: var(--pewter-accent-text);
  background: var(--pewter-blue-soft);
}
.pewter-button-danger {
  color: var(--pewter-warning);
  background: var(--pewter-warning-soft);
}
.pewter-menu-item {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: var(--pewter-radius-control);
  padding: 0 10px;
  color: var(--pewter-ink);
  background: transparent;
  font: 13px / 1.5 Commissioner, sans-serif;
  text-align: left;
  cursor: pointer;
}
.pewter-menu-item.is-active {
  color: var(--pewter-accent-text);
  background: var(--pewter-paper);
  box-shadow: 0 1px 8px rgba(51, 62, 72, 0.07);
}
.pewter-icon {
  width: 17px;
  height: 17px;
  flex: none;
}
.pewter-menu-item .pewter-icon {
  color: var(--pewter-accent-text);
}
.pewter-chat-bar {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--pewter-rule);
  border-radius: var(--pewter-radius-pill);
  padding: 6px 7px 6px 18px;
  background: var(--pewter-paper);
  box-shadow: var(--pewter-shadow-chat);
}
.pewter-chat-bar input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font: 13px / 1.5 Commissioner, sans-serif;
}
.pewter-chat-bar button {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--pewter-paper);
  background: var(--pewter-accent);
}
.pewter-card-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pewter-card-list > li {
  border: 1px solid var(--pewter-rule);
  border-radius: var(--pewter-radius-surface);
  padding: 12px;
  background: var(--pewter-paper);
}
.pewter-tag {
  display: inline-flex;
  border-radius: var(--pewter-radius-pill);
  padding: 3px 8px;
  color: var(--pewter-accent-text);
  background: var(--pewter-blue-soft);
  font: 13px / 1.5 Commissioner, sans-serif;
}
.pewter-chat-bubble {
  width: max-content;
  max-width: 86%;
  border-radius: 15px;
  padding: 9px 13px;
  font: 13px / 1.5 Commissioner, sans-serif;
}
.pewter-chat-bubble-steven {
  margin-left: auto;
  color: var(--pewter-paper);
  background: var(--pewter-accent);
}
.pewter-chat-bubble-frank {
  color: var(--pewter-ink);
  background: var(--pewter-ground);
}
.pewter-alert {
  display: grid;
  gap: 3px;
  border-radius: var(--pewter-radius-control);
  padding: 12px;
  color: #74311a;
  background: var(--pewter-warning-soft);
  font: 13px / 1.45 Commissioner, sans-serif;
}
.pewter-button:focus-visible,
.pewter-menu-item:focus-visible,
.pewter-chat-bar:focus-within {
  outline: 2px solid var(--pewter-accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto;
    transition: none;
  }
}