/* ==========================================================================
   variables.css — Design tokens suy ra từ ảnh tham chiếu home.png
   Reference CSS viewport : 1440px
   Global content container: 1340px  (gutter desktop 32px)
   ========================================================================== */

:root {
  /* ---------- Font ---------- */
  --font-sans: "Encode Sans Semi Condensed", "Be Vietnam Pro", "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-script: "Dancing Script", "Segoe Script", "Brush Script MT", cursive;

  /* ---------- Màu thương hiệu ---------- */
  --c-green-900: #10391f;
  --c-green-800: #15502b;
  --c-green-700: #1e6b37;
  --c-green-600: #2f7d3b;
  --c-leaf: #5fa83b;

  --c-gold-400: #c08f4e;
  --c-gold-500: #a9762f;
  --c-gold-600: #9a631f;
  --c-gold-700: #82521a;
  --grad-gold: linear-gradient(180deg, #c08f4e 0%, #9a631f 100%);
  --grad-gold-hover: linear-gradient(180deg, #cb9a58 0%, #a86f26 100%);

  --c-red: #e0261c;

  /* ---------- Màu chữ ---------- */
  --c-ink: #1c2b23;
  --c-heading: #15502b;
  --c-body: #44534b;
  --c-muted: #6e7c74;
  --c-nav: #414a44;
  --c-on-dark: #ffffff;
  --c-on-dark-soft: #d6e4d8;

  /* ---------- Nền & đường kẻ ---------- */
  --c-bg: #ffffff;
  --c-bg-header: #fcfdfb;
  --c-surface-soft: #f3f4ef;
  --c-surface-cream: #f7f4ee;
  --c-surface-green: #edf3e8;
  --c-surface-cat: #eff2e7;
  --c-oem-bg: #f6f2ea;
  --c-cta-green: #154629;
  --c-cta-green-dark: #123c23;

  --c-line: #e6e9e2;
  --c-line-soft: #eff1ec;
  --c-line-gold: #e2d3bd;

  /* ---------- Bố cục ---------- */
  --container-max: 1340px;
  --container-gutter: 32px;
  --container-narrow: 820px; /* cột đọc bài viết */
  --header-h: 70px;

  --gap-card: 16px;
  --gap-card-tight: 10px;
  --carousel-gap: 18px;
  --section-pad: 16px;

  /* ---------- Bo góc ---------- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---------- Đổ bóng ---------- */
  --shadow-xs: 0 1px 2px rgba(20, 45, 30, 0.06);
  --shadow-sm: 0 2px 8px rgba(20, 45, 30, 0.07);
  --shadow-md: 0 6px 20px rgba(20, 45, 30, 0.1);
  --shadow-btn: 0 2px 6px rgba(122, 79, 22, 0.28);

  /* ---------- Thang chữ (fluid, khoá trần ở viewport 1440px) ---------- */
  --fs-hero-eyebrow: clamp(12px, 0.97vw, 14px);
  --fs-hero-1: clamp(30px, 3.54vw, 51px);
  --fs-hero-2: clamp(25px, 3.06vw, 44px);
  --fs-hero-lead: clamp(16px, 1.39vw, 20px);

  --fs-section: clamp(20px, 1.67vw, 24px);
  --fs-section-sub: clamp(14px, 1.04vw, 15px);
  --fs-subsection: clamp(16px, 1.25vw, 18px);

  --fs-h2: clamp(20px, 1.67vw, 24px);
  --fs-h3: clamp(17px, 1.32vw, 19px);
  --fs-h4: 17px;

  --fs-body: 16px;
  --fs-body-sm: 15px;
  --fs-nav: 14px;
  --fs-btn: 15px;
  --fs-btn-sm: 14px;
  --fs-meta: 13px;
  --fs-footer: 14px;

  /* ---------- Chuyển động ---------- */
  --t-fast: 0.16s ease;
  --t-base: 0.24s ease;
}