/* Real Estate Outreach dashboard theme authority.
   The base branch is dark; [data-theme="light"] overrides the same global palette.
   New screens consume these tokens directly instead of declaring page-local palettes. */

:root{
  --bg:#0b1020; --panel:#121a30; --panel2:#0f1730; --line:#23304f;
  --ink:#e8edf7; --muted:#8da2c8; --muted2:#5f72a0;
  --green:#36d399; --amber:#fbbd23; --red:#f87272; --blue:#5aa9ff; --violet:#9b8cff;
  --chip:#1a2542; --inset:#0c1428; --disabled:#202a43;
  --shadow-card:0 14px 38px rgba(0,0,0,.18);
  --focus-ring:rgba(90,169,255,.55);
  --accent-soft:rgba(90,169,255,.18);
  --success-soft:rgba(54,211,153,.16);
  --danger-soft:rgba(248,114,114,.16);
  --accent-border:rgba(90,169,255,.42);
  --row-hover:rgba(90,169,255,.05);
  --button-ink:#04122b;
}

:root[data-theme="light"]{
  --bg:#eef1f7; --panel:#ffffff; --panel2:#f6f8fc; --line:#dde4f0;
  --ink:#1b2334; --muted:#5d6b88; --muted2:#93a0bd;
  --green:#0f9d6b; --amber:#a8730a; --red:#d83a3a; --blue:#2f6fe0; --violet:#6d54e8;
  --chip:#eaeef6; --inset:#f0f3f9; --disabled:#dce2ee;
  --shadow-card:0 10px 28px rgba(28,44,74,.07);
  --focus-ring:rgba(47,111,224,.45);
  --accent-soft:rgba(47,111,224,.10);
  --success-soft:rgba(15,157,107,.12);
  --danger-soft:rgba(216,58,58,.12);
  --accent-border:rgba(47,111,224,.32);
  --row-hover:rgba(47,111,224,.045);
  --button-ink:#ffffff;
}

/* A handful of accent-tinted labels bake in literal pale text that only reads
   on a dark tint. On light, remap them to the (darker) accent vars so they stay
   legible over the now-pale tint. Selector specificity wins over the inline rule. */
:root[data-theme="light"] .tag.optout,
:root[data-theme="light"] .tag.dnd,
:root[data-theme="light"] .banner.esc,
:root[data-theme="light"] .banner.dnd,
:root[data-theme="light"] .banner.err{color:var(--red)}
:root[data-theme="light"] .bub.draft,
:root[data-theme="light"] .sendprev.warn{color:#9a6a05}
:root[data-theme="light"] .banner.paused,
:root[data-theme="light"] .langbar .det{color:var(--violet)}
:root[data-theme="light"] .banner.sibling,
:root[data-theme="light"] .banner.info{color:var(--blue)}
:root[data-theme="light"] .thead .meta,
:root[data-theme="light"] .theadContact,
:root[data-theme="light"] .thead .ph,
:root[data-theme="light"] .thead .tz{color:#43506a}
:root[data-theme="light"] .theadContact .hchip{
  color:#344158;
  background:#e7ecf5;
  border-color:#cbd5e5;
}
:root[data-theme="light"] .langbar{
  background:rgba(109,84,232,.09);
  color:#4b5874;
}
:root[data-theme="light"] .langbar .det{color:#4d37c1 !important}
:root[data-theme="light"] .langbar .det[style]{color:#4d37c1 !important}
:root[data-theme="light"] .langbar .det .src{color:#4f5d78 !important}
:root[data-theme="light"] .langbar .ledit{color:#4930b4}
:root[data-theme="light"] .banner.ghl{
  background:rgba(15,157,107,.12);
  border-color:rgba(15,157,107,.36);
  color:#0d5c3f;
}
:root[data-theme="light"] .banner.ghl b{color:#084b34}
:root[data-theme="light"] .banner.ghl a{color:#075f43}
:root[data-theme="light"] .banner.ghl code{
  background:rgba(15,157,107,.12);
  color:#084b34;
}
:root[data-theme="light"] .handoffAction{
  background:rgba(15,157,107,.10);
  border-color:rgba(15,157,107,.35);
  color:#075f43;
}
:root[data-theme="light"] .handoffAction:hover,
:root[data-theme="light"] .handoffAction:focus-visible{background:rgba(15,157,107,.18)}
:root[data-theme="light"] .handoffMeetingLabel{color:#084b34}
:root[data-theme="light"] .callcard,
:root[data-theme="light"] .callnote{color:#8a6d2f}
:root[data-theme="light"] .bub.context_outbound{background:var(--inset);color:var(--muted);border-color:var(--line)}
:root[data-theme="light"] .card:hover{border-color:#c2ccde}

/* Solid accent-filled controls bake in a dark-navy label that was tuned for the BRIGHT
   dark-mode accents (#5aa9ff etc.). On the deeper light-mode accents that goes muddy
   (e.g. the dark text on the blue sent-bubble), so flip these fills to white text. */
:root[data-theme="light"] .bub.sent,
:root[data-theme="light"] .bub.sent .t,
:root[data-theme="light"] .seg button.on,
:root[data-theme="light"] .scenario button.on,
:root[data-theme="light"] .toggle button.on,
:root[data-theme="light"] .tab .badge,
:root[data-theme="light"] .stagehd .n,
:root[data-theme="light"] .btn.go,
:root[data-theme="light"] .btn.send,
:root[data-theme="light"] .btn.confirm,
:root[data-theme="light"] button.refresh{color:#fff}

/* Theme toggle button (injected by theme.js). */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;flex:none;padding:0;
  background:var(--chip);border:1px solid var(--line);border-radius:8px;
  color:var(--ink);font-size:15px;line-height:1;cursor:pointer;
}
.theme-toggle:hover{border-color:var(--blue)}
.theme-toggle--float{position:fixed;top:12px;right:14px;z-index:9999}