/* Shared button + badge styles for the UI kits — official CI palette */

.btn-primary, .btn-secondary, .btn-outline, .btn-ghost, .btn-danger {
  font-family: var(--font-sans); font-weight:600; font-size:14px;
  border:0; cursor:pointer; padding:10px 18px; border-radius:10px;
  display:inline-flex; align-items:center; gap:8px;
  transition: all 200ms cubic-bezier(0.22, 1, 0.36, 1);
  letter-spacing:-0.005em; line-height:1;
}
.btn-primary {
  background: linear-gradient(90deg, #FF4438 0%, #A606F9 100%);
  color:#fff;
  box-shadow: 0 8px 28px rgba(166,6,249,0.22), 0 2px 6px rgba(255,68,56,0.12);
}
.btn-primary:hover { filter: brightness(1.06); box-shadow: 0 10px 32px rgba(166,6,249,0.30), 0 2px 6px rgba(255,68,56,0.16); }
.btn-secondary { background: var(--brand-charcoal); color:#fff; }
.btn-secondary:hover { background:#4A3F3C; }
.btn-outline { background:#fff; color: var(--fg-1); box-shadow: inset 0 0 0 1px var(--border-default); }
.btn-outline:hover { background: var(--bg-2); }
.btn-ghost { background: transparent; color: var(--fg-1); }
.btn-ghost:hover { background: var(--bg-2); }
.btn-danger { background: var(--danger); color:#fff; }
.btn-sm { padding:6px 12px; font-size:13px; border-radius:8px; }
.btn-lg { padding:14px 24px; font-size:16px; border-radius:12px; }

.badge {
  font-family: var(--font-sans);
  font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:999px;
  display:inline-flex; align-items:center; gap:6px; letter-spacing:-0.005em;
  box-shadow: inset 0 0 0 1px rgba(55,46,44,0.06);
}
.badge .dot { width:5px; height:5px; border-radius:50%; background: currentColor; }

/* Domain badges — Climate maps to red family, People to purple family */
.b-climate { background: var(--red-50); color:#9A1F16; box-shadow: inset 0 0 0 1px rgba(154,31,22,0.10); }
.b-people  { background: var(--purple-50); color:#5B0497; box-shadow: inset 0 0 0 1px rgba(91,4,151,0.10); }

/* Status */
.b-active  { background: var(--success-bg); color: var(--success); box-shadow: inset 0 0 0 1px rgba(47,125,91,0.12); }
.b-dilig   { background: var(--warning-bg); color: var(--warning); box-shadow: inset 0 0 0 1px rgba(181,101,29,0.12); }
.b-watch   { background: var(--blue-50); color: var(--brand-blue); box-shadow: inset 0 0 0 1px rgba(0,128,255,0.12); }
.b-passed  { background: var(--danger-bg); color: var(--danger); box-shadow: inset 0 0 0 1px rgba(168,54,46,0.12); }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--brand-purple);
  outline-offset: 2px;
}

* { box-sizing: border-box; }