/* ==========================================================================
   BLA design tokens - nguồn sự thật duy nhất cho màu, chữ, khoảng cách, bo góc, đổ bóng.
   Nạp ở MỌI trang (độc lập Bootstrap/Tailwind). Component trong components/ chỉ dùng biến này,
   không ghi cứng giá trị. Các biến cũ (--bla-red, --bla-red-dark, --bla-yellow, --bla-black,
   --bla-grey, --bla-line, --bla-font, --bla-wrap) được GIỮ NGUYÊN tên để bla.css/bla-posts.css chạy như cũ.
   ========================================================================== */
:root {
  /* ----- Màu thương hiệu (theo CLAUDE.md) ----- */
  --bla-red: #ed1c24;          /* đỏ đặc trưng: nền lớn, chữ rất lớn, viền, icon */
  --bla-red-dark: #c4121a;     /* đỏ cho CHỮ NHỎ / nền nút: trắng trên #ed1c24 chỉ 4.38:1, trên #c4121a đạt AA */
  --bla-red-deeper: #9e0e14;   /* hover/active của nút đỏ */
  --bla-yellow: #ffc50f;
  --bla-yellow-dark: #e0a800;  /* hover của nút vàng */
  --bla-black: #1d0e1f;
  --bla-plum: #3a1a3d;         /* tím đen dùng cho gradient hero/CTA (đã có ở bla-posts.css) */

  /* ----- Màu trung tính và ngữ nghĩa ----- */
  --bla-text: var(--bla-black);
  --bla-text-muted: #595959;   /* meta, breadcrumb, gợi ý: >= 7:1 trên trắng */
  --bla-grey: #f4f5f7;
  --bla-line: #e5e7eb;
  --bla-surface: #ffffff;
  --bla-input-border: #8b8b8b; /* viền ô nhập: >= 3:1 trên trắng (WCAG 1.4.11) */
  --bla-placeholder: #6b6b6b;
  --bla-success: #146c43;
  --bla-success-bg: #e8f5ee;
  --bla-info: #0b5394;
  --bla-info-bg: #e7f0fa;
  --bla-warning: #7a5200;
  --bla-warning-bg: #fff6dc;
  --bla-danger: var(--bla-red-dark);
  --bla-danger-bg: #fdecee;
  --bla-focus: #1d0e1f;        /* vòng focus; trên nền tối đổi sang vàng bằng class .bla-on-dark */

  /* ----- Font ----- */
  --bla-font: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* ----- Thang chữ (theo báo cáo UX): thân 16px mobile / 17px desktop ----- */
  --bla-fs-xs: 12px;           /* nhỏ nhất được phép */
  --bla-fs-sm: 14px;
  --bla-fs-body: 16px;
  --bla-fs-lg: 18px;
  --bla-fs-h4: 20px;
  --bla-fs-h3: clamp(20px, 2.6vw, 26px);
  --bla-fs-h2: clamp(24px, 3.4vw, 34px);
  --bla-fs-h1: clamp(28px, 4.5vw, 44px);
  --bla-lh-body: 1.75;         /* 1.7-1.8 cho thân bài */
  --bla-lh-heading: 1.25;      /* >= 1.2: dấu tiếng Việt nhiều tầng */
  --bla-measure: 68ch;         /* độ dài dòng bài viết */

  /* ----- Khoảng cách (bước 4px) ----- */
  --bla-sp-1: 4px;
  --bla-sp-2: 8px;
  --bla-sp-3: 12px;
  --bla-sp-4: 16px;
  --bla-sp-5: 24px;
  --bla-sp-6: 32px;
  --bla-sp-7: 48px;
  --bla-sp-8: 64px;

  /* ----- Bo góc ----- */
  --bla-radius-sm: 4px;
  --bla-radius-md: 8px;
  --bla-radius-lg: 12px;
  --bla-radius-xl: 16px;
  --bla-radius-pill: 999px;

  /* ----- Đổ bóng ----- */
  --bla-shadow-sm: 0 1px 3px rgba(29, 14, 31, .12);
  --bla-shadow-md: 0 4px 14px rgba(29, 14, 31, .12);
  --bla-shadow-lg: 0 12px 32px rgba(29, 14, 31, .18);

  /* ----- Lớp xếp chồng ----- */
  --bla-z-dropdown: 50;
  --bla-z-header: 100;
  --bla-z-overlay: 1000;
  --bla-z-modal: 1100;

  /* ----- Kích thước ----- */
  --bla-wrap: 1400px;   /* khung nội dung chung: header, footer, trang chủ (.max-w-7xl), Bootstrap .container */
  --bla-tap: 44px;             /* vùng chạm tối thiểu */
  --bla-ease: .15s ease;
}

/* Desktop: chữ thân bài 17px */
@media (min-width: 992px) {
  :root { --bla-fs-body: 17px; }
}

/* Người dùng giảm chuyển động: component dùng biến này để tắt/giảm animation */
@media (prefers-reduced-motion: reduce) {
  :root { --bla-ease: 0s; }
}

/* Nền tối: vòng focus màu vàng để vẫn thấy rõ */
.bla-on-dark { --bla-focus: #ffc50f; }