/*
 * DHTD.VN — Brand Color Tokens
 * Nguồn: bảng màu chính thức trích từ logo công ty (Solution For Future)
 * Cập nhật: 25/08/2026 — dùng làm chuẩn tone màu cho theme WordPress (child theme)
 */

:root {
  /* ---- Core brand palette (từ logo) ---- */
  --dhtd-navy:      #163E7C; /* Primary — chữ "DHTD", header, nút chính, link */
  --dhtd-sky:        #2E8FCE; /* Secondary — gradient/circuit trong logo, hover state, icon */
  --dhtd-gold:      #F5A623; /* Accent — nốt tròn trung tâm logo, dùng CÓ CHỦ ĐÍCH cho CTA/badge nổi bật */
  --dhtd-white:      #FFFFFF; /* Nền trên block màu đậm, chữ trên nền navy/sky */
  --dhtd-light-bg:  #F3F7FC; /* Nền section phụ, card, alternating background */
  --dhtd-text:      #26364A; /* Màu chữ chính trên nền sáng (thay cho đen thuần) */
  --dhtd-muted:      #64748B; /* Chữ phụ, caption, placeholder, border nhẹ */

  /* ---- Derived / utility tokens (suy ra từ core, dùng khi triển khai theme) ---- */
  --dhtd-navy-hover:  #10305F; /* Navy đậm hơn ~15% — hover/active cho nút/link chính */
  --dhtd-sky-hover:   #2478AF; /* Sky đậm hơn ~15% — hover cho outline button/secondary */
  --dhtd-gold-hover:  #DB9110; /* Gold đậm hơn ~10% — hover cho CTA màu gold */
  --dhtd-border:      #DCE6F2; /* Border/divider nhẹ trên nền sáng, thay cho border xám thuần */
  --dhtd-success:     #2E9E6B; /* Trạng thái thành công (form submit, badge còn hàng) — ngoài core palette, cần xác nhận nếu dùng rộng */
  --dhtd-danger:      #D64545; /* Trạng thái lỗi/cảnh báo form — ngoài core palette, cần xác nhận nếu dùng rộng */

  /* ---- Vertical rhythm tokens (Task 54, 11/09/2026) ----
     Chuẩn hóa khoảng cách section toàn site — dùng chung cho home.css/
     about.css/contact.css/solutions.css (blog.css/catalog.css đã cân đối,
     không cần đổi). Section chỉ khai `padding: var(--dhtd-section-space) 0;`
     (thay vì hard-code px) — responsive tự động qua 2 media query override
     giá trị token bên dưới, KHÔNG cần lặp lại media query ở từng file. */
  --dhtd-section-space:    64px; /* section tiêu chuẩn — desktop */
  --dhtd-section-space-sm: 44px; /* section nhỏ/chuyển tiếp — desktop */
  --dhtd-hero-space:       64px; /* hero — desktop (56–72px tuỳ nội dung, 64 là mức trung bình dùng chung) */
  --dhtd-cta-space:        60px; /* CTA cuối trang — desktop */
}

@media (max-width: 900px) {
  :root {
    --dhtd-section-space:    52px; /* tablet: 48–56px */
    --dhtd-section-space-sm: 36px; /* tablet: 32–40px */
    --dhtd-hero-space:       56px;
    --dhtd-cta-space:        52px;
  }
}
@media (max-width: 600px) {
  :root {
    --dhtd-section-space:    44px; /* mobile: 40–48px */
    --dhtd-section-space-sm: 30px; /* mobile: 28–32px */
    --dhtd-hero-space:       44px;
    --dhtd-cta-space:        44px;
  }
}

/* ---- Gợi ý áp dụng (tham chiếu nhanh khi customize theme) ----
   - Header/nav background:      var(--dhtd-navy)
   - Nav text / logo text:        var(--dhtd-white)
   - Body text:                   var(--dhtd-text)
   - Muted text (caption, meta):  var(--dhtd-muted)
   - Section background xen kẽ:   var(--dhtd-light-bg)
   - Primary button:              bg var(--dhtd-navy) / hover var(--dhtd-navy-hover) / text var(--dhtd-white)
   - Secondary / outline button:  border var(--dhtd-sky) / text var(--dhtd-sky) / hover bg var(--dhtd-sky)
   - CTA nổi bật (Yêu cầu báo giá, Đặt lịch tư vấn): bg var(--dhtd-gold) / hover var(--dhtd-gold-hover) / text var(--dhtd-navy)
   - Link trong nội dung:          var(--dhtd-sky), hover var(--dhtd-navy)
   - Border/divider:               var(--dhtd-border)
------------------------------------------------------------------- */