/* ════════════════════════════════════════════════════════════════════════
   NAVIRA shared visual tokens — one consistent language across Scoring,
   Enrichment, Review Queue, and Sequences. Include on every page:
     <link rel="stylesheet" href="/tokens.css">
   Pair with /tokens.js for the matching render helpers.

   The point: a Segment, a bucket, and a contact status look identical
   everywhere, so Nick & Jeremy never have to re-learn the page they're on.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  /* Segment palette (A–E) — deliberately a different colour family from the
     bucket colours below so a segment is never confused with a tier. */
  --seg-a: #7c8cff;  /* indigo  */
  --seg-b: #3ddc97;  /* green   */
  --seg-c: #b78bff;  /* purple  */
  --seg-d: #ff8d6b;  /* coral   */
  --seg-e: #46c8c0;  /* teal    */
  --seg-f: #f4607e;  /* pink — proposed "1P in Decline" (Jun 11) */
}

.nv-seg[data-seg="F"] { background: var(--seg-f); }
.nv-seg-dot[data-seg="F"] { background: var(--seg-f); }

/* ── Segment badge ──────────────────────────────────────────────────────── */
.nv-seg {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.2rem; height: 1.2rem; padding: 0 .35rem;
  border-radius: .35rem; font-size: .72rem; font-weight: 800; line-height: 1;
  color: #0b0d14; flex: 0 0 auto;
}
.nv-seg[data-seg="A"] { background: var(--seg-a); }
.nv-seg[data-seg="B"] { background: var(--seg-b); }
.nv-seg[data-seg="C"] { background: var(--seg-c); }
.nv-seg[data-seg="D"] { background: var(--seg-d); }
.nv-seg[data-seg="E"] { background: var(--seg-e); }
.nv-seg[data-seg=""], .nv-seg:not([data-seg]) { background: #7b8398; }

/* A small colour dot, when a full badge is too heavy (e.g. inside dense rows) */
.nv-seg-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; vertical-align: middle; background: #7b8398; }
.nv-seg-dot[data-seg="A"] { background: var(--seg-a); }
.nv-seg-dot[data-seg="B"] { background: var(--seg-b); }
.nv-seg-dot[data-seg="C"] { background: var(--seg-c); }
.nv-seg-dot[data-seg="D"] { background: var(--seg-d); }
.nv-seg-dot[data-seg="E"] { background: var(--seg-e); }

/* ── Bucket / tier pill ─────────────────────────────────────────────────── */
.nv-bucket { display: inline-block; font-size: .68rem; font-weight: 700; padding: .08rem .45rem; border-radius: 1rem; text-transform: capitalize; }
.nv-bucket.hot        { background: rgba(255,107,107,.16); color: #ff6b6b; }
.nv-bucket.warm       { background: rgba(245,191,79,.14);  color: #f5bf4f; }
.nv-bucket.cold       { background: rgba(116,192,252,.15); color: #74c0fc; }
.nv-bucket.suppressed { background: rgba(123,131,152,.18); color: #7b8398; }

/* ── Contact / email-status pill ────────────────────────────────────────── */
.nv-contact { display: inline-block; font-size: .68rem; font-weight: 700; padding: .08rem .4rem; border-radius: 1rem; }
.nv-contact.verified { background: rgba(76,231,168,.16); color: #4ce7a8; }
.nv-contact.guessed  { background: rgba(245,191,79,.14); color: #f5bf4f; }
.nv-contact.none     { background: rgba(123,131,152,.18); color: #7b8398; }

/* ── Likely-persona tag (account-strategy archetype, heuristic) ─────────── */
.nv-persona {
  display: inline-block; margin-top: .25rem;
  font-size: .66rem; font-weight: 600; line-height: 1;
  padding: .12rem .4rem; border-radius: .35rem;
  border: 1px dashed var(--border, rgba(128,128,128,.4));
  color: var(--muted-2, #7b8398); white-space: nowrap;
  cursor: pointer; user-select: none;
  transition: border-color .12s, color .12s;
}
.nv-persona:hover, .nv-persona:focus-visible {
  border-color: var(--accent, #4ce7a8); color: var(--text, #e6e9ef);
  outline: none;
}
.nv-persona .nv-persona-q { color: var(--accent, #4ce7a8); font-weight: 700; margin-left: .1rem; }

/* ── Cross-page drill link ──────────────────────────────────────────────── */
.nv-jump { font-size: .74rem; font-weight: 600; color: var(--accent, #4ce7a8); text-decoration: none; white-space: nowrap; }
.nv-jump:hover { text-decoration: underline; }
.nv-seg-link { text-decoration: none; }
.nv-seg-link:hover .nv-seg { outline: 2px solid currentColor; outline-offset: 1px; }

/* ════════════════════════════════════════════════════════════════════════
   NAVIRA BRAND LIGHT THEME — palette lifted verbatim from navira.io
   (their :root tokens, June 12 2026):
     bay #1b325b · denim #1757b8 · dodger #2184f8 · igloo #8dc7d3 ·
     canary #e2ff65 · base text #2b3544 · grays #a0a4ab/#dbdddf/#efefef
   `html[data-theme="light"]` outranks every per-page `[data-theme="light"]`
   block, so this single file rebrands light mode on ALL pages that link
   tokens.css. Dark mode is untouched. The default theme (and the launch
   flip) lives in /theme-boot.js.
   ════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f6fb;              /* pale igloo-tinted page, like their section bg #eff4fa */
  --bg-soft: #ffffff;          /* white cards — navira.io sections are white-on-tint */
  --bg-softer: #e9f0f8;        /* inputs / inner chips */
  --text: #243349;             /* their base slate, leaned toward bay */
  --muted: #52617a;
  --muted-2: #66758e;   /* 4.6:1 on white — hint text stays AA-readable */
  --accent: #1757b8;           /* denim — their primary button blue */
  --accent-dark: #11448f;
  --border: rgba(27, 50, 91, .16);
  --hot:  #cc3a3a;             /* status colors darkened for white bg */
  --warm: #9a6a00;
  --cold: #1f6fb8;
  --disqualified: #7d8694;
  /* brand extras for page-level flourishes */
  --brand-bay: #1b325b;
  --brand-dodger: #2184f8;
  --brand-igloo: #8dc7d3;
  --brand-canary: #e2ff65;
}
/* Pages decorate <body> with dark radial gradients — kill them in light. */
html[data-theme="light"] body { background: var(--bg) !important; }

/* Component pills re-tinted for white backgrounds (the dark-theme text
   colors fail contrast on white). */
html[data-theme="light"] .nv-bucket.hot        { background: rgba(204,58,58,.12);  color: #b32f2f; }
html[data-theme="light"] .nv-bucket.warm       { background: rgba(154,106,0,.12);  color: #8a5f00; }
html[data-theme="light"] .nv-bucket.cold       { background: rgba(31,111,184,.12); color: #1b62a3; }
html[data-theme="light"] .nv-bucket.suppressed { background: rgba(110,119,135,.14); color: #5f6a7c; }
html[data-theme="light"] .nv-contact.verified  { background: rgba(21,127,90,.12);  color: #157f5a; }
html[data-theme="light"] .nv-contact.guessed   { background: rgba(154,106,0,.12);  color: #8a5f00; }
html[data-theme="light"] .nv-contact.none      { background: rgba(110,119,135,.14); color: #5f6a7c; }