/* Theme clickup-radar: token màu, bo góc, bóng, font.
   Lấy từ mockup bảng tin (đã duyệt 03/11/2026).
   Font: nạp Google Fonts trước file này:
   https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap

   Cách bật nền tối (chọn một):
   - thêm class "dark" vào thẻ bọc (canvas dùng <div class="t {{mode}}">)
   - đặt data-theme="dark" lên <html>
   - để trống: tự theo máy (prefers-color-scheme), trừ khi có data-theme="light" */

/* ---------- Sáng ---------- */
:root, .t {
  /* nền và chữ */
  --bg: #F7F8FA;
  --side: #FBFBFC;
  --surface: #FFFFFF;
  --sunk: #F4F5F7;
  --hover: #F0F1F4;
  --line: #E7E9EE;
  --line-strong: #D5D9E0;
  --fg: #14161C;
  --fg2: #4B5262;
  --fg3: #767D8C;

  /* màu chính */
  --acc: #5B4FE9;
  --acc-hover: #4C40DA;
  --acc-fg: #FFFFFF;
  --acc-soft: #EFEDFE;
  --acc-line: #CBC5FB;
  --ink: #14161C;      /* mục chọn của bộ lọc liền khối */
  --ink-fg: #FFFFFF;

  /* báo trạng thái */
  --ok: #12924A;
  --bad: #D93036;
  --err-fg: #C8282E;
  --err-bg: #FDEDEE;

  /* khối code */
  --code-bg: #16181F;
  --code-fg: #E1E4EA;

  /* bóng */
  --shadow: 0 1px 2px rgba(20,22,28,.04);
  --shadow-pop: 0 1px 2px rgba(20,22,28,.05), 0 10px 28px rgba(20,22,28,.07);

  /* nhãn loại (nền đặc, chữ trắng) */
  --k-tip: #1F72D6;
  --k-tool: #0E8A80;
  --k-trend: #D0700A;
  --k-opp: #139148;
  --k-news: #5F6B7D;
  --k-fg: #FFFFFF;

  /* nhãn trạng thái (chữ / nền) */
  --s-new: #1F72D6;   --s-new-bg: #EAF2FD;
  --s-watch: #B95B07; --s-watch-bg: #FEF2E4;
  --s-sent: #15803D;  --s-sent-bg: #E8F6EE;
  --s-seen: #6B7280;  --s-seen-bg: #F1F2F4;

  /* bo góc */
  --r-card: 12px;
  --r-btn: 8px;
  --r-btn-sm: 7px;
  --r-badge: 6px;
  --r-pill: 999px;

  /* chiều cao */
  --h-btn: 36px;
  --h-btn-sm: 30px;
  --h-field: 36px;

  /* bố cục */
  --w-side: 232px;
  --h-top: 56px;
  --w-page: 1080px;

  /* font */
  --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --icon-stroke: 1.75;

  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
}

/* ---------- Tối ---------- */
.dark, .t.dark, :root[data-theme="dark"] {
  --bg: #111318;
  --side: #15171D;
  --surface: #1A1D24;
  --sunk: #20242C;
  --hover: #252A33;
  --line: #2A2F39;
  --line-strong: #3A404C;
  --fg: #E9EBF0;
  --fg2: #B4BAC6;
  --fg3: #8D94A2;

  --acc: #8F85FF;
  --acc-hover: #A39BFF;
  --acc-fg: #14112E;
  --acc-soft: #26234A;
  --acc-line: #423C7A;
  --ink: #E9EBF0;
  --ink-fg: #14161C;

  --ok: #4CC984;
  --bad: #FF7A7F;
  --err-fg: #FF8F93;
  --err-bg: #2E1719;

  --code-bg: #0D0F13;

  --shadow: 0 1px 2px rgba(0,0,0,.35);
  --shadow-pop: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.35);

  --k-tip: #3B8BEB;
  --k-tool: #16A398;
  --k-trend: #E08A1E;
  --k-opp: #1FA85A;
  --k-news: #6B7789;

  --s-new: #7DB4F7;   --s-new-bg: #1A2A40;
  --s-watch: #F2B26A; --s-watch-bg: #33240F;
  --s-sent: #6FD69A;  --s-sent-bg: #15301F;
  --s-seen: #A4ABB8;  --s-seen-bg: #252A33;
}

/* Tự theo máy khi chưa chọn. Giữ khối này giống hệt khối tối ở trên. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111318;
    --side: #15171D;
    --surface: #1A1D24;
    --sunk: #20242C;
    --hover: #252A33;
    --line: #2A2F39;
    --line-strong: #3A404C;
    --fg: #E9EBF0;
    --fg2: #B4BAC6;
    --fg3: #8D94A2;

    --acc: #8F85FF;
    --acc-hover: #A39BFF;
    --acc-fg: #14112E;
    --acc-soft: #26234A;
    --acc-line: #423C7A;
    --ink: #E9EBF0;
    --ink-fg: #14161C;

    --ok: #4CC984;
    --bad: #FF7A7F;
    --err-fg: #FF8F93;
    --err-bg: #2E1719;

    --code-bg: #0D0F13;

    --shadow: 0 1px 2px rgba(0,0,0,.35);
    --shadow-pop: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.35);

    --k-tip: #3B8BEB;
    --k-tool: #16A398;
    --k-trend: #E08A1E;
    --k-opp: #1FA85A;
    --k-news: #6B7789;

    --s-new: #7DB4F7;   --s-new-bg: #1A2A40;
    --s-watch: #F2B26A; --s-watch-bg: #33240F;
    --s-sent: #6FD69A;  --s-sent-bg: #15301F;
    --s-seen: #A4ABB8;  --s-seen-bg: #252A33;
  }
}