/* ============================================
   DESIGN TOKENS — Nguồn chân lý duy nhất
   KHÔNG chỉnh sửa file này khi thêm bài viết.
   ============================================ */

:root {
  /* ===== Màu nền & chữ ===== */
  --color-bg: #FFFBFE;
  --color-bg-alt: #FFF1F6;
  --color-ink: #241F2B;
  --color-ink-soft: #4A4552;
  --color-muted: #8B8798;
  --color-border: #F0E7ED;

  /* ===== Accent ===== */
  --color-primary: #E6247A;
  --color-primary-hover: #C71D68;
  --color-secondary: #3E82FF;

  /* ===== Màu chuyên mục (pastel) ===== */
  --cat-doi-song-bg: #FFE8CC;   --cat-doi-song-text: #8A5A1E;
  --cat-cong-nghe-bg: #DCE8FF;  --cat-cong-nghe-text: #2A509E;
  --cat-am-thuc-bg: #FFE3EC;    --cat-am-thuc-text: #A22459;
  --cat-du-lich-bg: #DFF5E8;    --cat-du-lich-text: #1F7A48;
  /* Thêm chuyên mục mới: chỉ thêm 1 cặp biến --cat-{slug}-bg / -text ở đây */

  /* ===== Typography ===== */
  --font-display: 'Baloo 2', system-ui, sans-serif;
  --font-body: 'Be Vietnam Pro', system-ui, sans-serif;
  --font-utility: 'Inter', system-ui, sans-serif;

  --fs-h1: clamp(28px, 4vw, 40px);
  --fs-h2: clamp(22px, 3vw, 28px);
  --fs-h3: 20px;
  --fs-body: 17px;
  --fs-caption: 13px;
  --lh-body: 1.65;

  /* ===== Spacing (scale 4px) ===== */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ===== Bo góc & bóng đổ ===== */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-card: 0 4px 16px rgba(36, 31, 43, 0.06);
  --shadow-card-hover: 0 8px 24px rgba(36, 31, 43, 0.10);

  /* ===== Layout ===== */
  --container-max: 1120px;
  --container-pad: var(--sp-5);
}