/* =============================================================================
   SMART SOFTWARE — DESIGN TOKENS (nguồn: mockup smart-erp-demo.html, khối :root)
   Bộ nhận diện: Đỏ #EC2227 · Cam #F47920 · Xám #6D6E72.
   Nguyên tắc: đỏ = 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 */
  --st-red: #EC2227;
  --st-red-600: #D31920;
  --st-red-700: #B4141A;
  --st-red-050: #FDECEC;
  --st-red-100: #FBD9DA;
  --st-orange: #F47920;
  --st-orange-050: #FEF1E7;
  --st-gray: #6D6E72;

  /* Nền & chữ */
  --st-page: #F6F6F7;
  --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);
}