/* ─────────────────────────────────────────────────────────────────────────
   CRM CATEGORY BADGE TOKENS — SINGLE SOURCE OF TRUTH for category colors.
   Linked by BOTH the mockup (_mockups/crm-list-v3-compact.html → ../crm-badge-tokens.css)
   AND the live CRM (crm-accounts.html → /crm-badge-tokens.css). Recolor HERE, one place;
   the mockup and live list stay in sync by construction.

   Why a CSS file, not platform_settings: colors are founder-changed DESIGN tokens, not
   ops settings — editing here + rsync is simpler than a DB round-trip, and a standalone
   mockup can share the exact file. (Architecture review 2026-06-13.)

   Rule: any new category MUST pass WCAG-AA contrast. Light fills (Supplier's Amazon yellow)
   use BLACK text via *-fg — model the supplier rule, don't put white text on a light fill.
   Spec/rationale: _mockups/crm-list-v3-compact.DESIGN.md §1.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --cat-personal:#87CEEB;     --cat-personal-fg:#000;    /* sky blue + black text */
  --cat-lead:#E50914;         --cat-lead-fg:#fff;        /* Netflix red */
  --cat-customer:#007AFF;     --cat-customer-fg:#fff;    /* blue */
  --cat-supplier:#f5c518;     --cat-supplier-fg:#000;    /* Amazon yellow → BLACK text */
  --cat-referral:#9a6b12;     --cat-referral-fg:#fff;    /* gold */
  --cat-shareholder:#16a34a;  --cat-shareholder-fg:#fff; /* green */
  --cat-open:#64748b;          --cat-open-fg:#fff;        /* slate grey — "not yet sorted" parking bucket */
}

/* Badge component base (consumed by the LIVE CRM, which links this file). The
   standalone mockup inlines its own em-based copy. */
.bdg  { display:inline-block; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:3px 9px; border-radius:6px; line-height:1.3; white-space:nowrap; vertical-align:middle; }
.pill { display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:2px 7px; border-radius:5px; line-height:1.3; border:1px solid #d8d0c4; color:#6b7180; background:#fff; white-space:nowrap; vertical-align:middle; }
.pill.lead:before { content:"●"; font-size:.7em; margin-right:3px; vertical-align:1px; }

/* Primary solid badge — fill + text via category class (no inline hex in JS). */
.bdg.cat-personal   { background:var(--cat-personal);    color:var(--cat-personal-fg); }
.bdg.cat-lead       { background:var(--cat-lead);        color:var(--cat-lead-fg); }
.bdg.cat-customer   { background:var(--cat-customer);    color:var(--cat-customer-fg); }
.bdg.cat-supplier   { background:var(--cat-supplier);    color:var(--cat-supplier-fg); }
.bdg.cat-referral   { background:var(--cat-referral);    color:var(--cat-referral-fg); }
.bdg.cat-shareholder{ background:var(--cat-shareholder); color:var(--cat-shareholder-fg); }
.bdg.cat-open       { background:var(--cat-open);        color:var(--cat-open-fg); }

/* Left row identity stripe. */
.hb.cat-personal    { background:var(--cat-personal); }
.hb.cat-lead        { background:var(--cat-lead); }
.hb.cat-customer    { background:var(--cat-customer); }
.hb.cat-supplier    { background:var(--cat-supplier); }
.hb.cat-referral    { background:var(--cat-referral); }
.hb.cat-shareholder { background:var(--cat-shareholder); }
.hb.cat-open        { background:var(--cat-open); }

/* Active-lead secondary pill tints to Lead red (the ● dot is structural, in the page CSS). */
.pill.lead { border:none; background:#fde2dd; color:var(--cat-lead); }

/* ── Black & White theme: one container class swaps every badge/pill to mono.
   Zero per-badge logic; survives re-renders (class lives on the outer container). ── */
.bw .bdg, .bw .pill { background:#fff !important; color:#000 !important; font-weight:800; border:1px solid #c9c2b4; }
.bw .pill.lead:before { color:#000; }