/* ============================================================================
   tokens.css — DESIGN TOKENS dùng chung toàn hệ thống ClinicSolution
   ----------------------------------------------------------------------------
   MỤC ĐÍCH: 1 nguồn giá trị giao diện (màu, font, size, radius, spacing) để
   mọi màn tham chiếu bằng var(--...) thay vì hardcode mỗi màn 1 kiểu.

   AN TOÀN: file này CHỈ định nghĩa biến trong :root — KHÔNG áp lên element nào.
   CSS variable không được var() gọi thì vô hại → thêm file này KHÔNG đổi hình
   bất kỳ màn cũ nào. Màn cũ giữ nguyên tới khi migrate dần từng màn.

   KHÔNG đụng --main-color / --accent-color (biến cũ đang dùng ở 27+ file) — giữ
   nguyên để màn cũ chạy tiếp. Token ở đây là TÊN MỚI (--brand, --fs-*, --h-*...).

   Tài liệu chuẩn + hướng dẫn migrate: docs/design.md
   ============================================================================ */

:root {
  /* ---- MÀU BRAND (teal-lá y tế — gom 4 sắc header xanh về 1) ---- */
  --brand:        #1d6f5c;   /* header/workspace chủ đạo (đang dùng nhiều nhất) */
  --brand-dark:   #13503f;   /* nhấn đậm, gradient dưới */
  --brand-2:      #22a06b;   /* accent sáng (viền chọn, icon) */
  --brand-soft:   #ecfdf3;   /* nền nhạt brand (head bảng, panel) */
  --brand-sel:    #8fdcb8;   /* nền dòng đang chọn — đủ tách khỏi hover/zebra, chữ đen đạt tương phản tốt */
  --row-sel:      var(--brand-sel); /* dùng chung nguồn màu chọn cho mọi lưới */
  --row-hover:    #e1f4e8;   /* hover nhẹ hơn rõ ràng so với dòng đang chọn */

  /* ---- MÀU NÚT HÀNH ĐỘNG (vai trò nhất quán; gom biến thể lặp) ---- */
  --btn-primary:        #2563eb;  --btn-primary-hover:  #1d4ed8;  /* xanh dương */
  --btn-ok:             #16a34a;  --btn-ok-hover:       #15803d;  /* xanh lá success */
  --btn-warn:           #d97706;  --btn-warn-hover:     #b45309;  /* cam cảnh báo */
  --btn-danger:         #dc2626;  --btn-danger-hover:   #b91c1c;  /* đỏ nguy hiểm */
  --btn-on:             #ffffff;  /* CHỮ trên nút màu (luôn trắng) */

  /* ================================================================
     DESIGN SYSTEM — MÀU NÚT THEO VAI TRÒ (chuẩn dùng CHUNG mọi màn)
     Chốt với user 2026-07-13. Áp qua class .ft-btn (xem cuối file).
     Màn nào có vai trò nào thì dùng nút đó; không có thì bỏ qua.
     ================================================================ */
  --act-add:      #079455;   /* Thêm            (icon fa-plus)        */
  --act-edit:     #d97706;   /* Sửa / Hủy chuyển (icon fa-pen / fa-rotate-left) */
  --act-delete:   #dc2626;   /* Xoá             (icon fa-trash)       */
  --act-print:    #079455;   /* In              (icon fa-print)       */
  --act-save:     #175cd3;   /* Lưu             (icon fa-floppy-disk) */
  --act-default:  #13503f;   /* Chức năng khác (tất cả nút còn lại)   */
  --act-cancel:   #13503f;   /* Hủy             (icon fa-xmark)        */
  --act-on:       #ffffff;   /* chữ trên nút    (luôn trắng)          */
  --ico-search:   'fa-rotate'; /* icon nút làm mới/tìm CHUNG          */

  /* ---- FOOTER BAR nút (dải hành động vùng nội dung phải) ---- */
  --ft-bar-h:     34px;   /* chiều cao dải footer            */
  --ft-btn-h:     30px;   /* chiều cao nút trong footer      */
  --ft-gap:       2px;    /* nút cách lề DƯỚI 2px            */

  /* ---- CHỮ (slate scale) ---- */
  --text:      #0f172a;   /* chữ chính */
  --muted:     #475569;   /* chữ phụ / label */
  --muted-2:   #94a3b8;   /* chữ mờ / placeholder / icon nhạt */

  /* ---- VIỀN & NỀN (gom 5 xám viền + 3 nền surface trùng nhau) ---- */
  --line:      #e5e7eb;   /* đường kẻ / viền nhạt (thay #cbd5e1/#e3e7ec/#d0d5dd/#d1d5db) */
  --line-2:    #cbd5d0;   /* viền đậm hơn (input, khung) */
  --surface:   #ffffff;   /* nền thẻ/card */
  --surface-2: #f6fefa;   /* nền phụ nhạt (sidebar, panel) — ngả brand */
  --surface-3: #eef1f5;   /* nền xám cực nhạt (nền workspace) */

  /* ---- TRẠNG THÁI (nền/chữ badge) ---- */
  --hi:        #dc2626;   /* giá trị cao / bất thường (đỏ) */
  --lo:        #1d4ed8;   /* giá trị thấp (xanh dương) */

  /* ---- FONT ---- */
  --font-ui:   'Segoe UI', Roboto, Arial, sans-serif;      /* chữ giao diện (gom 7 stack) */
  --font-mono: ui-monospace, Consolas, 'Courier New', monospace; /* mã/số (gom 4 mono) */

  /* ---- FONT-SIZE scale (7 bậc — bỏ toàn bộ nửa bậc 10.5/11.5/12.5/13.5/14.5) ---- */
  --fs-xs:    11px;   /* label nhỏ, badge, chú thích (thay 10.5/11/11.5) */
  --fs-sm:    12px;   /* text phụ, nút nhỏ, ô lưới (thay 12/12.5) */
  --fs-base:  13px;   /* BODY chuẩn — mặc định form/bảng (thay 13/13.5/14.5) */
  --fs-md:    14px;   /* text nhấn, nút thường */
  --fs-lg:    16px;   /* tiêu đề phụ / ws-title (thay 15/15.5/16/17) */
  --fs-xl:    20px;   /* heading (thay 18/19/20/21) */
  --fs-2xl:   24px;   /* heading lớn (thay 22-26) */

  /* ---- FONT-WEIGHT (bỏ rác 550/650/680/750) ---- */
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---- KÍCH THƯỚC control (gom 7 chiều cao input về 1) ---- */
  --h-input:  32px;   /* chiều cao input/select/nút chuẩn (thay 28/30/33/35/38/40) */
  --h-input-sm: 28px; /* biến thể nhỏ (toolbar, nút phụ) */
  --h-bar:    46px;   /* thanh header workspace */

  /* ---- BO GÓC — WIN8 "Lai vừa phải": gần vuông (radius 2px) ---- */
  /* Trước Win8: 6/8/12. Nay ép về 2px cho phong cách Metro cứng cáp mà không gắt.
     Avatar/icon tròn giữ border-radius:50% riêng (không qua token này). */
  --radius-sm:  2px;   /* input, nút, ô nhỏ */
  --radius:     2px;   /* thẻ/card, panel */
  --radius-lg:  2px;   /* modal, khối lớn */

  /* ---- KHOẢNG CÁCH (spacing scale 4px) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;

  /* ---- ĐỔ BÓNG — WIN8: làm phẳng, bóng rất nhẹ (giữ shadow-lg cho modal) ---- */
  --shadow-sm:  0 1px 1px rgba(15,23,42,.05);
  --shadow-md:  0 2px 6px rgba(15,23,42,.07);
  --shadow-lg:  0 12px 40px rgba(0,0,0,.24);
}