/* Tend base styles and components. Load tokens/tokens.css first. */

body {
  margin: 0;
  background: var(--snow);
  color: var(--ink);
  font: var(--text-body);
}

:focus-visible {
  outline: 3px solid var(--indigo);
  outline-offset: 2px;
}

/* Type */
.tend-display { font: var(--text-display); letter-spacing: var(--tracking-display); margin: 0; text-wrap: balance; }
.tend-headline { font: var(--text-headline); letter-spacing: var(--tracking-headline); margin: 0; text-wrap: balance; }
.tend-subhead { font: var(--text-subhead); margin: 0; }
.tend-title { font: var(--text-title); margin: 0; }
.tend-body { font: var(--text-body); margin: 0; }
.tend-body-sm { font: var(--text-body-sm); margin: 0; }
.tend-label { font: var(--text-label); }
.tend-caption { font: var(--text-caption); color: var(--dusk); }
.tend-eyebrow { font: var(--text-label); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--dusk); }
.tend-muted { color: var(--dusk); }
.tend-highlight { color: var(--indigo); }

/* Wordmark */
.tend-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.tend-logo img { width: 40px; height: 40px; }
.tend-logo span { font: 800 32px/1 var(--font-display); letter-spacing: var(--tracking-display); }

/* Buttons */
.tend-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  min-height: var(--control-height); padding: 0 22px;
  border-radius: var(--radius-pill); border: 1.5px solid transparent;
  font: 600 15px/1 var(--font-body); text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.tend-btn--primary { background: var(--indigo); color: #FFFFFF; }
.tend-btn--primary:hover { background: var(--indigo-deep); }
.tend-btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--line-control); }
.tend-btn--secondary:hover { background: var(--wash); }
.tend-btn--ghost { background: transparent; color: var(--indigo-deep); }
.tend-btn--ghost:hover { background: var(--wash); }
.tend-btn--sm { min-height: var(--control-height-sm); padding: 0 18px; font-size: 14px; }
.tend-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Inputs */
.tend-field { display: flex; flex-direction: column; gap: 6px; }
.tend-field label { font: var(--text-label); }
.tend-input {
  min-height: var(--control-height); box-sizing: border-box; padding: 0 var(--space-3);
  border: 1.5px solid var(--line-control); border-radius: var(--radius-pill);
  background: var(--snow); color: var(--ink); font: 400 15px/1.2 var(--font-body);
}
.tend-input::placeholder { color: var(--dusk); }
.tend-input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--periwinkle); }
textarea.tend-input { border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); min-height: 96px; }

/* Chips */
.tend-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill); font: var(--text-label); }
.tend-chip--lead { background: var(--wash); color: var(--dusk); }
.tend-chip--talking { background: var(--periwinkle); color: var(--indigo-deep); }
.tend-chip--proposal { background: var(--indigo); color: #FFFFFF; }
.tend-chip--won { background: var(--petal); color: var(--bloom-deep); }
.tend-chip--tool { background: var(--wash); color: var(--dusk); font: var(--text-caption); }

/* Status dot: the one place bloom shows up */
.tend-dot { width: 8px; height: 8px; border-radius: 4px; background: var(--bloom); display: inline-block; }

/* Card */
.tend-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: 18px; }

/* Avatar */
.tend-avatar { width: 48px; height: 48px; border-radius: var(--radius-pill); background: var(--periwinkle); color: var(--indigo-deep); display: inline-flex; align-items: center; justify-content: center; font: 700 16px/1 var(--font-body); flex: none; }

/* Key value grid inside a card */
.tend-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--space-2); font: var(--text-body-sm); }
.tend-meta dt { color: var(--dusk); }
.tend-meta dd { margin: 4px 0 0; font-weight: 500; }

/* Chat surface (how Tend looks inside an LLM) */
.tend-chat { display: flex; flex-direction: column; gap: 14px; }
.tend-chat__user { align-self: flex-end; max-width: 80%; padding: 12px 18px; border-radius: var(--radius-bubble); background: var(--periwinkle); color: var(--ink); }
.tend-chat__assistant { max-width: 90%; }
.tend-chat__actions { display: flex; gap: var(--space-1); flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}