:root {
  /* ===== Màu thương hiệu City Farm (nguồn sự thật) ===== */
  --cf-deep:   #143F2B; /* Xanh Sâu: ô logo, chữ chính, nút chính */
  --cf-forest: #1F5E3B; /* Xanh Rừng: nền mảng lớn, liên kết, giá */
  --cf-sprout: #7BC043; /* Xanh Mầm: điểm nhấn tươi (không dùng làm nền cho chữ trắng/kem) */
  --cf-gold:   #E6C77A; /* Vàng Sáng: lá logo, điểm nhấn trên nền tối */
  --cf-gold-dark: #8A6A1F; /* Vàng Sẫm: chữ/biểu tượng vàng trên nền sáng */
  --cf-cream:  #F6F4EC; /* Kem: nền trang, chữ trên nền xanh */
  --cf-water:  #1F7A91; /* Xanh Nước: nhóm thủy canh (chữ trắng đọc được) */
  --cf-sun:    #E8913A; /* Cam Nắng: khuyến mại, nút mua (chữ luôn là mực) */
  --cf-night:  #0F241A; /* Gần đen: dòng quà tặng cao cấp */
  --cf-ink:    #16261C; /* Mực: chữ nội dung */
  --cf-muted:  #5A6B5F; /* Chữ phụ, chú thích */
  --cf-leaf-text: #4E7A2E; /* Xanh lá dùng cho chữ nhỏ trên nền kem/trắng */
  --cf-border: #DAD6C6; /* Viền, đường kẻ */
  --cf-white:  #FFFFFF;

  /* ===== Vai trò (dùng cái này trong giao diện) ===== */
  --cf-bg: var(--cf-cream);
  --cf-surface: var(--cf-white);
  --cf-text: var(--cf-ink);
  --cf-heading: var(--cf-deep);
  --cf-link: var(--cf-forest);
  --cf-link-hover: var(--cf-deep);
  --cf-btn-bg: var(--cf-deep);
  --cf-btn-text: var(--cf-cream);
  --cf-btn-bg-hover: var(--cf-forest);
  --cf-cta-bg: var(--cf-sun);      /* nút mua / khuyến mại */
  --cf-cta-text: var(--cf-ink);
  --cf-price: var(--cf-forest);
  --cf-price-old: var(--cf-muted);

  /* ===== Chữ ===== */
  --cf-font-body: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --cf-font-logo: 'Outfit', 'Be Vietnam Pro', sans-serif; /* chỉ cho chữ City Farm trong logo */
  --cf-fs-body: 1rem;      /* 16px */
  --cf-fs-small: 0.875rem; /* 14px, nhỏ nhất */
  --cf-fs-h3: 1.5rem;
  --cf-fs-h2: 2rem;
  --cf-fs-h1: clamp(2rem, 4vw, 3rem);
  --cf-lh-body: 1.6;
  --cf-lh-heading: 1.15;

  /* ===== Hình khối ===== */
  --cf-radius-sm: 8px;
  --cf-radius-md: 12px;
  --cf-radius-lg: 16px;
  --cf-shadow: 0 1px 3px rgba(20, 63, 43, .18);
  --cf-space-1: 4px; --cf-space-2: 8px; --cf-space-3: 12px; --cf-space-4: 16px;
  --cf-space-5: 24px; --cf-space-6: 32px; --cf-space-7: 48px; --cf-space-8: 72px;
}