/* ============================================================
   VNFISA CMS — tokens.css
   Design tokens theo BRD/SRS mục 6.2. Primary brand = #FB3A10.
   Tham chiếu Sneat Dashboard UI Kit, thay toàn bộ màu thương hiệu.
   ============================================================ */

:root {
  /* --- Brand / primary --- */
  --color-primary: #FB3A10;        /* Nút primary, active, focus ring, tab active */
  --color-primary-hover: #D9340A;  /* Hover / pressed */
  --color-primary-dark: #B92307;   /* Chữ nhấn mạnh, action nghiêm trọng */
  --color-primary-tint: #FFF1EB;   /* Nền chọn nhẹ, banner info, row highlight */
  --color-primary-tint-2: #FFE4D8; /* Tint đậm hơn cho hover row / border nhẹ */

  /* --- Text --- */
  --color-text: #2F2B3D;   /* Tiêu đề, body chính */
  --color-muted: #7D7A8A;  /* Caption, meta, placeholder */
  --color-faint: #A5A2B0;  /* Text rất nhạt */

  /* --- Surface / border --- */
  --color-border: #DBDADE;      /* Viền input, table, card, divider */
  --color-border-soft: #EBEAEF; /* Divider rất nhẹ */
  --color-page: #F8F7FA;        /* Nền khu vực nội dung */
  --color-surface: #FFFFFF;     /* Card, panel */
  --color-surface-2: #F5F4F7;   /* Nền phụ, thead, hover */

  /* --- Semantic (KHÔNG dùng primary cho success/danger) --- */
  --color-success: #28C76F;
  --color-success-tint: #E7F9F0;
  --color-warning: #FF9F43;
  --color-warning-tint: #FFF3E6;
  --color-danger: #EA5455;
  --color-danger-tint: #FCE9E9;
  --color-info: #0D6EFD;
  --color-info-tint: #E7F0FF;
  --color-neutral: #7D7A8A;
  --color-neutral-tint: #EFEFF1;

  /* --- Typography --- */
  --font-sans: "Public Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
  --fs-h1: 26px;
  --fs-h2: 19px;
  --fs-h3: 16px;
  --fs-body: 14px;
  --fs-sm: 13px;
  --fs-caption: 12px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-body: 1.5;

  /* --- Spacing (hệ 8px) --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* --- Radius / shadow --- */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(47, 43, 61, 0.06);
  --shadow-sm: 0 2px 6px rgba(47, 43, 61, 0.08);
  --shadow-md: 0 4px 16px rgba(47, 43, 61, 0.12);
  --shadow-lg: 0 8px 30px rgba(47, 43, 61, 0.16);

  /* --- Layout dims --- */
  --sidebar-w: 260px;
  --sidebar-collapsed-w: 76px;
  --topbar-h: 68px;
  --content-max: 1360px;

  /* --- Z-index --- */
  --z-sidebar: 40;
  --z-topbar: 30;
  --z-drawer: 80;
  --z-modal: 90;
  --z-toast: 100;

  --transition: 160ms ease;
}
/* Public Sans được nạp qua <link> trong index.html; Arial là fallback khi offline. */