/* Beeline brand tokens — load after styles.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fraunces:ital,wght@1,400;1,500&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --brand-ink: #0A0A0A;
  --brand-paper: #FDFBF5;
  --brand-sand: #F4F0E6;
  --brand-surface: #FFFFFF;
  --brand-border: #E8E4D8;
  --brand-border-strong: #D4CEBD;
  --brand-text: #1A1A1A;
  --brand-text-muted: #5A5A5A;
  --brand-text-quiet: #888888;
  --brand-amber: #F5A623;
  --brand-amber-deep: #C97E00;
  --brand-amber-bright: #FAC775;
  --brand-amber-text-on: #4A2E00;
  --brand-font-ui: 'Inter', system-ui, -apple-system, sans-serif;
  --brand-font-editorial: 'Fraunces', Georgia, serif;
  --brand-font-mono: 'JetBrains Mono', 'Menlo', 'Monaco', monospace;
  --brand-radius-sm: 4px;
  --brand-radius-md: 8px;
  --brand-radius-lg: 12px;
  --brand-radius-pill: 999px;
  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
}

html[data-theme="dark"] {
  --brand-ink: #F4F0E6;
  --brand-paper: #14110D;
  --brand-sand: #1F1C17;
  --brand-surface: #2A2620;
  --brand-border: #2A2620;
  --brand-border-strong: #3A3530;
  --brand-text: #F4F0E6;
  --brand-text-muted: #B8B4A8;
  --brand-text-quiet: #888070;
  --brand-amber-deep: #FAC775;
  --brand-amber-text-on: #4A2E00;
}

.brand-agent-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-ink);
  color: var(--brand-amber);
  font-family: var(--brand-font-ui);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

.brand-agent-mark::before {
  content: 'b';
}

.brand-agent-mark--sm {
  width: 24px;
  height: 24px;
  font-size: 13px;
}

.brand-agent-mark--lg {
  width: 56px;
  height: 56px;
  font-size: 30px;
}

html[data-theme="dark"] .brand-agent-mark {
  background: var(--brand-ink);
  color: #C97E00;
}