/* Shared UI tokens and primitives for forum/blog pages */
:root {
  --cp-brand: #4c6b8a;
  --cp-brand-light: #6b8ca9;
  --cp-brand-hover: #3a5169;
  --cp-surface: #ffffff;
  --cp-text: #333333;
  --cp-muted: #666666;
  --cp-border: #e6e6e6;
}

.btn[disabled],
button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.cp-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--cp-border);
  border-radius: 8px;
  background: #fafbfd;
  color: var(--cp-muted);
}

.cp-loading::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #c6d4e0;
  border-top-color: var(--cp-brand);
  animation: cp-spin 0.8s linear infinite;
}

.cp-error {
  padding: 14px;
  border-radius: 8px;
  border: 1px solid #f0c2c7;
  background: #fbeaec;
  color: #842029;
}

.cp-inline-status {
  margin-top: 10px;
  font-size: 0.9em;
  color: var(--cp-muted);
}

@keyframes cp-spin {
  to {
    transform: rotate(360deg);
  }
}