/* tokens.css — FWCS0 canonical primitive layer
   Linked BEFORE style.css in base.html.
   All member pages consume these tokens. Do not add raw status hex to templates —
   use .status-* classes or var(--status-*) instead.
*/

:root {
  /* ── Status color tokens ─────────────────────────────────────────────────── */
  --status-good:         #22c55e;          /* green-500  */
  --status-warn:         #f59e0b;          /* amber-500  */
  --status-alert:        #ef4444;          /* red-500    */
  --status-neutral:      #6b7280;          /* gray-500   */

  /* Background fill variants (for badges / chips) */
  --status-good-bg:      rgba(34,197,94,0.12);
  --status-warn-bg:      rgba(245,158,11,0.12);
  --status-alert-bg:     rgba(239,68,68,0.12);
  --status-neutral-bg:   rgba(107,114,128,0.12);

  /* Text-on-dark variants */
  --status-good-text:    #86efac;          /* green-300  */
  --status-warn-text:    #fcd34d;          /* amber-300  */
  --status-alert-text:   #fca5a5;          /* red-300    */
  --status-neutral-text: #d1d5db;          /* gray-300   */
}

/* ── Status utility classes ─────────────────────────────────────────────────── */
.status-good    { color: var(--status-good); }
.status-warn    { color: var(--status-warn); }
.status-alert   { color: var(--status-alert); }
.status-neutral { color: var(--status-neutral); }

/* Status badge classes (background + text for inline labels) */
.status-badge-good {
  background: var(--status-good-bg);
  color: var(--status-good-text);
}
.status-badge-warn {
  background: var(--status-warn-bg);
  color: var(--status-warn-text);
}
.status-badge-alert {
  background: var(--status-alert-bg);
  color: var(--status-alert-text);
}
.status-badge-neutral {
  background: var(--status-neutral-bg);
  color: var(--status-neutral-text);
}

/* ── Button trinity ──────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 0.5rem;
  background: #6366f1;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
  line-height: 1.25rem;
}
.btn-primary:hover { background: #4f46e5; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 0.5rem;
  background: transparent;
  color: #9ca3af;
  border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  text-decoration: none;
  line-height: 1.25rem;
}
.btn-secondary:hover {
  color: #e5e7eb;
  border-color: rgba(255,255,255,0.24);
}

.btn-destructive {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 0.5rem;
  background: rgba(239,68,68,0.15);
  color: #fca5a5;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
  line-height: 1.25rem;
}
.btn-destructive:hover { background: rgba(239,68,68,0.25); }