/* ══════════════════════════════════════════════════════════════════
   TOKENS — màu, cỡ chữ, khoảng cách
   Khai báo ở một chỗ duy nhất, không viết rải rác (quy tắc 7).
   Tệp này sau chuyển thẳng sang app/static/css/tokens.css
   ══════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* ── Nền và mực ── */
  --plane:        #f2f2f6;   /* nền ngoài cùng */
  --surface:      #fbfbfd;   /* thẻ, bảng, ô nhập */
  --surface-2:    #f6f6fa;   /* hàng xen kẽ, vùng chìm */
  --surface-3:    #ecedf3;   /* thanh công cụ */
  --ink:          #15151c;   /* chữ chính */
  --ink-2:        #4a4a58;   /* chữ phụ */
  --ink-3:        #83838f;   /* nhãn, chú thích */
  --rule:         #e3e3ec;   /* đường kẻ mảnh */
  --rule-strong:  #c9c9d6;   /* viền ô nhập */

  /* ── Nhấn ── */
  --accent:       #3a37a3;
  --accent-hover: #2e2b8a;
  --accent-soft:  #ecebf9;
  --accent-ink:   #ffffff;
  --brass:        #9a7228;   /* dấu nhận diện Kim Ngân, dùng rất tiết chế */

  /* ── Trạng thái ── */
  --good:         #0ca30c;
  --good-soft:    #e6f6e6;
  --warn:         #fab219;
  --warn-soft:    #fdf3dc;
  --serious:      #ec835a;
  --serious-soft: #fcece5;
  --critical:     #d03b3b;
  --critical-soft:#fbeaea;
  --info: #1f6fd0;          /* xanh dương — màu cột trên Bảng dữ liệu, FR-8.8 */
  --info-soft: #e3eefb;

  /* ── Khoảng cách ── */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;

  /* ── Cỡ chữ ── */
  --fs-xs:  11px;  --fs-sm:  12.5px;  --fs-md: 14px;
  --fs-lg:  16px;  --fs-xl:  20px;    --fs-2xl: 26px;  --fs-3xl: 34px;

  /* ── Bo góc và đổ bóng ── */
  --r-sm: 2px;  --r-md: 3px;  --r-lg: 6px;
  --shadow-1: 0 1px 2px rgba(21,21,40,.05);
  --shadow-2: 0 4px 16px rgba(21,21,40,.10);

  /* ── Kích thước khung ── */
  --nav-w:    244px;
  --topbar-h: 56px;

  /* ── Chữ ── */
  --font-van:  "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ma:   "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* Chế độ tối theo cài đặt hệ điều hành */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --plane:        #0b0b10;
    --surface:      #16161e;
    --surface-2:    #1c1c26;
    --surface-3:    #22222e;
    --ink:          #f1f1f6;
    --ink-2:        #b6b6c4;
    --ink-3:        #8a8a99;
    --rule:         #2a2a36;
    --rule-strong:  #3b3b4a;
    --accent:       #9a97ee;
    --accent-hover: #b0adf3;
    --accent-soft:  #1f1e39;
    --accent-ink:   #0b0b10;
    --brass:        #c9a458;
    --good-soft:    #122a12;
    --warn-soft:    #2e2410;
    --serious-soft: #2e1d15;
    --critical-soft:#2e1414;
    --info-soft: #12233a;
    --shadow-1: 0 1px 2px rgba(0,0,0,.4);
    --shadow-2: 0 4px 16px rgba(0,0,0,.5);
  }
}

/* Chế độ tối do người dùng tự chọn — thắng cả cài đặt hệ điều hành */
:root[data-theme="dark"] {
  color-scheme: dark;
  --plane:        #0b0b10;
  --surface:      #16161e;
  --surface-2:    #1c1c26;
  --surface-3:    #22222e;
  --ink:          #f1f1f6;
  --ink-2:        #b6b6c4;
  --ink-3:        #8a8a99;
  --rule:         #2a2a36;
  --rule-strong:  #3b3b4a;
  --accent:       #9a97ee;
  --accent-hover: #b0adf3;
  --accent-soft:  #1f1e39;
  --accent-ink:   #0b0b10;
  --brass:        #c9a458;
  --good-soft:    #122a12;
  --warn-soft:    #2e2410;
  --serious-soft: #2e1d15;
  --critical-soft:#2e1414;
  --info-soft: #12233a;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 4px 16px rgba(0,0,0,.5);
}