/* ============================================================
   BuilderBots shared design tokens (P0 status-meta consolidation).

   Namespaced --bb-* to avoid colliding with classic style.css's
   --bg/--surface/--text vars (classic pages link BOTH files) and with
   app_shell.html's --paper/--clay light-theme block.

   Section 2 hex values MUST byte-match firm/status_meta.py (resolved
   map incl. legacy aliases) — tests/unit/infra/test_status_meta.py is
   the drift gate.

   color-mix() rules always ride on a plain fallback declaration —
   pre-2023 browsers drop the whole color-mix declaration, and the
   cascade lets color-mix win where supported.
   ============================================================ */

/* ── Section 1: brand tokens (clay/ivory palette; landing.html is the
      source of truth for the un-namespaced originals) ── */
:root {
  --bb-paper: #faf9f5;
  --bb-sand: #f0eee6;
  --bb-card: #fff;
  --bb-ink: #1f1d1a;
  --bb-ink-soft: #3d3a34;
  --bb-muted: #6b675f;
  --bb-clay: #d97757;
  --bb-clay-deep: #bd5d3a;
  --bb-clay-soft: #f3e3da;
  --bb-line: rgba(31, 29, 26, .10);
  --bb-line-soft: rgba(31, 29, 26, .06);
  --bb-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --bb-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Section 2: one accent var per canonical status ── */
:root {
  --bb-status-blocked_after_retries: #d97706;
  --bb-status-pending: #64748b;
  --bb-status-created: #64748b;
  --bb-status-queued: #64748b;
  --bb-status-planning: #6366f1;
  --bb-status-in_progress: #3b82f6;
  --bb-status-running: #3b82f6;
  --bb-status-review: #06b6d4;
  --bb-status-verifying: #14b8a6;
  --bb-status-decomposed: #a855f7;
  --bb-status-plan_review: #f59e0b;
  --bb-status-blocked: #d97706;
  --bb-status-partial_merge: #f59e0b;
  --bb-status-rejected_by_qa: #f97316;
  --bb-status-done: #10b981;
  --bb-status-superseded: #10b981;
  --bb-status-failed: #e11d48;
  --bb-status-aborted: #94a3b8;
  --bb-status-skipped: #94a3b8;
  --bb-status-unknown: #6b7280;
}

/* ── Section 3a: light-theme status pill (build.html command center) ──
   Neutral solid fallback first; color-mix tint wins where supported. */
.bb-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: #f1f5f9;
  color: #334155;
  background: color-mix(in srgb, var(--bb-s, #6b7280) 13%, white);
  color: color-mix(in srgb, var(--bb-s, #6b7280) 72%, black);
}
.bb-s-blocked_after_retries { --bb-s: var(--bb-status-blocked_after_retries); }
.bb-s-pending { --bb-s: var(--bb-status-pending); }
.bb-s-created { --bb-s: var(--bb-status-created); }
.bb-s-queued { --bb-s: var(--bb-status-queued); }
.bb-s-planning { --bb-s: var(--bb-status-planning); }
.bb-s-in_progress { --bb-s: var(--bb-status-in_progress); }
.bb-s-running { --bb-s: var(--bb-status-running); }
.bb-s-review { --bb-s: var(--bb-status-review); }
.bb-s-verifying { --bb-s: var(--bb-status-verifying); }
.bb-s-decomposed { --bb-s: var(--bb-status-decomposed); }
.bb-s-plan_review { --bb-s: var(--bb-status-plan_review); }
.bb-s-blocked { --bb-s: var(--bb-status-blocked); }
.bb-s-partial_merge { --bb-s: var(--bb-status-partial_merge); }
.bb-s-rejected_by_qa { --bb-s: var(--bb-status-rejected_by_qa); }
.bb-s-done { --bb-s: var(--bb-status-done); }
.bb-s-superseded { --bb-s: var(--bb-status-superseded); }
.bb-s-failed { --bb-s: var(--bb-status-failed); }
.bb-s-aborted { --bb-s: var(--bb-status-aborted); }
.bb-s-skipped { --bb-s: var(--bb-status-skipped); }
.bb-s-unknown { --bb-s: var(--bb-status-unknown); }

/* ── Section 3b: CLASSIC DARK-THEME GAP-FILL ──
   Loaded AFTER classic/style.css in the 5 classic_* templates, so it
   AUGMENTS the byte-locked fork (firm/static/style.css == app/static/
   classic/style.css, pre-pr-check byte-gate): office.js and the classic
   Jinja templates emit raw `spa-status-pill status-<status>` /
   `task-status <status>` classes and rely entirely on CSS for color.
   ONLY statuses ABSENT from style.css are defined here — never redefine
   an existing class, so zero cascade conflict with the fork.
   Each rule carries a plain rgba background fallback before the
   color-mix one (pre-color-mix browsers keep a correct tint).
   Delete this section when the deferred firm/static/style.css +
   scripts/sync_classic_office.py classic-consolidation phase lands. */
.spa-status-pill.status-blocked_after_retries,
.task-status.blocked_after_retries {
  color: var(--bb-status-blocked_after_retries);
  background: rgba(217, 119, 6, .15);
  background: color-mix(in srgb, var(--bb-status-blocked_after_retries) 15%, transparent);
}
.spa-status-pill.status-pending,
.task-status.pending {
  color: var(--bb-status-pending);
  background: rgba(100, 116, 139, .15);
  background: color-mix(in srgb, var(--bb-status-pending) 15%, transparent);
}
.spa-status-pill.status-created {
  color: var(--bb-status-created);
  background: rgba(100, 116, 139, .15);
  background: color-mix(in srgb, var(--bb-status-created) 15%, transparent);
}
.spa-status-pill.status-queued,
.task-status.queued {
  color: var(--bb-status-queued);
  background: rgba(100, 116, 139, .15);
  background: color-mix(in srgb, var(--bb-status-queued) 15%, transparent);
}
.spa-status-pill.status-running,
.task-status.running {
  color: var(--bb-status-running);
  background: rgba(59, 130, 246, .15);
  background: color-mix(in srgb, var(--bb-status-running) 15%, transparent);
}
.spa-status-pill.status-verifying,
.task-status.verifying {
  color: var(--bb-status-verifying);
  background: rgba(20, 184, 166, .15);
  background: color-mix(in srgb, var(--bb-status-verifying) 15%, transparent);
}
.spa-status-pill.status-decomposed,
.task-status.decomposed {
  color: var(--bb-status-decomposed);
  background: rgba(168, 85, 247, .15);
  background: color-mix(in srgb, var(--bb-status-decomposed) 15%, transparent);
}
.task-status.plan_review {
  color: var(--bb-status-plan_review);
  background: rgba(245, 158, 11, .15);
  background: color-mix(in srgb, var(--bb-status-plan_review) 15%, transparent);
}
.spa-status-pill.status-partial_merge,
.task-status.partial_merge {
  color: var(--bb-status-partial_merge);
  background: rgba(245, 158, 11, .15);
  background: color-mix(in srgb, var(--bb-status-partial_merge) 15%, transparent);
}
.spa-status-pill.status-rejected_by_qa,
.task-status.rejected_by_qa {
  color: var(--bb-status-rejected_by_qa);
  background: rgba(249, 115, 22, .15);
  background: color-mix(in srgb, var(--bb-status-rejected_by_qa) 15%, transparent);
}
.spa-status-pill.status-superseded,
.task-status.superseded {
  color: var(--bb-status-superseded);
  background: rgba(16, 185, 129, .15);
  background: color-mix(in srgb, var(--bb-status-superseded) 15%, transparent);
}
.spa-status-pill.status-aborted,
.task-status.aborted {
  color: var(--bb-status-aborted);
  background: rgba(148, 163, 184, .15);
  background: color-mix(in srgb, var(--bb-status-aborted) 15%, transparent);
}
.spa-status-pill.status-skipped,
.task-status.skipped {
  color: var(--bb-status-skipped);
  background: rgba(148, 163, 184, .15);
  background: color-mix(in srgb, var(--bb-status-skipped) 15%, transparent);
}
.spa-status-pill.status-unknown,
.task-status.unknown {
  color: var(--bb-status-unknown);
  background: rgba(107, 114, 128, .15);
  background: color-mix(in srgb, var(--bb-status-unknown) 15%, transparent);
}