/* 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) — tông "Ocean Royale" phối từ 5 màu gốc:
     navy #03045E · brand blue #023EBA · cyan #00B4D8 · ice #CAF0F8 · CTA vàng #FBB02D.
     Mỗi site ghi đè trong overrides/tokens.css qua màn "Bộ màu nhận diện". */

  /* Brand */
  --hcd-color-primary: #023eba;
  --hcd-color-primary-dark: #03045e;
  --hcd-color-primary-light: #caf0f8;
  --hcd-color-secondary: #03045e;

  /* CTA */
  --hcd-color-accent: #fbb02d;
  --hcd-color-accent-hover: #e39a16;

  /* Text */
  --hcd-color-text: #0b1b4d;
  --hcd-color-text-muted: #5a6b93;
  --hcd-color-text-light: #97a4c4;
  --hcd-color-text-inverse: #ffffff;
  --hcd-color-link: #023eba;
  --hcd-color-link-hover: #03045e;

  /* Background */
  --hcd-color-bg: #ffffff;
  --hcd-color-bg-soft: #eaf7fc;
  --hcd-color-surface: #ffffff;
  --hcd-color-bg-dark: #03045e;

  /* Border */
  --hcd-color-border: #d5e6f5;
  --hcd-color-border-active: #00b4d8;

  /* Status */
  --hcd-color-success: #10b981;
  --hcd-color-warning: #f59e0b;
  --hcd-color-danger: #e5484d;
  --hcd-color-info: #00b4d8;
  --hcd-color-rating: #fbb02d;

  /* Commerce */
  --hcd-color-price: #e5484d;
  --hcd-color-old-price: #97a4c4;
  --hcd-color-sale-badge: #fb6d3a;
}