/**
 * Brand tokens — hệ thiết kế "Poster" (nền sáng), nguồn chân lý là khối
 * <style> của templates/pages/landing.html (đã live production 2026-07-25,
 * đã QA). File này CHỈ chứa custom properties trong :root — TUYỆT ĐỐI
 * KHÔNG thêm bất kỳ selector nào áp style lên phần tử (không `body{}`,
 * không `h1{}`, v.v).
 *
 * Lý do bắt buộc: file được nạp cho TOÀN SITE qua hooks.py
 * (web_include_css + app_include_css) — nếu ở đây có một rule như
 * `body{background:...}` thì nó sẽ đè lên Desk Frappe, trang blog, và mọi
 * trang khác ngoài dự định. Chỉ biến (custom properties không tự áp dụng
 * style) mới an toàn tuyệt đối để nạp toàn site.
 *
 * Trang marketing dùng các biến này CỘNG VỚI brand-marketing.css (primitive
 * thật sự, có selector — chỉ trang marketing tự link tường minh, KHÔNG nạp
 * qua hooks). Xem docs/design-system-poster.md để biết cách dùng + primitive
 * có sẵn + checklist chuyển 1 trang cũ sang hệ mới.
 */
:root{
  /* ---- Màu (trích nguyên landing.html) ---- */
  --paper:#FFF8E7;      /* nền chính toàn trang — "giấy/bơ" */
  --paper-2:#FFFFFF;    /* nền thẻ/card/khối nổi, tương phản nhẹ với --paper */
  --black:#111111;      /* chữ chính, mọi viền 3px, nền đảo (footer đen, tier đen…) */
  --red:#E63946;        /* nhấn CTA chính / cảnh báo / highlight — DÙNG CHO NỀN/VIỀN/BÓNG */
  --red-text:#D32F3C;   /* đỏ dành RIÊNG cho CHỮ: --red chỉ đạt 3.94:1 trên nền bơ (cần 4.5:1);
                           bản này đạt 4.68:1 trên bơ và 4.95:1 trên trắng, vẫn ra đỏ */
  --cobalt:#1D4ED8;     /* nhấn phụ / link / tier giữa */
  --ink-soft:#3A3A38;   /* chữ phụ (lead, mô tả, chú thích) trên nền paper */

  /* ---- Viền + shadow "hard" (đặc, không mềm, không gradient) ---- */
  --border-w:3px;              /* viền chính: card / button / section / header */
  --border-w-thin:2px;         /* viền phụ: chip, browser-bar, divider, why-list */
  --shadow-black:6px 6px 0 var(--black);
  --shadow-black-sm:3px 3px 0 var(--black);   /* trạng thái hover/active (dịch 2px,2px) */
  --shadow-red:5px 5px 0 var(--red);
  --shadow-red-sm:3px 3px 0 var(--red);
  --shadow-cobalt:5px 5px 0 var(--cobalt);

  /* ---- Font stack ---- */
  --font-display:system-ui,-apple-system,"Helvetica Neue","Arial Black",Arial,sans-serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  /* ---- Thang chữ (fluid clamp — đúng số landing.html đang dùng) ---- */
  --fs-mega:clamp(2.9rem,9vw,7rem);   /* tít lớn nhất, vd h1 hero (.h-mega) */
  --fs-h2:clamp(2rem,5vw,3.2rem);     /* h2 mở đầu mỗi .section */
  --fs-body:17px;                     /* cỡ chữ body mặc định */
  --fs-lead:1.15rem;                  /* đoạn dẫn nhập ngay dưới tít */
  --fs-small:.85rem;                  /* nav, nhãn phụ, footer link */

  /* ---- Khoảng cách (spacing scale — dùng cho primitive/trang mới; landing
     giữ nguyên số clamp() riêng lẻ của nó, KHÔNG đổi sang biến này để tránh
     rủi ro lệch pixel) ---- */
  --space-1:.5rem;
  --space-2:1rem;
  --space-3:1.5rem;
  --space-4:2rem;
  --space-5:clamp(3rem,7vw,5.5rem);   /* nhịp đứng giữa các section */
  --space-6:clamp(1rem,4vw,2.5rem);   /* padding ngang trong .wrap */

  /* ---- Layout ---- */
  --container:1220px;          /* max-width của .wrap */
}