/* ============================================================
   BỘ QUY CHUẨN THIẾT KẾ (design tokens) - NGUỒN DUY NHẤT
   ------------------------------------------------------------
   Mọi màu, font, khoảng cách, bo góc, đổ bóng của cả dự án lấy từ đây.
   Sửa một chỗ ở file này => đổi đồng loạt trang chủ, editor, view, admin.

   Nạp TRƯỚC mọi file CSS khác trong mỗi trang HTML.

   Tông màu đổi theo DỊP bằng thuộc tính data-dip trên <html>/<body>:
     <body data-dip="cuoi">      -> tông cưới  (mặc định, = :root)
     <body data-dip="sinhnhat">  -> tông sinh nhật
     <body data-dip="le">        -> tông dịp lễ / Tết
   Chỉ các biến MÀU NHẤN (--mau-nhan*) đổi theo dịp; nền/chữ/viền là tông
   ấm trung tính dùng chung cho mọi dịp để cả site nhìn đồng bộ.
   ============================================================ */

:root {
  /* ---------- MÀU NHẤN (đổi theo dịp) — mặc định: CƯỚI ---------- */
  --mau-nhan:        #C08497;   /* hồng đất - nút chính, tiêu điểm */
  --mau-nhan-dam:    #A96C81;   /* khi rê chuột / nhấn */
  --mau-nhan-nhat:   #E8C4CE;   /* hồng nhạt - nhãn, nền chip */
  --mau-nhan-lot:    #FBEFF2;   /* hồng rất nhạt - nền nút phụ, ô báo lỗi */
  --mau-nhan-glow:   rgba(192, 132, 151, 0.15);  /* viền sáng khi bấm vào ô nhập */

  /* ---------- MÀU PHỤ TRỢ TRANG TRÍ (vàng đồng) ---------- */
  --mau-vang:        #C9A86A;   /* vàng đồng - viền, hoa văn, nút "Dùng mẫu" */
  --mau-vang-nhat:   #E7D4B0;
  --mau-vang-vien:   #DCC49A;
  --mau-vang-dam:    #A98A4E;

  /* ---------- CHỮ (tông nâu ấm, dùng chung mọi dịp) ---------- */
  --mau-chu:         #4A3728;   /* nâu đậm - chữ chính, tiêu đề */
  --mau-chu-vua:     #6B5644;   /* nâu vừa - đoạn phụ */
  --mau-chu-nhat:    #8A7460;   /* nâu nhạt - chú thích, nhãn nhỏ */
  --mau-chu-nhat-2:  #7D6A5A;   /* nâu nhạt (trang chủ) */

  /* ---------- NỀN ---------- */
  --mau-kem:         #FDF8F2;   /* kem - nền thẻ, thanh đầu trang */
  --mau-kem-dam:     #F6EDE2;
  --mau-kem-mo:      #F3EBE1;   /* nền toàn trang editor/view */
  --mau-trang:       #FFFFFF;
  --mau-trang-am:    #FFFCF8;   /* trắng ngả kem - ô công tắc */

  /* ---------- VIỀN ---------- */
  --mau-vien:        #E5D9C9;   /* viền thẻ, đường ngăn */
  --mau-vien-o:      #E0D5C8;   /* viền ô nhập */
  --mau-vien-mo:     #EFE4D6;   /* viền rất nhạt, đường kẻ giữa lời chúc */

  /* ---------- BÁO LỖI / CẢNH BÁO ---------- */
  --mau-loi-chu:     #8A3D52;
  --mau-loi-nen:     #FBEFF2;
  --mau-loi-vien:    #E3C3CD;
  --mau-canh-bao:    #B3261E;   /* băng rôn "bản xem thử" */

  /* ---------- FONT (đều có bộ chữ tiếng Việt) ---------- */
  --font-than:      "Be Vietnam Pro", sans-serif;   /* thân bài, form */
  --font-de:        "Playfair Display", serif;      /* tiêu đề */
  --font-thu-phap:  "Great Vibes", cursive;         /* chữ thư pháp, tên cô dâu chú rể */

  /* ---------- BO GÓC ---------- */
  --bo-4:    4px;      /* canvas thiệp */
  --bo-8:    8px;      /* ô nhập, nút nhỏ */
  --bo-10:  10px;
  --bo-12:  12px;      /* thẻ nội dung */
  --bo-16:  16px;      /* thẻ lớn, modal */
  --bo-tron: 999px;    /* nút bo tròn viên thuốc */

  /* ---------- ĐỔ BÓNG (tông nâu ấm) ---------- */
  --bong-nhe:   0 6px 18px rgba(74, 55, 40, 0.12);   /* thẻ QR, sổ lưu bút */
  --bong-the:   0 10px 30px rgba(74, 55, 40, 0.12);  /* thẻ mẫu trang chủ */
  --bong-anh:   0 6px 18px rgba(74, 55, 40, 0.18);   /* ảnh album, bản đồ */
  --bong-vien:  0 10px 30px rgba(74, 55, 40, 0.13);  /* khung viền vàng trang trí */
  --bong-canvas:0 10px 40px rgba(74, 55, 40, 0.18);  /* canvas thiệp trong editor */

  /* ---------- NỀN GRADIENT DÙNG CHUNG ---------- */
  /* Nền tạm bằng gradient (chừa sẵn chỗ cho ảnh nền đẹp sau này). */
  --nen-trang-xem: linear-gradient(170deg, #FBF4EA 0%, #F4E8D8 55%, #EFE0CE 100%);
  --nen-man-chao:  linear-gradient(160deg, #FDF8F2, #F3E3D7);
}

/* ============================================================
   TÔNG THEO DỊP — chỉ đổi bộ MÀU NHẤN.
   Giai đoạn này mới cần "cuoi" (= mặc định ở :root). Các dịp khác
   để sẵn khung, sẽ tinh chỉnh ở giai đoạn làm bộ mẫu tương ứng.
   ============================================================ */

[data-dip="sinhnhat"] {
  --mau-nhan:      #FF8A5C;   /* cam san hô */
  --mau-nhan-dam:  #E9713F;
  --mau-nhan-nhat: #FFD9C6;
  --mau-nhan-lot:  #FFF1EA;
  --mau-nhan-glow: rgba(255, 138, 92, 0.18);
}

[data-dip="le"] {
  --mau-nhan:      #B3001B;   /* đỏ Tết */
  --mau-nhan-dam:  #8F0016;
  --mau-nhan-nhat: #F2C14E;
  --mau-nhan-lot:  #FFF3E0;
  --mau-nhan-glow: rgba(179, 0, 27, 0.15);
}