/* Shared brand colors only. Difficulty and warning/error colors stay semantic. */
:root {
  --brand-blue: #1d4ed8;
  --brand-blue-hover: #1e40af;
  --brand-blue-soft: #eff6ff;
  --brand-blue-border: #bfdbfe;
  --brand-blue-ring: rgba(37, 99, 235, .18);
  --qa-accent: var(--brand-blue);
  --qa-soft: var(--brand-blue-soft);
}

.eyebrow,
.message:not(.error),
.stat strong,
.change-pane.after > h3 {
  color: var(--brand-blue);
}

.button.primary,
.tab.active {
  background: var(--brand-blue);
  color: #fff;
}

.button.primary:hover:not(:disabled),
.tab.active:hover:not(:disabled) {
  background: var(--brand-blue-hover);
}

.button:focus-visible,
.tab:focus-visible {
  outline: 3px solid var(--brand-blue-ring);
  outline-offset: 3px;
}

input,
select,
textarea,
[contenteditable=true] {
  accent-color: var(--brand-blue);
}

input:focus,
select:focus,
textarea:focus,
.note-editor:focus {
  border-color: var(--brand-blue);
  outline-color: var(--brand-blue-ring);
}

.stat {
  border-color: var(--brand-blue-border);
  background: linear-gradient(135deg, var(--brand-blue-soft), #fff);
}

.badge.good,
.vision-service-badge--online {
  color: var(--brand-blue);
  background: var(--brand-blue-soft);
  border-color: var(--brand-blue-border);
}

.note-editor .note-formula:hover,
.note-editor .note-formula:focus {
  background: #dbeafe;
  outline-color: #60a5fa;
}

#reasoningModes label:has(input:checked) {
  border-color: var(--brand-blue);
  background: var(--brand-blue-soft);
}

.qa-bubble.own,
.qa-preview {
  border-color: var(--brand-blue-border);
}

/* The existing login script sets success color inline; errors remain red. */
:is(#loginMessage, #changePasswordMessage)[style*="rgb(21, 128, 61)"],
:is(#loginMessage, #changePasswordMessage)[style*="#15803d"] {
  color: var(--brand-blue) !important;
}