/* ════════════════════════════════════════════════════════════════════════
   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) */

  /* ── Core DARK palette — single source of truth ──────────────────────────
     Was duplicated (and drifting) in every page's inline :root. Pages now
     inherit these; they keep only genuinely page-specific vars (e.g. layout
     widths). Light mode is the brand palette in html[data-theme="light"] below. */
  --bg: #0b0d14;
  --bg-soft: #141823;
  --bg-softer: #1a2030;
  --bg-card: #141826;
  --border: #232838;
  --text: #e8ecf5;
  --muted: #aeb6c8;
  --muted-2: #7b8398;
  --accent: #4ce7a8;
  --accent-dark: #2fbf88;
  --hot: #ff6b6b;
  --warm: #f5bf4f;
  --cold: #74c0fc;
  --suppressed: #6c7689;
  --disqualified: #868e96;
  --verified: #4ce7a8;
  --unverified: #f5bf4f;
  --invalid: #ff6b6b;
  --radius: 0.75rem;
  --shadow: 0 2px 12px rgba(0,0,0,.45);
  --on-accent: #0b0d14;   /* text/icon on an accent fill — near-black on the bright dark-mode green */
}

.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;
  /* Surface + status vars that were dark-only in :root — without light values
     they'd keep their dark colour in light mode (e.g. cards rendering dark navy
     on a light page). Status colours darkened to stay readable on white. */
  --bg-card: #ffffff;
  --suppressed: #5f6a7c;
  --verified: #157f5a;
  --unverified: #8a5f00;
  --invalid: #cc3a3a;
  --on-accent: #ffffff;   /* white text on the denim light-mode accent (dark text would vanish) */
  /* 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; }