/* One home for every colour in the product.
 *
 * Until now each page declared its own :root palette, which is how the app
 * ended up half dark (chat, inbox, dashboard, login) and half light (client
 * board, password page) — incoherent for a client who uses BOTH the chat and
 * their task board. The tokens below cover every variable name any page uses,
 * in two complete sets.
 *
 * These selectors are :root[data-theme=...], which outranks a page's plain
 * :root, so the page's own block stays as a harmless fallback if this file
 * ever fails to load.
 *
 * Default is LIGHT: this is a business tool a client sees, and the Target
 * logo is dark-on-white with no transparency. Dark is one click away for
 * anyone who prefers it (nav.js writes the choice to localStorage).
 */

:root[data-theme="light"] {
  --bg: #f1f5f9;
  --panel: #ffffff;
  --card: #ffffff;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --border: #e2e8f0;
  --text: #0f172a;
  --muted: #64748b;
  --accent: #2563eb;
  --accent-soft: #eff6ff;
  --ok: #16a34a;
  --warn: #d97706;
  --tech: #b45309;
  --role-tag: #0e7490;
  --tag-dyn: #0e7490;
  --tag-dyn-line: #a5f3fc;
  --tag-arch: #b45309;
  --tag-arch-line: #fcd34d;
  --bot: #f1f5f9;          /* bot chat bubble - must differ from --panel */
  --user: #2563eb;         /* user chat bubble */
  --bubble-text: #0f172a;  /* text inside a bot bubble */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.05);
  --shadow-md: 0 1px 3px rgba(15,23,42,.06), 0 6px 16px -6px rgba(15,23,42,.10);
  --track: #e2e8f0;        /* chart/bar troughs */
  --input-bg: #ffffff;     /* text inputs and textareas */
  --radius: 14px;          /* not a colour, but shared so cards match everywhere */
  --logo-bg: transparent;  /* logo is transparent and dark - sits on light directly */
}

:root[data-theme="dark"] {
  --bg: #0f1720;
  --panel: #16212e;
  --card: #1e2b3a;
  --line: #24303f;
  --line-strong: #33445a;
  --border: #24303f;
  --text: #e6edf3;
  --muted: #8b98a5;
  --accent: #3b82f6;
  --accent-soft: #1a2b45;
  --ok: #16a34a;
  --warn: #d97706;
  --tech: #f59e0b;
  --role-tag: #67e8f9;
  --tag-dyn: #67e8f9;
  --tag-dyn-line: #155e75;
  --tag-arch: #fbbf24;
  --tag-arch-line: #92400e;
  --bot: #1e2b3a;
  --user: #2563eb;
  --bubble-text: #e6edf3;
  --track: #0f1a25;
  --input-bg: #0f1a25;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.25);
  --shadow-md: 0 1px 3px rgba(0,0,0,.3), 0 6px 16px -6px rgba(0,0,0,.45);
  --radius: 14px;
  --logo-bg: #f8fafc;      /* black wordmark needs a light chip on dark */
}

/* --- shared top navigation (populated by nav.js into #mainNav) --- */
#mainNav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
#mainNav a { color: var(--accent); text-decoration: none; font-size: 14px; position: relative; }
#mainNav a:hover { text-decoration: underline; }
#mainNav .nav-on { font-size: 14px; font-weight: 600; color: var(--text); }
#mainNav .nav-who { font-size: 12.5px; color: var(--muted); }
/* "needs your attention" counter (nav.js sets it from /api/me badge) */
#mainNav .nav-badge {
  display: inline-block; min-width: 17px; height: 17px; line-height: 17px;
  padding: 0 4px; margin-inline-start: 4px; border-radius: 9px;
  background: #dc2626; color: #fff; font-size: 11px; font-weight: 700;
  text-align: center; vertical-align: middle;
}
/* light/dark switch */
#mainNav .theme-toggle {
  background: none; border: 1px solid var(--line-strong); color: var(--muted);
  border-radius: 8px; padding: 3px 9px; font-size: 13px; cursor: pointer;
  font-family: inherit; line-height: 1.6; transition: border-color .15s, color .15s;
}
#mainNav .theme-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* --- the company logo, shown in page headers and on the login card --- */
.brand-logo {
  height: 26px; width: auto; display: block; border-radius: 5px;
  background: var(--logo-bg); padding: 3px 7px;
}
/* In light mode the chip is transparent, so drop the padding that only
   existed to give the chip breathing room. */
:root[data-theme="light"] .brand-logo { padding: 0; }
.brand-credit {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 18px; font-size: 12px; color: var(--muted);
}
.brand-credit .brand-logo { height: 22px; }

/* --- shared focus visibility (a11y) --- */
button:focus-visible, a:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}