/* Token gốc của Tiệm ảnh AI — NGUỒN DUY NHẤT cho màu, bóng và bộ chữ.
   Nạp ở hai nơi: includes/header.php (toàn site) và @import đầu admin/admin.css.
   Trước 10/09/2026 admin khai một bảng màu riêng lệch nhẹ (acid #caff33, ink #171814,
   line #ddd9ce...) nên sửa màu phải sửa hai chỗ và hai chỗ trôi khỏi nhau. Gom về đây.
   Giá trị và tên biến bám theo DESIGN.md — đổi ở đây là đổi cả site lẫn admin.
   LƯU Ý: tokens.css nạp vào admin bằng @import có ?v= gõ cứng — đổi file này thì
   tăng số đó ở dòng đầu admin/admin.css, nếu không admin giữ bản cũ tới 30 ngày. */
:root {
  color-scheme: light;

  /* Nền và chữ */
  --ink: #171714;          /* chữ chính */
  --muted: #6e6d67;        /* chữ phụ */
  --paper: #f5f2eb;        /* nền trang */
  --card: #fff;            /* nền thẻ, panel */
  --soft: #e9e5dc;         /* nền nút phụ, vùng chìm */
  --soft-2: #faf9f6;       /* nền ô nhập, vùng chìm nhạt */
  --line: #ddd8ce;         /* mọi đường viền */

  /* Nhấn — giữ NGUYÊN giá trị ở cả hai theme, chữ trên nó luôn #171714 */
  --acid: #d8ff47;

  /* Nền tối đặc (khối .featured/.cta bên site, thanh bên của admin) */
  --dark: #22221e;
  --on-dark: #fff;

  /* Trạng thái */
  --green: #347946;
  --red: #a34637;
  --warning-bg: #fff5d9;
  --warning-border: #e7cf8c;
  --warning-text: #584615;

  /* Header dính đỉnh (dùng kèm backdrop-filter) */
  --header-bg: rgba(245, 242, 235, .91);

  /* Bóng — ba vai, đừng dùng lẫn (xem DESIGN.md § Elevation & Depth)
     --shadow       : lớp TRÔI NỔI thật (modal, dropdown, trình xem ảnh)
     --shadow-rest  : thẻ và panel lúc nghỉ
     --shadow-hover : thẻ bấm được lúc hover */
  --shadow: 0 24px 70px rgba(39, 34, 23, .11);
  --shadow-rest: 0 14px 34px rgba(39, 34, 23, .08);
  --shadow-hover: 0 18px 45px rgba(39, 34, 23, .09);

  /* Bộ chữ */
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: 'Palatino Linotype', Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, monospace;
}

html[data-theme="dark"] {
  color-scheme: dark;

  --ink: #f4f2eb;
  --muted: #aaa9a2;
  --paper: #171714;
  --card: #22221e;
  --soft: #2d2d28;
  --soft-2: #1d1d1a;
  --line: #3b3b35;

  --dark: #080807;
  --on-dark: #fff;

  --green: #79bf85;
  --red: #e08675;
  --warning-bg: #332d1c;
  --warning-border: #6e5c29;
  --warning-text: #f3df9c;

  --header-bg: rgba(23, 23, 20, .91);

  --shadow: 0 24px 70px rgba(0, 0, 0, .28);
  --shadow-rest: 0 14px 34px rgba(0, 0, 0, .18);
  --shadow-hover: 0 18px 45px rgba(0, 0, 0, .22);
}