/**
 * tokens.css — PHASE 9.1 (ĐÃ SỬA — dùng ĐÚNG bảng màu thật có sẵn) —
 * DESIGN SYSTEM — Design Tokens
 * ============================================================================
 * BẢN SỬA QUAN TRỌNG: Bản đầu tiên của file này (trước khi anh xác nhận
 * sửa) đã TỰ ĐẶT 1 bảng màu xanh dương KHÁC với bảng màu THẬT đã có sẵn
 * trong html/Css_Main.html (--bbv-primary: #155E75, --bbv-gold: #C9A227)
 * — lỗi do làm Phase 9.1 TRƯỚC khi đọc được file CSS gốc đó. Đã sửa lại
 * TOÀN BỘ bảng màu bên dưới để khớp CHÍNH XÁC 100% với màu thật đang chạy
 * production — không suy đoán, không tự chọn lại.
 *
 * Nạp file này TRƯỚC components.css. File này ĐƯỢC THIẾT KẾ ĐỂ TỰ ĐỦ
 * (self-sufficient) — nếu nạp SAU Css_Main.html (file gốc, đã có sẵn
 * --bbv-primary/--bbv-gold/--bbv-dark/--bbv-bg/--bbv-radius), các dòng
 * khai báo trùng tên bên dưới chỉ là GÁN LẠI ĐÚNG CÙNG GIÁ TRỊ (vô hại,
 * không ghi đè sai) — còn nếu dùng ĐỘC LẬP, file này vẫn có đủ toàn bộ
 * giá trị đúng, không phụ thuộc phải nạp sau Css_Main.html.
 * ============================================================================
 */

