/* VeriQ Brand Tokens v2.0 – 31/10/2026
   Thay cho bảng màu cũ (royal blue #0052cc, cyan #00a3bf, vàng champagne #c5a059, amber #ffab00).
   Cách dùng: nhúng file này trước style.css, rồi thay dần các mã màu cứng bằng biến bên dưới.
   Font: <link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500&display=swap" rel="stylesheet"> */

:root {
  /* Màu thương hiệu */
  --vq-navy: #0B2545;          /* Màu chính: logo, tiêu đề, nền khối đậm */
  --vq-navy-deep: #071A33;     /* Nền footer, hover trên nền navy */
  --vq-teal: #0E8A74;          /* Màu nhấn "đã xác minh" cho đồ họa: đường đo trong logo, biểu tượng, viền (không đặt chữ trắng lên màu này) */
  --vq-teal-ink: #0B6E5D;      /* Nút chính và chữ màu nhấn (tương phản 6,2:1 với trắng) */
  --vq-mint: #3FD0B3;          /* Màu nhấn trên nền navy (logo đảo màu, điểm nhấn) */
  --vq-teal-soft: #E3F3EF;     /* Nền nhạt cho khối thông tin, huy hiệu */

  /* Trung tính (hơi ngả xanh để đi cùng navy và teal) */
  --vq-white: #FFFFFF;
  --vq-paper: #F5F7F6;         /* Nền phụ, thẻ */
  --vq-line: #D9E1DE;          /* Đường kẻ, viền */
  --vq-graphite: #33424D;      /* Chữ thân bài */
  --vq-muted: #66757F;         /* Chú thích, metadata */

  /* Màu trạng thái lỗi – CHỈ dùng cho kết quả kiểm tra, không dùng trang trí */
  --vq-sev-a: #C0362C;         /* A – Ưu tiên cao (an toàn, công năng) */
  --vq-sev-b: #B7791F;         /* B – Cần sửa (đồ họa, tem) */
  --vq-sev-b-ink: #8A5A12;     /* B – chữ trên nền trắng/nhạt */
  --vq-sev-c: #5A6B7B;         /* C – Thẩm mỹ */
  --vq-sev-q: #6D4BB8;         /* Q – Cần kiểm tra thêm */
  --vq-pass: #1F7A4C;          /* Đạt */
  --vq-sev-a-soft: #FBE4E1; --vq-sev-b-soft: #FBEFD9; --vq-sev-c-soft: #E6EBF0; --vq-sev-q-soft: #EEE8FA; --vq-pass-soft: #DFF2E7;

  /* Chữ */
  --vq-font: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --vq-font-data: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* số đo, mã lỗi, mã hồ sơ */
  --vq-h1: clamp(2rem, 4vw, 3rem);      /* 800, letter-spacing -0.02em */
  --vq-h2: clamp(1.5rem, 2.6vw, 2rem);  /* 700 */
  --vq-h3: 1.25rem;                     /* 700 */
  --vq-body: 1rem;                      /* 400, line-height 1.65, tối đa 65 ký tự/dòng */
  --vq-small: 0.875rem;
  --vq-label: 0.75rem;                  /* 600, chữ in hoa, letter-spacing 0.08em */

  /* Hình khối */
  --vq-radius-sm: 6px; --vq-radius: 10px; --vq-radius-lg: 16px;
  --vq-shadow: 0 1px 2px rgba(11, 37, 69, .06), 0 8px 24px -12px rgba(11, 37, 69, .18);
  --vq-space: 8px; /* lưới 8px */
}

/* Gợi ý áp dụng nhanh */
body { font-family: var(--vq-font); color: var(--vq-graphite); background: var(--vq-white); }
h1, h2, h3 { color: var(--vq-navy); letter-spacing: -0.02em; text-wrap: balance; }
.vq-btn-primary { background: var(--vq-teal-ink); color: #fff; border-radius: var(--vq-radius-sm); font-weight: 600; }
.vq-btn-primary:hover { background: var(--vq-navy); }
.vq-btn-secondary { background: transparent; color: var(--vq-navy); border: 1.5px solid var(--vq-navy); border-radius: var(--vq-radius-sm); }
.vq-data { font-family: var(--vq-font-data); font-variant-numeric: tabular-nums; }
.vq-badge-a { background: var(--vq-sev-a-soft); color: var(--vq-sev-a); }
.vq-badge-b { background: var(--vq-sev-b-soft); color: var(--vq-sev-b-ink); }
.vq-badge-c { background: var(--vq-sev-c-soft); color: var(--vq-sev-c); }
.vq-badge-q { background: var(--vq-sev-q-soft); color: var(--vq-sev-q); }
.vq-badge-pass { background: var(--vq-pass-soft); color: var(--vq-pass); }