/* tokens.css - hệ thống thiết kế Cửu Ấn Ký (hợp nhất từ design comp). */

/* Fallback SERIF khớp metric Lora (size-adjust 103% ĐO TRÊN trang đọc thật: reflow 0px khi font swap -> hết CLS body/footer).
   src local() đa nền: Georgia (Win/Mac/iOS) + Noto Serif (Android) + Times. KHÔNG dùng Be Vietnam Pro (sans, cao hơn Lora +239px = CLS field cũ). */
@font-face {
  font-family: 'Lora-fallback';
  src: local('Georgia'), local('Noto Serif'), local('Times New Roman'), local('serif');
  size-adjust: 103%;
}

:root {
  /* Nền charcoal ấm */
  --bg-void: #0C0A0B;
  --bg-surface: #14100F;
  --bg-raised: #1F1917;
  --bg-page: #221C18;

  /* Chữ */
  --ink-bone: #ECE4D6;
  --ink-ash: #A39A8C;
  --ink-faint: #938A7C;   /* đã nâng đạt WCAG AA cho caption/label */

  /* Nhấn */
  --blood: #8E2A2A;
  --blood-bright: #C0392B;
  --gold: #C2A14D;
  --gold-soft: #D9C089;
  --violet: #2A1F3D;
  --ember: #E07B3C;

  /* Đường nét */
  --line: #2A211C;
  --line-gold: rgba(194, 161, 77, 0.15);

  /* Ngũ hành (màu ấn) */
  --el-moc: #93A46A;   /* nâng từ #6E7A52 (chỉ 3.66:1 cho tag bonus/txn text nhỏ trên nền tối) -> WCAG AA; vẫn tông xanh mộc */
  --el-hoa: #E07B3C;
  --el-tho: #C2A14D;
  --el-kim: #BFB6A4;
  --el-thuy: #3A6E72;

  /* Typography */
  --font-display: 'Cormorant Garamond', 'Times New Roman', 'Be Vietnam Pro', serif;
  --font-body: 'Lora', 'Lora-fallback', 'Be Vietnam Pro', serif;   /* Lora-fallback = serif khớp metric Lora (0 reflow); Be Vietnam Pro chỉ là chốt chặn cuối cho dấu Việt lạ */
  --font-ui: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;

  /* Layout */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --maxw: 1180px;

  /* Reader (mặc định = Đêm) - điều khiển qua [data-theme] trên .reader-surface */
  /* ⚠️ ĐÂY LÀ NỀN NGƯỜI ĐỌC THẤY LÚC SSR (trước khi JS chạy). data-theme được gắn trên .reader (CON của #app),
     mà CSS var KHÔNG chảy ngược lên cha -> #app luôn lấy --r-bg từ :root này. Nếu :root ≠ theme mặc định
     -> CHỚP NỀN lúc hydrate. Đổi 17/7 sang màu 'moc' cho khớp readerDefaults.rTheme='moc' (store.js).
     Đổi mặc định theme -> PHẢI đổi cả 3 giá trị dưới. */
  --r-bg: #C4B79C;
  --r-surf: #B8AA8D;
  --r-ink: #221C15;   /* PHẢI khớp [data-theme='moc'] — nếu để #ECE4D6 (chữ kem của theme tối) thì SSR ra chữ kem trên nền be = gần như VÔ HÌNH */
  --r-ash: #3A3227;   /* PHẢI khớp [data-theme='moc'] (mặc định) — #B7AE9F là ash của theme TỐI, để lại thì SSR ra chữ phụ xám-sáng trên nền be = không đọc được */
}

/* Theme reader */
[data-theme='dem']  { --r-bg:#14100F; --r-surf:#1F1917; --r-ink:#ECE4D6; --r-ash:#B7AE9F; }
[data-theme='tram'] { --r-bg:#1A130D; --r-surf:#241910; --r-ink:#E8D6B8; --r-ash:#BBA589; }
[data-theme='giay'] { --r-bg:#E7DEC9; --r-surf:#DCD1B8; --r-ink:#2B241C; --r-ash:#3E3729; --gold:#5A4214; --gold-soft:#6B5019; }   /* nền SÁNG: tối gold lại để accent (CTA/link/progress/next-btn) không bị khớp màu vô hình - audit WCAG 7.04:1 + 5.62:1, vẫn tông nâu-vàng sách cổ */
/* MỘC (owner chốt 17/7, MẶC ĐỊNH mới): nền TRUNG GIAN - không chói như giay, không tối như dem. Luminance nằm giữa.
   Vì sao KHÔNG dùng xám-giữa thật (L*~50): nó ép contrast xuống CẢ HAI phía, chữ sáng lẫn tối đều đọc kém - không app đọc nào làm.
   Giữ POSITIVE POLARITY (chữ tối / nền sáng-vừa) -> vẫn hưởng lợi ích đọc mà literature đo được (Buchner 2007, Piepenbrock 2014,
   Dobres 2017: trong phòng TỐI nền tối đọc kém rõ rệt = đúng khung giờ 19-21h của dự án), nhưng KHÔNG flashbang người quen dark mode.
   Gold phải đậm hơn giay (#4A3610) vì nền tối hơn -> giữ contrast accent. Audit: ink 8.3:1, ash 6.1:1, gold 5.6:1 (đều ≥ WCAG AA). */
[data-theme='moc']  { --r-bg:#C4B79C; --r-surf:#B8AA8D; --r-ink:#221C15; --r-ash:#3A3227; --gold:#4A3610; --gold-soft:#5A4214; }