/* ===================================================== */
/* VARIABLES.CSS                                         */
/* Biến CSS dùng chung cho toàn bộ website Seoul Soul.   */
/* Khi muốn đổi màu, font, bo góc, shadow hoặc ảnh nguồn */
/* thì ưu tiên chỉnh trong file này trước.               */
/* ===================================================== */

:root {
  /* ===================================================== */
  /* COLORS                                                */
  /* Bảng màu chính của website.                           */
  /* ===================================================== */

  /* Màu nền giấy chính */
  --color-paper: #f6efe5;

  /* Màu nền giấy sáng hơn, dùng cho card hoặc panel nhẹ */
  --color-paper-soft: #fbf6ee;

  /* Màu kem trung tính */
  --color-cream: #efe4d4;

  /* Màu kem đậm hơn một chút */
  --color-cream-strong: #eadcc9;

  /* Màu chữ chính */
  --color-ink: #24170f;

  /* Màu chữ phụ nhưng vẫn khá đậm */
  --color-ink-soft: #3a281c;

  /* Màu chữ mô tả / muted text */
  --color-muted: #7c6658;

  /* Màu muted sáng hơn, dùng cho text phụ hoặc trạng thái nhẹ */
  --color-muted-light: #a58c7a;

  /* Màu đường kẻ mảnh */
  --color-line: rgba(91, 61, 44, 0.18);

  /* Màu terracotta chính, dùng cho CTA và điểm nhấn */
  --color-terracotta: #aa3f22;

  /* Màu terracotta đậm, dùng cho hover hoặc gradient */
  --color-terracotta-dark: #853018;

  /* Màu terracotta mềm, dùng cho gradient hoặc background nhẹ */
  --color-terracotta-soft: #c8663e;

  /* Màu nâu chính */
  --color-brown: #422516;

  /* Màu nâu rất đậm, dùng cho overlay hoặc footer tối */
  --color-brown-deep: #211107;

  /* Màu vàng đồng, dùng cho chi tiết trang trí */
  --color-gold: #b98445;

  /* Màu trắng kem, không quá gắt như trắng tinh */
  --color-white: #fffaf2;


  /* ===================================================== */
  /* SHADOWS                                               */
  /* Đổ bóng dùng chung cho card, panel và nút.            */
  /* ===================================================== */

  /* Shadow mềm cho khối lớn hoặc nút nổi */
  --shadow-soft: 0 18px 48px rgba(54, 31, 19, 0.12);

  /* Shadow nhẹ hơn cho card */
  --shadow-card: 0 14px 28px rgba(58, 35, 22, 0.1);


  /* ===================================================== */
  /* RADIUS                                                */
  /* Độ bo góc dùng thống nhất toàn website.               */
  /* ===================================================== */

  --radius-xl: 34px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;


  /* ===================================================== */
  /* LAYOUT                                                */
  /* Kích thước layout chung.                              */
  /* ===================================================== */

  /* Chiều rộng tối đa của container */
  --container: 1180px;

  /* Chiều cao header, dùng để tính hero height hoặc sticky offset */
  --header-height: 104px;


  /* ===================================================== */
  /* FONTS                                                 */
  /* Font chữ chính của website.                           */
  /* ===================================================== */

  /* Font display cho logo, hero title, section title */
  --font-display: "Cormorant Garamond", "Garamond", "Times New Roman", serif;

  /* Font body cho paragraph, button, form */
  --font-body: "Inter", "Segoe UI", Arial, sans-serif;


  /* ===================================================== */
  /* IMAGE SOURCES                                         */
  /* Ảnh nguồn cũ dạng sprite/source.                      */
  /* Một số file layout có thể dùng các biến này cho .photo. */
  /* Nếu đã chuyển sang ảnh crop riêng trong layout.css,    */
  /* phần này vẫn có thể giữ để tương thích code cũ.        */
  /* ===================================================== */

  --img-menu: url("../assets/images/menu-source.jpg");
  --img-home: url("../assets/images/home-source.jpg");
  --img-gallery: url("../assets/images/gallery-source.jpg");
  --img-story: url("../assets/images/story-source.jpg");
  --img-contact: url("../assets/images/contact-source.jpg");
}