/*
 * assets/css/tokens.css
 * Token giao diện dùng chung cho toàn site công khai (CLAUDE.md mục 2).
 * Nạp trước style.css / site.css trong includes/head_public.php.
 * tailwind/tailwind.config.js đọc thẳng các giá trị này; đổi ở đây thì build lại
 * assets/css/tw.css (tailwind/README.md).
 */
:root {
  /* nền: sáng, ấm rất nhẹ (chủ site chọn 2026-10-29, tham khảo copycatcafe.com) */
  --cream: #FCFAF8;
  --paper: #FFFFFF;
  --tint: #F5EEE6;
  --img-ph: #F0E8DE;
  /* đường kẻ */
  --line: #EDE6DC;
  --line-strong: #CDBDA8;
  /* chữ */
  --ink: #2B2622;
  --ink-2: #3E3630;
  --muted: #6A5F55;
  /* màu nhấn gỗ trầm (duy nhất) */
  --wood: #6B4A35;
  --wood-hover: #4A3324;
  /* khối tối */
  --deep: #33261D;
  --on-deep: #F3EADF;
  --on-deep-2: #D9C9B6;
  --on-deep-muted: #BFAF9C;
  --on-deep-accent: #E3C9A8;

  /* phụ trợ suy ra từ các token trên */
  --deep-2: #4A3324;                       /* = --wood-hover, nền tối lớp 2 */
  --line-on-deep: rgba(243, 234, 223, .16);
  --line-soft: #F2EBE3;                    /* kẻ trong dropdown */

  /* bo góc */
  --r-btn: 14px;
  --r-input: 12px;
  --r-card: 24px;
  --r-media: 28px;

  /* chữ */
  --font-sans: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Tiêu đề dùng cùng Mulish (đậm hơn); giữ tên --font-serif để markup/CSS cũ không phải sửa */
  --font-serif: var(--font-sans);

  /* layout */
  --container: 1200px;
  --gutter: 24px;
  --section-y: 96px;
  --header-h: 76px;                        /* chiều cao header sticky – dùng cho scroll-padding */
}
@media (max-width: 480px) {
  :root { --gutter: 20px; --section-y: 64px; }
}
@media (max-width: 1023.98px) {
  :root { --header-h: 64px; }
}