/* KHUNG. Design & Build — design tokens ("Bộ bản vẽ sống")
   Màu: giấy bản vẽ · bê tông · than · xanh bản vẽ · cam an toàn (chỉ CTA & điểm nhấn) */
:root{
  /* màu */
  --kh-paper:#F4F3EE;        /* nền giấy bản vẽ */
  --kh-paper-2:#ECEAE3;      /* nền xen kẽ */
  --kh-white:#FFFFFF;
  --kh-concrete:#D9D7D1;     /* bê tông, đường kẻ đậm */
  --kh-concrete-2:#B9B6AE;   /* chữ phụ trên nền tối, kẻ đậm hơn */
  --kh-ink:#1C1C1C;          /* than */
  --kh-ink-2:#4A4A48;        /* chữ phụ */
  --kh-ink-3:#6B6B68;        /* chú thích */
  --kh-blue:#22406B;         /* xanh bản vẽ */
  --kh-blue-d:#172C4B;
  --kh-blue-l:#E8EDF4;
  --kh-orange:#F26B1D;       /* cam an toàn — CTA, điểm nhấn */
  --kh-orange-d:#C9540F;
  --kh-orange-l:#FDE9DD;
  --kh-ok:#2F7D4F;
  --kh-warn:#B8860B;
  --kh-err:#B3261E;
  --kh-line:rgba(28,28,28,.14);
  --kh-line-2:rgba(28,28,28,.28);
  --kh-grid:rgba(34,64,107,.07); /* lưới bản vẽ mờ */

  /* chữ */
  --kh-font-head:"Archivo","Be Vietnam Pro",system-ui,sans-serif;
  --kh-font-body:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --kh-font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --kh-fs-xs:.75rem;   /* 12 */
  --kh-fs-sm:.875rem;  /* 14 */
  --kh-fs-md:1rem;     /* 16 */
  --kh-fs-lg:1.125rem; /* 18 */
  --kh-fs-h3:clamp(1.15rem,1rem + .6vw,1.45rem);
  --kh-fs-h2:clamp(1.6rem,1.2rem + 1.8vw,2.6rem);
  --kh-fs-h1:clamp(2rem,1.3rem + 3.4vw,4rem);
  --kh-fs-num:clamp(2.2rem,1.6rem + 3vw,3.8rem);
  --kh-lh-body:1.7;
  --kh-lh-head:1.1;
  --kh-track:.04em;

  /* khoảng cách (nhịp 4px) */
  --kh-s1:4px;--kh-s2:8px;--kh-s3:12px;--kh-s4:16px;--kh-s5:20px;--kh-s6:24px;--kh-s8:32px;--kh-s10:40px;--kh-s12:48px;--kh-s16:64px;--kh-s20:80px;--kh-s24:96px;
  --kh-sec:clamp(56px,5vw + 24px,104px); /* padding dọc section */
  --kh-gutter:16px;
  --kh-wrap:1280px;
  --kh-wrap-narrow:800px;
  --kh-hd:64px;              /* chiều cao header */
  --kh-cta-h:60px;           /* thanh CTA dính đáy mobile */

  /* bo góc, viền, bóng — bo 2px, không đổ bóng mềm */
  --kh-r:2px;
  --kh-bw:1px;
  --kh-shadow:none;
  --kh-shadow-hard:4px 4px 0 var(--kh-ink); /* bóng cứng kiểu bản vẽ, dùng cho nút nổi bật */

  /* chuyển động */
  --kh-ease:cubic-bezier(.2,.7,.2,1);
  --kh-t-fast:.15s;
  --kh-t:.3s;
  --kh-t-slow:.6s;
  --kh-draw:2.4s;            /* thời gian vẽ nét SVG */
}
@media(min-width:900px){:root{--kh-gutter:32px;--kh-hd:76px}}
@media(prefers-reduced-motion:reduce){:root{--kh-t-fast:0s;--kh-t:0s;--kh-t-slow:0s;--kh-draw:0s}}