/* =============================================================================
   SMART SOFTWARE — DESIGN TOKENS (nguồn: mockup smart-erp-demo.html, khối :root)
   Màu chủ đạo của app: XANH #2563eb (06/10/2026, trước là đỏ #EC2227) · Cam #F47920 · Xám #6D6E72.
   Biến --st-red* giữ TÊN cũ để không phải sửa nơi dùng nhưng nay mang thang XANH chủ đạo (= --st-primary*);
   màu đỏ báo lỗi / nguy hiểm dùng --st-critical*, không dùng --st-red*.
   Nguyên tắc: màu chủ đạo = nhận diện (chrome), KHÔNG dùng cho chuỗi dữ liệu; cam = chuỗi dữ liệu chính.
   Trạng thái (good/warning/critical) luôn đi kèm icon hoặc nhãn, không chỉ dùng màu.
   Nạp TRƯỚC app.css trong index.html — các file sau tham chiếu var(--st-*).
   ============================================================================= */
:root {
  /* Thương hiệu — màu chủ đạo xanh */
  --st-primary: #2563eb;
  --st-primary-600: #1d4ed8;
  --st-primary-700: #1e40af;
  --st-primary-050: #eef4ff;
  --st-primary-100: #dbe7ff;
  --st-red: var(--st-primary);
  --st-red-600: var(--st-primary-600);
  --st-red-700: var(--st-primary-700);
  --st-red-050: var(--st-primary-050);
  --st-red-100: var(--st-primary-100);
  --st-orange: #F47920;
  --st-orange-050: #FEF1E7;
  --st-gray: #6D6E72;

  /* Nền & chữ */
  --st-page: #f4f6fa;
  --st-surface-1: #ffffff;
  --st-surface-2: #FAFAFA;
  --st-surface-3: #F2F2F3;
  --st-text-1: #1B1C1F;
  --st-text-2: #55565B;
  --st-text-muted: #87888D;
  --st-border: #E6E6E8;
  --st-border-2: #EFEFF1;
  --st-grid: #F0F0F1;
  --st-axis: #D3D4D7;

  /* Chuỗi dữ liệu (đã validate CVD) */
  --st-s1: #F47920;
  --st-s2: #2a78d6;
  --st-s3: #1baf7a;
  --st-seq-1: #FBD9BC;
  --st-seq-2: #F8B27B;
  --st-seq-3: #F47920;
  --st-seq-4: #B85608;

  /* Trạng thái */
  --st-good: #0E9F4F;
  --st-warning: #E8A100;
  --st-critical: #B4141A;
  --st-good-text: #07773A;
  --st-warn-text: #8a6100;
  --st-critical-text: #9A1015;
  --st-good-bg: #E9F7EF;
  --st-warn-bg: #FFF6E3;
  --st-crit-bg: #FDECEC;

  /* Bo góc & bóng */
  --st-r-sm: 6px;
  --st-r-md: 12px;
  --st-r-lg: 16px;
  --st-sh-1: 0 1px 2px rgba(27, 28, 31, .04);
  --st-sh-pop: 0 12px 32px rgba(27, 28, 31, .16);
}