:root {
  /* ==========================================================================
     1. COLOR PALETTE — DÙNG ĐÚNG 2 MÀU THƯƠNG HIỆU THẬT đã có sẵn, mở rộng
     thành thang 50-900 bằng phép tính HSL (giữ NGUYÊN VẸN đúng Hue/Saturation
     gốc, chỉ đổi Lightness) — để có đủ sắc độ nhạt/đậm dùng cho nền Badge,
     hover, v.v. mà bản gốc (chỉ có 1 giá trị số) chưa cung cấp.
     ========================================================================== */

  /* --- Primary: "Xanh Teal đậm — chuyên nghiệp, tin cậy (dược phẩm)"
     (nguyên văn ghi chú từ Css_Main.html) — GỐC THẬT: #155E75 --- */
  --bbv-primary-50:  #F4F9FA;
  --bbv-primary-100: #E5F1F5;
  --bbv-primary-200: #C5E3ED;
  --bbv-primary-300: #8DCEE2;
  --bbv-primary-400: #40B4D8;
  --bbv-primary-500: #1F8BAD;
  --bbv-primary-600: #155E75;
  --bbv-primary-700: #10495C;
  --bbv-primary-800: #0B3644;
  --bbv-primary-900: #07232C;
  --bbv-primary: #155E75;
  --bbv-primary-rgb: 21, 94, 117;

  /* --- Gold (Accent): "Vàng đồng — điểm nhấn sang trọng, gắn thương hiệu
     Gia Bảo" (nguyên văn ghi chú từ Css_Main.html) — GỐC THẬT: #C9A227 --- */
  --bbv-gold-50:  #FAF9F5;
  --bbv-gold-100: #F3EFE2;
  --bbv-gold-200: #E9E0C3;
  --bbv-gold-300: #DECC91;
  --bbv-gold-400: #D7B95B;
  --bbv-gold-500: #C9A227;
  --bbv-gold-600: #A4831E;
  --bbv-gold-700: #826817;
  --bbv-gold-800: #604D10;
  --bbv-gold-900: #41340B;
  --bbv-gold: #C9A227;

  /* --- Dark: nền Sidebar/chữ thương hiệu đậm — GỐC THẬT: #0B1F2E --- */
  --bbv-dark: #0B1F2E;

  /* --- Success / Warning / Danger / Info — CHƯA có trong hệ thống gốc,
     bổ sung MỚI, dựa trên thang Tailwind CSS đã kiểm chứng WCAG AA. --- */
  --bbv-success-50:  #f0fdf4;
  --bbv-success-500: #22c55e;
  --bbv-success-600: #16a34a;
  --bbv-success-700: #15803d;

  --bbv-warning-50:  #fffbeb;
  --bbv-warning-500: #f59e0b;
  --bbv-warning-600: #d97706;
  --bbv-warning-700: #b45309;

  --bbv-danger-50:  #fef2f2;
  --bbv-danger-500: #ef4444;
  --bbv-danger-600: #dc2626;
  --bbv-danger-700: #b91c1c;

  --bbv-info-50:  #ecfeff;
  --bbv-info-500: #06b6d4;
  --bbv-info-600: #0891b2;
  --bbv-info-700: #0e7490;

  /* --- Neutral / Gray scale --- */
  --bbv-gray-50:  #F7F9FA;
  --bbv-gray-100: #F3F5F7;
  --bbv-gray-200: #e7eaf0;
  --bbv-gray-300: #cbd5e1;
  --bbv-gray-400: #8a97a5;
  --bbv-gray-500: #6f8194;
  --bbv-gray-600: #475569;
  --bbv-gray-700: #334155;
  --bbv-gray-800: #1e293b;
  --bbv-gray-900: #0f172a;

  /* ==========================================================================
     2. TYPOGRAPHY — GIỮ NGUYÊN Be Vietnam Pro
     ========================================================================== */
  --bbv-font-primary: 'Be Vietnam Pro', 'Segoe UI', Roboto, Arial, sans-serif;
  --bbv-font-mono-numeric: 'Inter', 'Be Vietnam Pro', -apple-system, sans-serif;

  --bbv-fs-xs:   0.75rem;
  --bbv-fs-sm:   0.875rem;
  --bbv-fs-base: 1rem;
  --bbv-fs-lg:   1.125rem;
  --bbv-fs-xl:   1.25rem;
  --bbv-fs-2xl:  1.5rem;
  --bbv-fs-3xl:  1.875rem;
  --bbv-fs-4xl:  2.25rem;

  --bbv-fw-regular:  400;
  --bbv-fw-medium:   500;
  --bbv-fw-semibold: 600;
  --bbv-fw-bold:     700;

  --bbv-lh-tight:   1.25;
  --bbv-lh-normal:  1.5;
  --bbv-lh-relaxed: 1.75;

  /* ==========================================================================
     3. SPACING
     ========================================================================== */
  --bbv-space-1:  0.25rem;
  --bbv-space-2:  0.5rem;
  --bbv-space-3:  0.75rem;
  --bbv-space-4:  1rem;
  --bbv-space-5:  1.25rem;
  --bbv-space-6:  1.5rem;
  --bbv-space-8:  2rem;
  --bbv-space-10: 2.5rem;
  --bbv-space-12: 3rem;

  /* ==========================================================================
     4. RADIUS — [PHASE 5B-1] Thu gọn thang bo góc theo phong cách
     Stripe/Linear/shadcn (sắc nét, chuyên nghiệp hơn — trước đây 16px cho
     Card hơi "tròn trịa" kiểu app di động). Đổi tỉ lệ nhưng GIỮ NGUYÊN
     tên biến — mọi Component dùng var(--bbv-radius-*) tự động đổi theo. */
  --bbv-radius-sm:   0.375rem;  /* 6px  — Badge nhỏ, input compact */
  --bbv-radius-md:   0.5rem;    /* 8px  — Button, Input, Dropdown */
  --bbv-radius-lg:   0.75rem;   /* 12px — Card, Table, Modal */
  --bbv-radius-xl:   1rem;      /* 16px — khối lớn (Login Card...) */
  --bbv-radius-full: 9999px;
  --bbv-radius: 0.75rem;

  /* ==========================================================================
     5. SHADOW — GIỮ NGUYÊN 2 giá trị đã có sẵn
     ========================================================================== */
  /* [PHASE 5B-1 — Visual Refresh] Giảm cường độ Shadow toàn hệ thống theo
     đúng yêu cầu "vừa phải, không nặng nề, ưu tiên Border mảnh" — tham
     chiếu phong cách Stripe/Linear/shadcn (card dựa vào viền 1px là chính,
     shadow chỉ tạo chiều sâu rất nhẹ, không đổ bóng lan rộng). Giữ
     nguyên số lượng token/tên biến — mọi nơi đang dùng var(--bbv-shadow-*)
     tự động nhận giá trị mới, không cần sửa từng Component. */
  --bbv-shadow-xs: 0 1px 2px rgba(11, 31, 46, .04);
  --bbv-shadow-sm: 0 1px 3px rgba(11, 31, 46, .06), 0 1px 2px rgba(11, 31, 46, .04);
  --bbv-shadow-md: 0 4px 12px rgba(11, 31, 46, .08), 0 2px 4px rgba(11, 31, 46, .05);
  --bbv-shadow-lg: 0 8px 24px rgba(11, 31, 46, .10), 0 2px 6px rgba(11, 31, 46, .06);
  --bbv-shadow-xl: 0 20px 50px rgba(0, 0, 0, .22);
  --bbv-shadow: var(--bbv-shadow-sm);
  --bbv-shadow-hover: var(--bbv-shadow-md);

  /* ==========================================================================
     6. BORDER
     ========================================================================== */
  --bbv-border-width: 1px;
  --bbv-border-color: var(--bbv-gray-200);
  --bbv-border-color-strong: var(--bbv-gray-300);

  /* ==========================================================================
     7. Ý NGHĨA SEMANTIC
     ========================================================================== */
  --bbv-color-bg-page:      var(--bbv-gray-100);
  --bbv-color-bg-surface:   #ffffff;
  --bbv-color-bg-subtle:    var(--bbv-gray-50);
  --bbv-color-text-primary:   var(--bbv-dark);
  --bbv-color-text-secondary: var(--bbv-gray-500);
  --bbv-color-text-muted:     var(--bbv-gray-400);
  --bbv-color-text-on-primary: #ffffff;

  --bbv-transition-fast: 120ms ease;
  --bbv-transition-base: 200ms ease;

  /* ==========================================================================
     9. LAYOUT — BỔ SUNG PHASE 1 (UI Revamp) — trước đây 4 token này CHỈ
     tồn tại trong khối <style> inline của admin/index.html (KHÔNG có ở đây),
     khiến tokens.css chưa thật sự "tự đủ" như tài liệu đầu file mô tả.
     Giá trị lấy ĐÚNG NGUYÊN VĂN từ bản inline gốc đang chạy Production,
     KHÔNG đổi số — chỉ dời vị trí khai báo về đúng 1 nguồn duy nhất.
     ========================================================================== */
  --bbv-sidebar-w: 260px;
  --bbv-bg: #F3F5F7;
  --bbv-topbar-bg: #ffffff;
  --bbv-topbar-border: #e7eaf0;
}

