:root{
  --ink:#0b0b0c;
  --sky:#dbe6ee;
  --muted:rgba(11,11,12,.55);
  --muted-2:rgba(11,11,12,.6);
  --border:rgba(11,11,12,.12);
  --border-soft:rgba(11,11,12,.1);
  --card-bg:rgba(255,255,255,.6);
  --card-bg-soft:rgba(255,255,255,.55);
  --input-bg:rgba(255,255,255,.7);
  --input-bg-2:rgba(255,255,255,.75);
  --input-border:rgba(11,11,12,.16);
  --ghost-hover:rgba(11,11,12,.06);
  --ghost-border:rgba(11,11,12,.25);
  --pill-bg:rgba(11,11,12,.08);
  --history-bg:rgba(255,255,255,.5);
  --shadow:rgba(0,0,0,.35);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#e9edf1;
    --sky:#12161c;
    --muted:rgba(233,237,241,.55);
    --muted-2:rgba(233,237,241,.62);
    --border:rgba(233,237,241,.16);
    --border-soft:rgba(233,237,241,.12);
    --card-bg:rgba(255,255,255,.045);
    --card-bg-soft:rgba(255,255,255,.035);
    --input-bg:rgba(255,255,255,.07);
    --input-bg-2:rgba(255,255,255,.085);
    --input-border:rgba(233,237,241,.2);
    --ghost-hover:rgba(255,255,255,.08);
    --ghost-border:rgba(233,237,241,.3);
    --pill-bg:rgba(255,255,255,.1);
    --history-bg:rgba(255,255,255,.04);
    --shadow:rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --ink:#e9edf1;
  --sky:#12161c;
  --muted:rgba(233,237,241,.55);
  --muted-2:rgba(233,237,241,.62);
  --border:rgba(233,237,241,.16);
  --border-soft:rgba(233,237,241,.12);
  --card-bg:rgba(255,255,255,.045);
  --card-bg-soft:rgba(255,255,255,.035);
  --input-bg:rgba(255,255,255,.07);
  --input-bg-2:rgba(255,255,255,.085);
  --input-border:rgba(233,237,241,.2);
  --ghost-hover:rgba(255,255,255,.08);
  --ghost-border:rgba(233,237,241,.3);
  --pill-bg:rgba(255,255,255,.1);
  --history-bg:rgba(255,255,255,.04);
  --shadow:rgba(0,0,0,.6);
}

/* Status pills need their own dark-mode contrast pass — tints stay
   readable against a light card in light mode but wash out on dark. */
:root[data-theme="dark"] .pill[data-status="FOLLOW UP"]{ background:rgba(240,180,41,.22); color:#f0b429 }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .pill[data-status="FOLLOW UP"]{ background:rgba(240,180,41,.22); color:#f0b429 } }
:root[data-theme="dark"] .pill[data-status="REPEATED"]{ background:rgba(122,162,247,.2); color:#7aa2f7 }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .pill[data-status="REPEATED"]{ background:rgba(122,162,247,.2); color:#7aa2f7 } }
:root[data-theme="dark"] .pill[data-status="CLOSED BY US"]{ background:rgba(74,222,128,.18); color:#4ade80 }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .pill[data-status="CLOSED BY US"]{ background:rgba(74,222,128,.18); color:#4ade80 } }
:root[data-theme="dark"] .pill[data-status="PRANK"]{ background:rgba(248,113,113,.2); color:#f87171 }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .pill[data-status="PRANK"]{ background:rgba(248,113,113,.2); color:#f87171 } }
:root[data-theme="dark"] .pill[data-status="HANG UP"]{ background:rgba(192,132,252,.2); color:#c084fc }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .pill[data-status="HANG UP"]{ background:rgba(192,132,252,.2); color:#c084fc } }

.theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.2rem;
  height:2.2rem;
  border-radius:8px;
  border:1px solid var(--ghost-border);
  font-size:1.05rem;
  line-height:1;
  transition:background-color .3s ease, transform .3s ease;
}
.theme-toggle:hover{ background:var(--ghost-hover); transform:translateY(-1px) }