/*
 * Design tokens — Coolmate Newsroom
 * Trích từ Figma "CAMPAIGN Tháng 9 2026" (file 8l60f64xdWX11cZZ9euIQC)
 * Nguồn: node 357:56068 (Listing) + node 321:54736 (Details), qua Figma variable defs.
 * Enqueue file này TRƯỚC style.css của theme để mọi nơi khác dùng chung 1 nguồn biến số.
 */

:root {
  /* ---------- Màu — Neutral ---------- */
  --color-neutral-00: #ffffff;
  --color-neutral-50: #f8f8f8;
  --color-neutral-100: #f1f1f1;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d1d1d1;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #333333;
  --color-neutral-800: #1a1a1a;
  --color-neutral-900: #000000;

  /* ---------- Màu — Primary (link, nhấn) ---------- */
  --color-primary-400: #4c5ddd;
  --color-primary-500: #273bcd;
  --color-primary-700: #1f2fa4;

  /* ---------- Màu — trạng thái & phụ trợ ---------- */
  --color-error-500: #e00702;
  --color-accent-soft: #e9efeb;  /* nền phụ nhạt, xuất hiện ở cả 2 frame */
  --color-link: #2f5acf;         /* màu link trong nội dung bài viết (tag chuyên mục) */

  /* ---------- Typography — font family ---------- */
  --font-heading: 'Criteria CF', Georgia, serif;
  --font-body: 'Pangea', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---------- Typography — scale (Heading) ---------- */
  --text-h1-size: 65px;   --text-h1-line: 90px;   --text-h1-weight: 500; --text-h1-tracking: -2px; /* Hero/trang chủ */
  --text-h3-size: 44px;   --text-h3-line: 60px;   --text-h3-weight: 600; --text-h3-tracking: -2px; /* Section heading lớn */
  --text-h5-size: 28px;   --text-h5-line: 41px;   --text-h5-weight: 600; --text-h5-tracking: -2px; /* Tiêu đề bài viết (H1 thực tế trên trang Details) */
  --text-sub1-size: 18px; --text-sub1-line: 26px;

  /* ---------- Typography — scale (Body) ---------- */
  --text-body1-size: 18px; --text-body1-line: 24px;
  --text-body2-size: 16px; --text-body2-line: 24px; /* cỡ chữ mặc định cho đoạn văn/paragraph */
  --text-body3-size: 14px; --text-body3-line: 20px; /* caption, metadata (ngày đăng, lượt xem) */

  /* ---------- Spacing ---------- */
  --space-2xs: 8px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 40px;
  --space-3xl: 60px;

  /* ---------- Bo góc ---------- */
  --radius-sm: 3px;
  --radius-md: 12px;
}

/* ============================================================
   Responsive typography — thu nhỏ cỡ chữ theo màn hình
   ============================================================
   Vì gần như mọi heading/đoạn văn trong theme đều lấy cỡ chữ từ các biến
   --text-*-size/--text-*-line ở :root bên trên (banner đen, H1 hero,
   section heading, tiêu đề bài viết, tiêu đề thẻ card...), chỉ cần đổi lại
   GIÁ TRỊ của đúng các biến đó ở 2 breakpoint dưới đây là toàn bộ chữ trong
   site tự thu nhỏ theo, không phải sửa riêng từng dòng CSS ở style.css.
   Cỡ chữ ở .article-page (nút A-/A+) vẫn cộng thêm/bớt đúng 2px mỗi lần bấm
   dựa trên giá trị nền này, nên không bị ảnh hưởng bởi việc đổi breakpoint. */
@media (max-width: 1024px) {
	:root {
		--text-h1-size: 48px; --text-h1-line: 58px; --text-h1-tracking: -1px;
		--text-h3-size: 34px; --text-h3-line: 44px; --text-h3-tracking: -1px;
		--text-h5-size: 24px; --text-h5-line: 32px;
		--text-sub1-size: 17px; --text-sub1-line: 24px;
		--text-body1-size: 17px; --text-body1-line: 24px;
	}
}
@media (max-width: 640px) {
	:root {
		--text-h1-size: 32px; --text-h1-line: 40px; --text-h1-tracking: -0.5px;
		--text-h3-size: 26px; --text-h3-line: 34px; --text-h3-tracking: -0.5px;
		--text-h5-size: 20px; --text-h5-line: 28px;
		--text-sub1-size: 16px; --text-sub1-line: 22px;
		--text-body1-size: 16px; --text-body1-line: 22px;
		--text-body2-size: 15px; --text-body2-line: 22px;
		--text-body3-size: 13px; --text-body3-line: 18px;

		/* Khoảng cách lớn giữa các block (padding section, margin dưới hero...)
		   cũng giảm theo để trang đỡ trống trải trên màn hình nhỏ. */
		--space-3xl: 40px;
		--space-2xl: 28px;
		--space-xl: 24px;
	}
}