/* GreenTube — màu & token dùng chung cho mọi trang (app chính, /monitor).
   Mặc định tối; giao diện sáng theo hệ thống hoặc theo lựa chọn (data-theme trên <html>, do theme-init.js đặt). */
:root {
  /* thương hiệu: gradient của logo, dùng cho icon & điểm nhấn lớn */
  --brand-1: #3ddc84;
  --brand-2: #128a49;
  --brand-grad: linear-gradient(135deg, var(--brand-1), var(--brand-2));

  /* nền & chữ */
  --bg: #0f0f0f;                      /* nền trang */
  --bg2: #1a1a1a;                     /* thẻ, bảng, ô nhập */
  --bg3: #272727;                     /* nút, chip */
  --line: #303030;                    /* đường kẻ, viền */
  --text: #f1f1f1;
  --muted: #aaaaaa;                   /* chữ phụ */
  --muted-strong: #cfcfcf;            /* chữ phụ cần đọc rõ (ô tô, nhãn biểu đồ) */
  --accent: #2ecc71;                  /* xanh thương hiệu cho chữ/nút trên nền tối */
  --accent-ink: #0b130d;              /* chữ trên nền --accent */
  --danger: #ff5c5c;

  /* hiệu ứng */
  --glass: rgba(15,15,15,.94);        /* nền thanh trên / thanh điều hướng */
  --hover: rgba(255,255,255,.1);
  --press: rgba(255,255,255,.12);
  --shadow: rgba(0,0,0,.5);
  --ring: rgba(255,255,255,.18);      /* vòng xoay đang tải */
  --track: rgba(255,255,255,.25);     /* thanh tua, thanh đo */
  --track-buf: rgba(255,255,255,.55);
  --toast-bg: #eeeeee;                /* thông báo nổi, tooltip */
  --toast-ink: #111111;

  /* trạng thái (cảnh báo, biểu đồ) */
  --good: #2ecc71;
  --warning: #f5b524;
  --serious: #f08a5d;
  --critical: #ff5c5c;
  --series-1: #2ecc71;                /* chuỗi chính = xanh thương hiệu */
  --series-2: #f08a3c;
  --series-3: #4b9cf5;

  /* hình khối & chữ */
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-pill: 999px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #ffffff; --bg2: #f2f2f2; --bg3: #e6e6e6; --line: #d9d9d9;
  --text: #0f0f0f; --muted: #606060; --muted-strong: #3d3d3d;
  --accent: #16884a; --accent-ink: #ffffff; --danger: #d93025;
  --glass: rgba(255,255,255,.94); --hover: rgba(0,0,0,.06); --press: rgba(0,0,0,.1); --shadow: rgba(0,0,0,.18);
  --ring: rgba(0,0,0,.12); --track: rgba(0,0,0,.15); --track-buf: rgba(0,0,0,.3);
  --toast-bg: #222222; --toast-ink: #ffffff;
  --good: #16884a; --warning: #c98a00; --serious: #d9632b; --critical: #d93025;
  --series-1: #16884a; --series-2: #e0661f; --series-3: #2a78d6;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #ffffff; --bg2: #f2f2f2; --bg3: #e6e6e6; --line: #d9d9d9;
    --text: #0f0f0f; --muted: #606060; --muted-strong: #3d3d3d;
    --accent: #16884a; --accent-ink: #ffffff; --danger: #d93025;
    --glass: rgba(255,255,255,.94); --hover: rgba(0,0,0,.06); --press: rgba(0,0,0,.1); --shadow: rgba(0,0,0,.18);
    --ring: rgba(0,0,0,.12); --track: rgba(0,0,0,.15); --track-buf: rgba(0,0,0,.3);
    --toast-bg: #222222; --toast-ink: #ffffff;
    --good: #16884a; --warning: #c98a00; --serious: #d9632b; --critical: #d93025;
    --series-1: #16884a; --series-2: #e0661f; --series-3: #2a78d6;
    color-scheme: light;
  }
}