/* Public Pulse — shared low-fidelity design tokens.
   Both products import this, then add their own layout on top. */

:root {
  --pp-bg: #fafaf9;
  --pp-surface: #ffffff;
  --pp-border: #d6d3d1;
  --pp-text: #1c1917;
  --pp-text-muted: #78716c;

  --pp-green: #16a34a;
  --pp-green-bg: #dcfce7;
  --pp-red: #dc2626;
  --pp-red-bg: #fee2e2;
  --pp-amber: #d97706;
  --pp-amber-bg: #fef3c7;

  --pp-accent: #1c1917;
  --pp-radius: 10px;
  --pp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--pp-font);
  background: var(--pp-bg);
  color: var(--pp-text);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.pp-card {
  background: var(--pp-surface);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius);
}

.pp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
}

.pp-badge.status-available { background: var(--pp-green-bg); color: var(--pp-green); }
.pp-badge.status-in_use    { background: var(--pp-red-bg);   color: var(--pp-red); }
.pp-badge.status-uncertain { background: var(--pp-amber-bg); color: var(--pp-amber); }

.pp-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.pp-dot.status-available { background: var(--pp-green); }
.pp-dot.status-in_use    { background: var(--pp-red); }
.pp-dot.status-uncertain { background: var(--pp-amber); }

.pp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border-radius: var(--pp-radius);
  border: 1px solid var(--pp-accent);
  background: var(--pp-accent);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.pp-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.pp-btn.secondary {
  background: transparent;
  color: var(--pp-text);
  border: 1px solid var(--pp-border);
}

.pp-notice {
  padding: 10px 14px;
  border-radius: var(--pp-radius);
  border: 1px dashed var(--pp-border);
  color: var(--pp-text-muted);
  font-size: 13px;
}