/* ============================================================
   variables.css  —  DESIGN TOKENS (Biến Thiết Kế)
   4R CAFE ROASTERY
   ============================================================

   ★ ĐÂY LÀ FILE DUY NHẤT CẦN SỬA KHI THAY ĐỔI:
       ✓ Màu sắc toàn site (nút, nền, footer, navbar...)
       ✓ Font chữ
       ✓ Khoảng cách layout

   SAU KHI SỬA → Lưu file → Reload trình duyệt → XONG.
   ============================================================ */

:root {

  /* ══════════════════════════════════════════
     MÀU THƯƠNG HIỆU  —  Brand Colors
     ══════════════════════════════════════════

     ★ --brown-mid   = MÀU ĐIỂM NHẤN CHÍNH
       Hiện tại: Navy #142a67 (màu logo 4R)
       Nâu truyền thống: #6B3C1C
       Xanh rừng: #2D6A4F

     ★ --cream        = MÀU NỀN TRANG CHÍNH
       Trắng thuần: #FFFFFF

     ★ --brown-dark   = MÀU NỀN TỐI (footer, CTA banner)
       Đen: #111111
	#B8A090

  */

  --brown-dark:   #2C1A0E;   /* Nền tối — footer, banner */
  --brown-mid:    #142a67;   /* ★ MÀU CHÍNH — nút, viền, link */
  --brown-light:  #A0623A;   /* Màu phụ ấm — copper */
  --beige-dark:   #C9A882;   /* Cát đậm — viền, badge */
  --beige-mid:    #E8D5BC;   /* Cát vừa — viền section */
  --beige-light:  #F5EDE0;   /* ★ NỀN SECTION ẤM (bg-warm) */
  --cream:        #FAF6F0;   /* ★ NỀN TRANG CHÍNH */
  --green-sage:   #6B7C5A;   /* Sage xanh — tag "Signature" */
  --green-light:  #A8B89A;   /* Sage nhạt */
  --green-muted:  #E8EDE4;   /* Sage rất nhạt — tasting chip */

  /* ══════════════════════════════════════════
     MÀU CHỮ  —  Text Colors
     ══════════════════════════════════════════ */
  --text-dark:    #1C1008;   /* Tiêu đề chính */
  --text-body:    #3D2B1A;   /* Nội dung thông thường */
  --text-muted:   #8C7060;   /* Mô tả, phụ đề */
  --text-light:   #B8A090;   /* Footer, metadata */

  /* ══════════════════════════════════════════
     BIẾN NGỮ NGHĨA  —  Semantic (tự tính, không sửa)
     ══════════════════════════════════════════ */
  --bg-primary:   var(--cream);
  --bg-warm:      var(--beige-light);
  --bg-dark:      var(--brown-dark);
  --accent:       var(--brown-mid);
  --accent-light: var(--brown-light);

  /* ══════════════════════════════════════════
     FONT CHỮ  —  Typography
     ══════════════════════════════════════════

     Cách đổi font:
       1. Chọn font mới tại fonts.google.com
       2. Cập nhật thẻ <link> trong components/navbar.js
          (hàm getGoogleFontsLink)
       3. Sửa tên font bên dưới

     Font tiêu đề gợi ý thay thế:
       'Playfair Display', 'Libre Baskerville', 'EB Garamond'

     Font nội dung gợi ý thay thế:
       'Inter', 'Nunito', 'Lato', 'Plus Jakarta Sans'
  */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', -apple-system, sans-serif;

  /* ══════════════════════════════════════════
     LAYOUT & KHOẢNG CÁCH
     ══════════════════════════════════════════
     Tăng khoảng trắng section: clamp(5rem, 10vw, 9rem)
     Giảm khoảng trắng section: clamp(3rem, 6vw, 5rem)
  */
  --section-pad:  clamp(4rem, 8vw, 7rem);
  --container:    1200px;    /* Max-width nội dung */
  --nav-h:        72px;      /* Chiều cao navbar */

  /* ══════════════════════════════════════════
     HIỆU ỨNG  —  Effects
     ══════════════════════════════════════════ */
  --shadow-sm:    0 2px 12px rgba(44,26,14,0.08);
  --shadow-md:    0 8px 32px rgba(44,26,14,0.12);
  --shadow-lg:    0 20px 60px rgba(44,26,14,0.16);
  --radius:       4px;       /* Bo góc nút, tag */
  --radius-md:    8px;       /* Bo góc card, form */
  --transition:   0.3s ease;

}