/* tokens.css — Design tokens HCD: NGUỒN DUY NHẤT cho cỡ chữ (typography).
   • Section/mẫu CSS phải dùng var(--hcd-fs-*), KHÔNG hardcode px.
   • Đổi số ở đây → mọi nơi đổi theo.
   • Muốn tùy chỉnh riêng 1 site: ghi đè trong overrides/tokens.css (hệ thống không ghi đè file đó). */
:root {
  /* Bố cục (layout) — bề rộng khung nội dung tối đa của mọi section */
  --hcd-container: 1200px;

  /* Cỡ chữ (type scale) — cỡ lớn dùng clamp() để tự co trên mobile */
  --hcd-fs-display: clamp(30px, 4vw, 44px); /* tiêu đề hero */
  --hcd-fs-h1: clamp(26px, 3vw, 32px);
  --hcd-fs-h2: clamp(22px, 2.4vw, 26px);
  --hcd-fs-h3: 20px;
  --hcd-fs-xl: 22px;      /* giá sale nổi bật */
  --hcd-fs-lg: 18px;
  --hcd-fs-md: 15px;
  --hcd-fs-body: 16px;    /* mặc định */
  --hcd-fs-sm: 14px;
  --hcd-fs-xs: 13px;
  --hcd-fs-caption: 12px;

  /* Line-height */
  --hcd-lh-tight: 1.2;
  --hcd-lh-snug: 1.35;
  --hcd-lh-normal: 1.5;
  --hcd-lh-loose: 1.7;

  /* Font-weight */
  --hcd-fw-regular: 400;
  --hcd-fw-medium: 500;
  --hcd-fw-semibold: 600;
  --hcd-fw-bold: 700;

  /* Bộ màu nhận diện (mặc định). Mỗi site ghi đè trong overrides/tokens.css qua màn "Bộ màu nhận diện". */

  /* Brand */
  --hcd-color-primary: #0f5132;
  --hcd-color-primary-dark: #093d25;
  --hcd-color-primary-light: #e8f4ed;
  --hcd-color-secondary: #111827;

  /* CTA */
  --hcd-color-accent: #f5c400;
  --hcd-color-accent-hover: #dfaf00;

  /* Text */
  --hcd-color-text: #111827;
  --hcd-color-text-muted: #667085;
  --hcd-color-text-light: #98a2b3;
  --hcd-color-text-inverse: #ffffff;
  --hcd-color-link: #0f5132;
  --hcd-color-link-hover: #093d25;

  /* Background */
  --hcd-color-bg: #ffffff;
  --hcd-color-bg-soft: #f7f8fa;
  --hcd-color-surface: #ffffff;
  --hcd-color-bg-dark: #101412;

  /* Border */
  --hcd-color-border: #e4e7ec;
  --hcd-color-border-active: #0f5132;

  /* Status */
  --hcd-color-success: #16a34a;
  --hcd-color-warning: #f59e0b;
  --hcd-color-danger: #dc2626;
  --hcd-color-info: #0284c7;
  --hcd-color-rating: #f5b301;

  /* Commerce */
  --hcd-color-price: #dc2626;
  --hcd-color-old-price: #98a2b3;
  --hcd-color-sale-badge: #e11d48;
}