/* ==========================================================================
   Chen Foods — Design tokens
   Màu được đo trực tiếp từ 4 ảnh thiết kế, không phải ước lượng bằng mắt.
   Mọi giá trị màu trong dự án phải tham chiếu file này. Không hardcode hex
   ở bất kỳ file nào khác.
   ========================================================================== */

:root {
  /* --- Màu thương hiệu --- */
  --red-600: #A81819;   /* hover của nút chính */
  --red-700: #9B1314;   /* NÚT CHÍNH, giá, link nhấn — đo từ nút "Thêm vào giỏ" */
  --red-800: #921514;   /* nút trên nền ảnh tối — đo từ nút "Mua ngay" ở hero */
  --red-900: #731110;   /* dải CTA đỏ cuối trang */

  /* --- Vàng đồng (accent) --- */
  --gold-400: #E0B96C;  /* gạch chân tiêu đề section */
  --gold-500: #CCA961;  /* eyebrow "Hơn 20 năm", nhãn trên nền tối */
  --gold-600: #B39152;  /* giá trong section tối */
  --gold-700: #7B613A;  /* chữ vàng cỡ nhỏ trên nền tối */

  /* --- Nền --- */
  --surface:      #FDF8F5;  /* nền trang */
  --surface-alt:  #F9F5EF;  /* section xen kẽ */
  --surface-card: #FAF2EC;  /* thẻ, accordion mở */
  --surface-deep: #F7F1E7;  /* thẻ sản phẩm trên nền alt */

  /* --- Nền tối --- */
  --ink-900: #141110;   /* header, section tối */
  --ink-850: #161514;   /* footer */

  /* --- Chữ --- */
  --text:        #2B241E;  /* chữ chính */
  --text-muted:  #6B5F55;  /* chữ phụ, mô tả */
  --text-faint:  #9A8C80;  /* chú thích */
  --text-invert: #FDF8F5;  /* chữ trên nền tối */
  --text-invert-muted: #C9BEB4;

  /* --- Đường kẻ --- */
  --line:        #E7DED2;  /* viền thẻ, divider trên nền sáng */
  --line-strong: #D6C9B8;
  --line-dark:   #2E2823;  /* divider trên nền tối */

  /* Nền dự phòng của hero khi chưa có ảnh thật */
  --hero-fallback: radial-gradient(120% 90% at 70% 45%, #5A2A18 0%, #2A1710 55%, #171110 100%);

  /* --- Chữ (font) --- */
  --font-display: "Playfair Display", "Lora", Georgia, serif;
  --font-body: "Be Vietnam Pro", "Inter", system-ui, -apple-system, sans-serif;

  /* Thang cỡ chữ — desktop 1440px */
  --fs-display: 3.25rem;  /* 52px — headline hero */
  --fs-h1: 2.5rem;        /* 40px — tên sản phẩm PDP */
  --fs-h2: 1.75rem;       /* 28px — tiêu đề section */
  --fs-h3: 1.25rem;       /* 20px — tiêu đề thẻ */
  --fs-lg: 1.0625rem;     /* 17px */
  --fs-base: 1rem;        /* 16px — body */
  --fs-sm: 0.875rem;      /* 14px — chú thích, nhãn */
  --fs-xs: 0.8125rem;     /* 13px — fine print */

  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-body: 1.65;

  /* --- Bố cục --- */
  --container: 1200px;
  --gutter: 24px;
  --pad-x: 32px;          /* lề trái/phải trên desktop */
  --section-y: 72px;      /* padding dọc mỗi section */
  --section-y-lg: 96px;   /* section rộng rãi hơn */

  /* --- Bo góc & viền --- */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --border: 1px solid var(--line);

  /* --- Đổ bóng — thiết kế dùng rất nhẹ, không dùng bóng nặng --- */
  --shadow-card: 0 1px 2px rgba(43, 36, 30, 0.04);
  --shadow-raised: 0 8px 24px rgba(43, 36, 30, 0.10);

  /* --- Chuyển động --- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 180ms;
}

@media (max-width: 1024px) {
  :root {
    --fs-display: 2.5rem;
    --fs-h1: 2rem;
    --fs-h2: 1.5rem;
    --pad-x: 24px;
    --section-y: 56px;
    --section-y-lg: 72px;
  }
}

@media (max-width: 640px) {
  :root {
    --fs-display: 2rem;
    --fs-h1: 1.625rem;
    --fs-h2: 1.375rem;
    --pad-x: 20px;
    --section-y: 48px;
    --section-y-lg: 56px;
  }
}