/* ============================================================================
   8. DARK MODE — SỬA LẠI dùng ĐÚNG cơ chế Bootstrap 5.3 gốc đã có sẵn
   ([data-bs-theme="dark"], KHÔNG PHẢI [data-theme="dark"] tôi tự đặt sai ở
   bản đầu Phase 9.1). Chỉ mở rộng THÊM token mới, giữ nguyên 3 dòng gốc
   (--bbv-bg/--bbv-topbar-bg/--bbv-topbar-border) y hệt Css_Main.html.
   ============================================================================ */
[data-bs-theme="dark"] {
  --bbv-bg: #0B141C;
  --bbv-topbar-bg: #131E2A;
  --bbv-topbar-border: #223140;
  --bbv-color-bg-page:    var(--bbv-bg);
  --bbv-color-bg-surface: var(--bbv-topbar-bg);
  --bbv-color-bg-subtle:  #1a2530;
  --bbv-border-color:        var(--bbv-topbar-border);
  --bbv-border-color-strong: #2f4257;
  --bbv-color-text-primary:   #E8ECF1;
  --bbv-color-text-secondary: #A9B4C2;
  --bbv-color-text-muted:     #6f8194;

  /* ==========================================================================
     PHASE 9.9 — QA phát hiện: các token "-50" (nền nhạt) và "-700" (chữ
     đậm) vốn thiết kế CHO NỀN SÁNG — dùng nguyên trong Dark Mode khiến
     Badge/Row Background/Empty State icon/Skeleton/Focus ring bị SAI MÀU
     (nền hồng/vàng nhạt chói trên nền tối, chữ quá đậm khó đọc). Ghi đè
     lại ĐÚNG các token này khi Dark Mode bật — mọi nơi ĐÃ DÙNG các token
     này từ Phase 9.1 trở đi (Badge, Empty State, Skeleton, Row Background,
     License Badge, Focus ring) tự động được sửa đúng, KHÔNG cần sửa lại
     từng file component riêng lẻ.
     ========================================================================== */
  --bbv-success-50: #12542A; --bbv-success-700: #87E9AB;
  --bbv-warning-50: #5C360A; --bbv-warning-700: #F4BC7B;
  --bbv-danger-50:  #521414; --bbv-danger-700:  #E68989;
  --bbv-gray-300:   #7E8A9A;  /* Icon Empty State, viền đường phân cách nhạt */
  --bbv-gray-200:   #2A3A4A;  /* Dải sáng chạy trong hiệu ứng Skeleton */
  --bbv-primary-300: #44B2D4; /* Viền focus bàn phím — cần sáng hơn để nổi bật trên nền tối */
}