/* ============================================================
   tokens.css — BỘ TOKEN MẶC ĐỊNH (trung tính, offline-safe)
   → Đổi thương hiệu: chỉ sửa các biến trong :root dưới đây.
   ============================================================ */
:root {
  /* === BRAND KOALA HOUSE (4 màu gốc từ Figma) === */
  --cl-red:    #e15e57;  /* Main/Red  — CTA, nhấn nóng */
  --cl-blue:   #044c7f;  /* Main/Blue — thương hiệu chính, tiêu đề */
  --cl-yellow: #f5bf1b;  /* Main/Yellow — điểm nhấn vui tươi */
  --cl-green:  #8eaf3d;  /* Main/Green — điểm nhấn phụ */

  /* Ánh xạ sang hệ token trừu tượng (giữ fx-btn hoạt động) */
  --cl-main: var(--cl-blue);   /* màu nhấn chính — link, tiêu đề */
  --cl-s1:   #f07a35;          /* cam CTA (nút "Nhận biểu phí") */
  --cl-s2:   #d9631f;          /* cam đậm — hover */

  /* Surface tối */
  --cl-hero: #044c7f;   /* nền hero/khối xanh */
  --cl-dark: #033a61;   /* footer + khối xanh sâu */
  --cl-header: rgba(255,255,255,.85); /* header trong suốt */
  --cl-header-solid: #FFFFFF;          /* header khi cuộn */

  /* Surface sáng */
  --cl-paper:   #FFFFFF; /* nền trang chính */
  --cl-paper-2: #F4F7EC; /* khối xen kẽ (ngả xanh lá nhạt) */
  --cl-cream:   #FEFBF3; /* nền kem ấm */
  --cl-line:    #E7E2D6; /* hairline */

  /* Text */
  --cl-ink:   #1f2a37;   /* chữ chính */
  --cl-muted: #5b6b7b;   /* chữ phụ */

  /* Font KOALA — Montserrat (chữ thường) + Baloo 2 (tiêu đề) */
  --ff-base:    "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ff-display: "Baloo 2", "Montserrat", system-ui, sans-serif;
  --ff-tag:     "Montserrat", system-ui, sans-serif;

  /* === HỆ THỐNG === */
  --fs-title: 2rem; --fs-2xl: 1.5rem; --fs-lg: 1.125rem; --fs-base: 1rem;
  --lh-tight: 1.12; --lh-normal: 1.5; --lh-relaxed: 1.7;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --radius-md: 0.5rem; --radius-lg: 1rem;
  --dur: 300ms; --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html { font-size: 14px; overflow-x: clip; }
@media (min-width: 1024px) { html { font-size: 16px; } }

body {
  font-family: var(--ff-base);
  color: var(--cl-ink);
  background: var(--cl-paper);
  line-height: var(--lh-normal);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; transition: color var(--dur) var(--ease); }
::selection { background: var(--cl-s1); color: #fff; }