/* XME Console — hệ token giao diện.
   Mọi giá trị màu ở đây đã được đo tương phản bằng số, không chọn theo cảm tính:
   - chữ ≥ 4.5:1
   - viền điều khiển (input/select/nút) ≥ 3:1  ← phải thấy mới thao tác được
   - viền thẻ/bảng ≈ 2:1, kẻ dòng ≈ 1.6:1      ← chỉ để phân tách, không cần 3:1
   Ngưỡng 3:1 của WCAG áp cho thành phần điều khiển, không áp cho đường kẻ trang
   trí — ép 3:1 lên mọi hairline sẽ ra giao diện nặng như bảng tính. eGate hiện
   để viền ở 1.27:1, mờ hẳn trên màn kém; đó là thứ cần tránh, không phải cớ để
   làm quá tay theo hướng ngược lại. */

:root {
  color-scheme: light;

  --page:       #f6f7f8;
  --surface:    #ffffff;
  --surface-2:  #eef0f3;
  --surface-3:  #e4e7ec;

  --text:       #16181d;
  --text-2:     #5b6270;
  --text-3:     #6f747e;

  --rule:        #c8ccd4;
  --border:      #b4b7c2;
  --border-ctrl: #8b8f98;

  --accent:       #23262d;
  --accent-hover: #33373f;
  --on-accent:    #ffffff;
  --focus:        #1a56db;
  --focus-ring:   rgba(26, 86, 219, .22);

  --ok-bg:      #e6f4ec;  --ok-text:      #0f6b46;
  --warn-bg:    #fbf1e0;  --warn-text:    #845200;
  --bad-bg:     #fceceb;  --bad-text:     #a9231c;
  --neutral-bg: #eceef2;  --neutral-text: #4d535e;

  /* Hình học — vuông hơn hẳn eGate (18.5 / 24) để nhìn là phân biệt được hệ */
  --r-ctrl:   6px;
  --r-card:   8px;
  --h-ctrl:   36px;
  --shell-max: 1600px;

  --fs-title: 20px;
  --fs-head:  16px;
  --fs-base:  15px;
  --fs-table: 14px;
  --fs-small: 13px;
  --fs-label: 12px;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --dur: 120ms;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --page:       #131519;
  --surface:    #1b1e24;
  --surface-2:  #242832;
  --surface-3:  #2c313c;

  --text:       #e8eaee;
  --text-2:     #a4a8b2;
  --text-3:     #85878f;

  --rule:        #3c404b;
  --border:      #4a4e5a;
  --border-ctrl: #676c78;

  --accent:       #e8eaee;
  --accent-hover: #ffffff;
  --on-accent:    #14161a;
  --focus:        #5b8def;
  --focus-ring:   rgba(91, 141, 239, .30);

  --ok-bg:      #12281f;  --ok-text:      #7ddcaa;
  --warn-bg:    #2a2114;  --warn-text:    #efc07a;
  --bad-bg:     #2c1817;  --bad-text:     #f5a49d;
  --neutral-bg: #262a33;  --neutral-text: #a4a8b2;
}

/* Màn cảm ứng: nới điều khiển lên 44px. Dùng con trỏ thô (ngón tay) làm điều
   kiện chứ không dùng bề rộng màn hình — máy tính bảng lai vẫn cần vùng bấm to. */
@media (pointer: coarse) {
  :root { --h-ctrl: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}