/* Design token của bộ thiết kế ERP — nguồn chân lý duy nhất cho vùng "chrome" của app
   (topbar + mega menu, sidebar, tabstrip). Giá trị lấy nguyên văn từ
   .claude/references/design-layout/01-design-tokens.md.

   VÌ SAO KHÔNG ĐẶT Ở :root (spec ghi :root, ta cố ý làm khác — đọc trước khi "sửa lại"):
   tên --border / --surface / --ink là tên quá chung. Khai ở :root thì mọi component
   Syncfusion, Smart.Blazor, BootstrapBlazor trong app đều kế thừa, và ba thư viện này
   có hàng trăm biến nội bộ — một trùng tên là đổi màu ở màn hình không liên quan mà
   không ai truy ra được. Nên token chỉ áp cho đúng các khu vực chrome liệt kê dưới đây.
   Biến CSS kế thừa theo cây DOM chứ không theo phạm vi CSS isolation, nên các file
   .razor.css scoped (SmartSidebar, SmartNavbar) vẫn dùng var(--...) bình thường.

   Muốn thêm một khu vực dùng token: thêm selector vào danh sách, đừng chép lại giá trị.

   .tabs-body bao trọn nội dung trang nên token kế thừa vào mọi component bên trong. Đã
   kiểm trước khi thêm: không file CSS nào của repo và không bundle nào (BootstrapBlazor,
   Smart.Blazor, popup/theme/cms/smart-custom) dùng các tên biến trần này — Syncfusion dùng
   --color-sf-*, Smart.Blazor dùng --smart-*, BootstrapBlazor dùng --bb-*, Bootstrap --bs-*.

   BẪY đã dính một lần: dùng var(--x) ở một phần tử KHÔNG nằm trong các selector trên thì
   biến rỗng → cả khai báo thành không hợp lệ và bị bỏ im lặng (border-bottom biến mất mà
   DevTools không báo gì). Nếu một rule "không ăn dù specificity đủ", kiểm biến trước. */

.sb,
.snav,
.snav-mega,
.layout-header,
.layout-side,
.tabs-header,
.tabs-body {
    /* Nền & bề mặt */
    /* Spec ghi #f3f4f6; người dùng chọn #E6EBEE (28/08/2026) — đậm hơn một chút để hai
       panel trắng tách bạch hơn. Đây là sai lệch có chủ ý, đừng "sửa lại cho đúng mẫu". */
    --canvas: #E6EBEE;
    --surface: #ffffff;
    --surface-alt: #f8f9fa;
    --border: #e4e6e9;
    --border-strong: #ced3d8;

    /* Chữ */
    --ink: #1e2530;
    --ink-2: #5c6774;
    --ink-3: #8b95a1;

    /* Brand — đỏ Rạng Đông */
    --brand: #df3a1e;
    --brand-hover: #bd2f16;
    --brand-soft: #fdefec;
    --brand-line: #f5c6bb;

    /* Accent cam — chỉ dùng 2 chỗ (01-design-tokens.md §4) */
    --accent: #e8842a;
    --accent-soft: #fdf3e8;
    --accent-line: #f3d3ae;

    /* Hình khối */
    --radius: 8px;
    --radius-sm: 6px;
    --shadow: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-pop: 0 12px 32px rgba(16, 24, 40, .14), 0 2px 6px rgba(16, 24, 40, .06);

    /* Cỡ chữ */
    --fs-11: 11px;
    --fs-12: 12px;
    --fs-13: 13px;
    --fs-14: 14px;
}