/* ============================================================
   DESIGN TOKENS — BNI Zenith Traffic Lights
   Nguồn duy nhất: sample/Mockups/*.html (mockup là chân lý về style).
   Tham chiếu: requirements.md mục C.1–C.3.

   AI/dev: LUÔN dùng var(--xxx) cho màu, bo góc, khoảng cách.
   ============================================================ */

:root {
  /* ---- Thương hiệu ---- */
  --bni-red: #C8102E;        /* thanh header, nút chính, tab đang chọn */
  --bni-red-dark: #AC0E27;   /* trạng thái hover của nút chính */
  --bni-navy: #1F3E6E;       /* khối "Việc cần làm", mốc điểm kế tiếp, nhấn phụ */

  /* ---- Đèn giao thông — CHỈ dùng để biểu thị mức điểm ----
     Ngoại lệ duy nhất: nút "Xác nhận & công bố" ở bước 4 wizard. */
  --lt-green: #1E8E3E;
  --lt-amber: #E0A106;
  --lt-amber-ink: #B37E00;   /* chữ vàng trên nền sáng, đủ tương phản */
  --lt-red: #D93025;
  --lt-gray: #B4B9C2;        /* chưa có điểm */

  /* ---- Chữ ---- */
  --ink: #15181F;            /* tiêu đề, số liệu chính */
  --ink-2: #454B57;          /* nội dung */
  --muted: #7A828F;          /* nhãn, chú thích */
  --faint: #98A0AC;          /* nhãn mờ, số thứ tự */
  --ghost: #C3C8D0;          /* mốc chưa đạt */

  /* ---- Nền và đường kẻ ---- */
  --surface: #F4F5F8;        /* nền trang */
  --card: #FFFFFF;
  --line: #E3E6EB;           /* viền thẻ, viền bảng */
  --line-2: #EFF1F4;         /* đường kẻ trong thẻ */
  --hover: #FAFBFC;
  --thead: #F7F8FA;
  --sidebar: #141A24;

  /* ---- Nền trạng thái ---- */
  --warn-bg: #FBF7EC; --warn-bd: #F0E2C0; --warn-tx: #6B5416; --warn-ink: #5A4510;
  --err-bg:  #FDEDEC; --err-bd:  #F5CFCC; --err-tx:  #8C2018; --err-ink:  #6E1911;
  --info-bg: #F1F5FB; --info-bd: #D9E3F2; --info-tx: #3B4C66; --info-ink: #26364D;
  --ok-bg:   #EDF6EF; --ok-bd:   #CDE7D4; --ok-tx:   #1E5A32;

  /* ---- Bo góc ---- */
  --r-sm: 6px;   /* nút, input, ô mốc */
  --r-md: 10px;  /* thẻ */
  --r-lg: 14px;  /* khung màn hình */
  --r-pill: 100px;

  /* ---- Khoảng cách (requirements.md C.3) ---- */
  --sp-2: 2px;   --sp-3: 3px;   --sp-5: 5px;   --sp-6: 6px;   --sp-7: 7px;
  --sp-9: 9px;   --sp-10: 10px; --sp-11: 11px; --sp-12: 12px; --sp-14: 14px;
  --sp-16: 16px; --sp-18: 18px; --sp-20: 20px; --sp-22: 22px; --sp-24: 24px;

  /* ---- Chữ ---- */
  --font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;

  --fs-h1: 19px;      /* tiêu đề trang */
  --fs-h2: 15px;      /* tiêu đề khối */
  --fs-h3: 13.5px;    /* tiêu đề thẻ */
  --fs-body: 12.5px;  /* nội dung */
  --fs-sm: 11.5px;
  --fs-xs: 11px;      /* nhãn phụ */
  --fs-score: 44px;   /* điểm lớn */
  --fs-score-m: 38px; /* điểm lớn trên mobile */
  --fs-metric: 22px;  /* điểm thẻ chỉ số */

  /* ---- Layout ---- */
  --sidebar-w: 206px;
  --shadow-card: 0 12px 30px -14px rgba(20, 25, 40, .28);
  --shadow-pop: 0 10px 34px -10px rgba(20, 25, 40, .3);
}