/* Sofia Brand Components
 * Depends on tokens.css (load tokens.css FIRST).
 * Reusable across user UI (index.html) and admin (admin.html). */

/* ---------- Wordmark ---------- */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.08em;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tr-wordmark);
  color: var(--text);
  line-height: 1;
}
.wordmark__word {
  font-style: normal;
}
.wordmark__dot {
  width: 0.18em;
  height: 0.18em;
  border-radius: 50%;
  background: var(--terracotta);
  display: inline-block;
  transform: translateY(-0.05em);
  flex-shrink: 0;
}
.wordmark--reversed .wordmark__word { color: var(--cream); }
.wordmark--reversed .wordmark__dot  { background: var(--honey); }

/* ---------- Eyebrow (small caps metadata) ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--terracotta);
  line-height: 1.2;
}
.eyebrow--honey { color: var(--honey); }
.eyebrow--soft  { color: var(--text-soft); }

/* ---------- Pills (primary action buttons) ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border: 1.5px solid transparent;
  background: transparent;
  color: var(--text);
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
  font-family: var(--font-body);
  text-decoration: none;
}
.pill:active { transform: translateY(1px); }
.pill:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

.pill--primary {
  background: var(--terracotta);
  color: var(--cream);
  border-color: var(--terracotta);
}
.pill--primary:hover { background: var(--terracotta-deep); border-color: var(--terracotta-deep); }

.pill--honey {
  background: var(--honey);
  color: var(--forest-deep);
  border-color: var(--honey);
}
.pill--honey:hover { filter: brightness(0.95); }

.pill--secondary {
  background: transparent;
  color: var(--text-soft);
  border-color: var(--rule);
}
.pill--secondary:hover { border-color: var(--forest); color: var(--forest); }

.pill--danger {
  background: var(--danger);
  color: var(--cream);
  border-color: var(--danger);
}

.pill--sm { padding: 8px 18px; font-size: 14px; }

/* ---------- Card ---------- */
.card {
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 20px 24px;
}
.card--flat { box-shadow: none; }
.card--raised { box-shadow: var(--shadow-sm); }

/* ---------- Bubble (chat) ---------- */
.bubble {
  padding: 18px 24px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-bubble);
  line-height: 1.35;
  max-width: min(640px, 85%);
  word-wrap: break-word;
}
.bubble--sofia {
  background: var(--surface-2);
  color: var(--forest);
  border-radius: 24px 24px 24px 6px;
  align-self: flex-start;
}
.bubble--user {
  background: var(--forest);
  color: var(--cream);
  border-radius: 24px 24px 6px 24px;
  align-self: flex-end;
}
.bubble__label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  opacity: 0.75;
}
.bubble--sofia .bubble__label { color: var(--ink-soft); }
.bubble--user  .bubble__label { color: var(--honey); }

/* ---------- Tag / chip ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--sage-soft);
  color: var(--forest-deep);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
}
.tag--terra    { background: rgba(201, 122, 62, 0.18); color: var(--terracotta-deep); }
.tag--honey    { background: rgba(217, 179, 130, 0.32); color: var(--forest-deep); }
.tag--danger   { background: rgba(180, 58, 42, 0.12); color: var(--danger); }

/* ---------- Dividers ---------- */
.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 16px 0;
}