/******************************************************
 * theme-base.css
 * Lớp "consumer" CHUNG cho Multi-theme System (Phần 4 nâng cấp — Theme
 * Package). File này KHÔNG chứa giá trị theo TỪNG theme — chỉ định nghĩa
 * CÁCH các thành phần UI (scrollbar/selection/toast/card/button/glow/
 * blur/transition/icon) ĐỌC các biến CSS `--theme-*`. Giá trị THẬT của
 * từng theme nằm trong /public/themes/<id>/theme.css (mỗi theme set
 * `--theme-*` khác nhau qua `[data-site-theme="<id>"]`).
 *
 * Nạp 1 LẦN DUY NHẤT trên CẢ 4 trang (Home/Donate/Overlay/Admin) — không
 * duplicate rule này ở từng trang (RULES.md #3: không duplicate CSS).
 * File RẤT NHỎ (chỉ selector, không giá trị theme) nên không cần lazy-load
 * riêng — ngược lại /themes/<id>/theme.css (nặng hơn, khác nhau mỗi theme)
 * mới cần lazy-load qua theme-engine.js.
 *
 * AN TOÀN NGƯỢC: mọi rule dưới đây dùng var(--theme-x, <giá-trị-mặc-định>)
 * — khi CHƯA có theme package nào set biến (theme "default"/theme cũ kiểu
 * cũ chỉ đổi --pink-*/--purple-*/--xt-*/--ov-*/--ad-*), giá trị mặc định
 * áp dụng, KHÔNG đổi giao diện hiện có ngoài vài điểm cosmetic nhỏ
 * (selection/scrollbar) vốn trước đây dùng mặc định trình duyệt.
 ******************************************************/

/* ---------- Selection (bôi đen chọn chữ) ---------- */
::selection {
  background: var(--theme-selection-bg, rgba(255, 77, 153, .35));
  color: var(--theme-selection-fg, inherit);
}

/* ---------- Scrollbar (Chrome/Edge/Safari + Firefox) ---------- */
::-webkit-scrollbar {
  width: var(--theme-scrollbar-width, 10px);
  height: var(--theme-scrollbar-width, 10px);
}
::-webkit-scrollbar-track {
  background: var(--theme-scrollbar-track, transparent);
}
::-webkit-scrollbar-thumb {
  background: var(--theme-scrollbar-thumb, rgba(255, 77, 153, .45));
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--theme-scrollbar-thumb-hover, rgba(255, 77, 153, .7));
}
html {
  scrollbar-color: var(--theme-scrollbar-thumb, rgba(255, 77, 153, .45)) var(--theme-scrollbar-track, transparent);
}

/* ---------- Card / Popup / Modal / Dialog — glow, blur, border, shadow ----------
   Áp dụng cho các class Card đã có ở NHIỀU trang (.card ở /setting, /xu,
   /admin — .popup-card ở Overlay/Home — .action-card ở Home) — CHỈ khi
   [data-site-theme] có set biến --theme-card-*, nếu không giữ nguyên style
   gốc của từng trang (var() fallback = "initial" nghĩa là KHÔNG ghi đè gì
   khi theme chưa set, tránh xung đột với CSS gốc chi tiết hơn của từng trang). */
[data-site-theme] .card,
[data-site-theme] .popup-card,
[data-site-theme] .action-card {
  transition: box-shadow var(--theme-transition, .3s ease), transform var(--theme-transition, .3s ease);
}
/* border-radius/box-shadow KHÔNG đặt fallback (khác 2 rule ở trên) — var() không có
   fallback mà biến chưa được set sẽ khiến property "invalid at computed-
   value time", trình duyệt tự bỏ qua NGUYÊN declaration này và dùng lại
   box-shadow gốc của từng trang (specificity thấp hơn nhưng là khai báo
   HỢP LỆ duy nhất còn lại) — ĐÂY LÀ CÁCH DUY NHẤT "chỉ ghi đè khi theme
   có set" mà không cần biết trước giá trị shadow gốc của từng trang là
   gì (mỗi trang mỗi khác, không thể "cộng dồn" 2 box-shadow qua CSS
   thuần). Theme muốn có glow chỉ cần gộp glow VÀO layer cuối của
   --theme-card-shadow (multi-layer box-shadow, xem theme.css mẫu). */
[data-site-theme] .card,
[data-site-theme] .popup-card,
[data-site-theme] .action-card {
  border-radius: var(--theme-card-radius);
  box-shadow: var(--theme-card-shadow);
}
[data-site-theme] .card:hover,
[data-site-theme] .popup-card:hover,
[data-site-theme] .action-card:hover {
  box-shadow: var(--theme-card-shadow-hover);
}

/* ---------- Button — glow khi hover riêng theo theme ----------
   filter:none an toàn dùng fallback (không đụng box-shadow/transform gốc
   của từng nút) — box-shadow thì KHÔNG fallback (cùng lý do Card/Toast ở
   trên, tránh xoá glow hover gốc các nút .social-btn đã có sẵn). */
[data-site-theme] button:not(.small):hover,
[data-site-theme] .social-btn:hover {
  filter: var(--theme-btn-hover-filter, none);
}
[data-site-theme] .social-btn:hover {
  box-shadow: var(--theme-btn-glow-hover);
}

/* ---------- Toast (index.html #toast-container .toast) ----------
   Cùng lý do "không fallback" như Card ở trên — .toast mỗi trang đã có
   background/border/shadow riêng hardcode sẵn, chỉ ghi đè khi theme
   THẬT SỰ khai báo (RULES.md #1: không phá style gốc khi theme=default). */
[data-site-theme] .toast {
  background: var(--theme-toast-bg);
  border: var(--theme-toast-border);
  box-shadow: var(--theme-toast-shadow);
}

/* ---------- Typography — chỉ áp khi theme khai báo font riêng (cùng lý do) ---------- */
[data-site-theme] h1, [data-site-theme] h2, [data-site-theme] .hero-title {
  font-family: var(--theme-font-heading);
}
[data-site-theme] body {
  font-family: var(--theme-font-body);
}

/* ---------- Icon (social SVG) — filter màu riêng theo theme (tuỳ chọn) ---------- */
[data-site-theme] .social-btn__icon {
  filter: var(--theme-icon-filter, none);
}

/* ---------- Background "world" ----------
   Bản thân background-image/gradient do theme.css của TỪNG package định
   nghĩa riêng cho ĐÚNG phần tử nền của từng trang (VD #bg-image ở Home,
   body ở Donate/Overlay/Admin — mỗi trang có cấu trúc DOM nền khác nhau)
   — KHÔNG đặt ở đây vì file này dùng chung 4 trang, không có 1 selector
   nền chung cho tất cả. Xem /public/themes/<id>/theme.css. */