/* Biến thiết kế tập trung. Mọi component chỉ dùng các biến này. */
:root {
  --app-bg: #DDE2E6;
  --content-bg: #F7F9FA;
  --surface: #FFFFFF;
  --sidebar-bg: #F0F4F6;
  --border: #E1E7EB;
  --divider: #E8EDF0;
  --primary: #1976D2;
  --primary-soft: #E5F2FC;
  --teal: #20A99A;
  --teal-soft: #E1F6F1;
  --warning: #F5BD42;
  --orange: #F28C28;
  --danger: #E05252;
  --success: #2CA878;
  --text-primary: #17212B;
  --text-body: #263238;
  --text-secondary: #71808D;
  --text-disabled: #A5AFB8;
  /* Màu bổ sung chỉ dùng cho biểu đồ (danh mục thứ 4) */
  --purple: #7E57C2;

  --warning-soft: color-mix(in srgb, var(--warning) 22%, #fff);
  --orange-soft: color-mix(in srgb, var(--orange) 16%, #fff);
  --danger-soft: color-mix(in srgb, var(--danger) 13%, #fff);
  --success-soft: color-mix(in srgb, var(--success) 14%, #fff);

  --radius-card: 12px;
  --radius-ctl: 8px;
  --shadow-card: 0 1px 2px rgba(23, 33, 43, .04), 0 2px 8px rgba(23, 33, 43, .04);
  --shadow-pop: 0 8px 28px rgba(23, 33, 43, .16);
  --ease: 160ms ease;
  --font: "Inter", "Roboto", Arial, sans-serif;
  --sidebar-w: 176px;
  --sidebar-w-collapsed: 62px;
}