/* ============================================================
   NĐH Reader — Design Tokens
   Chủ đề: Quốc khánh 2/9 (đỏ cờ + sao vàng), nền cho app đọc
   ------------------------------------------------------------
   Nguyên tắc số 1: MÀU LỄ HỘI KHÔNG BAO GIỜ CHẠM NỀN VÙNG ĐỌC.
   Đỏ/vàng chỉ ở phần chrome (header, chip, progress, sao).
   Thân bài luôn nền trung tính (--paper).
   ------------------------------------------------------------
   Cách dùng: <link rel="stylesheet" href="tokens.css">
   Dark mode: thêm class .theme-dark vào <html>
   Lớp lễ hội: thêm class .festive vào <html> (banner + sao vàng)
   ============================================================ */

:root {
  /* --- Nền & mực (light) --- */
  --shell:      #FBFAF7;  /* nền app (hơi ấm, KHÔNG phải kem literary) */
  --paper:      #FFFFFF;  /* nền vùng đọc — nổi lên trên shell */
  --ink:        #1C1B18;  /* chữ chính (near-black thật) */
  --ink-2:      #56534C;  /* chữ phụ */
  --ink-3:      #8A867C;  /* meta, mờ */
  --line:       #E8E4DA;  /* đường kẻ, viền nhẹ */
  --line-2:     #D9D4C8;  /* viền đậm hơn */

  /* --- Màu định danh: đỏ cờ / Viettel --- */
  --flag-red:   #DA251D;  /* đỏ cờ CHUẨN — chỉ cho mảng lớn: masthead, chip, progress */
  --red-ink:    #A81910;  /* đỏ cho CHỮ/LINK trên nền sáng (đủ tương phản ~5:1) */
  --red-wash:   #FBEDEC;  /* nền đỏ rất nhạt: chip, chấm chưa đọc */
  --gold:       #FFC400;  /* sao vàng — CHỈ dùng trên nền đỏ, không dùng trên nền sáng */

  /* --- Typography --- */
  --font-ui:   "Be Vietnam Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-read: "Newsreader", Georgia, "Times New Roman", serif;

  --text-2xs: .75rem;    /* 12 */
  --text-xs:  .8125rem;  /* 13 */
  --text-sm:  .875rem;   /* 14 */
  --text-base: 1rem;     /* 16 */
  --text-md:  1.0625rem; /* 17 — tiêu đề mục trong list */
  --text-read: 1.1875rem;/* 19 — THÂN BÀI (cỡ chữ đọc) */
  --text-lg:  1.25rem;   /* 20 */
  --text-xl:  1.5rem;    /* 24 */
  --text-2xl: 1.875rem;  /* 30 */
  --text-3xl: 2.375rem;  /* 38 — headline bài lead ở list */
  --text-4xl: 2.875rem;  /* 46 — headline trang đọc */

  --lh-tight: 1.15;
  --lh-head:  1.2;
  --lh-snug:  1.4;
  --lh-body:  1.78;   /* thân bài serif — line-height rộng cho dễ đọc */
  --lh-ui:    1.5;

  --measure:  40rem;  /* bề rộng cột đọc ~ 68–72 ký tự với Newsreader 19px */

  /* --- Nhịp khoảng cách (8pt) --- */
  --s1: .25rem;  --s2: .5rem;  --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;   --s7: 3rem;    --s8: 4rem;   --s9: 6rem;

  /* --- Bo góc (tiết chế — không bo pill mọi thứ) --- */
  --r-sm: 6px;  --r: 10px;  --r-lg: 14px;

  /* --- Đổ bóng (nhẹ) --- */
  --shadow-sm: 0 1px 2px rgba(28,27,24,.06);
  --shadow:    0 6px 24px -8px rgba(28,27,24,.14);
}

/* ============================================================
   DARK — .theme-dark (trang reskin độc lập) HOẶC [data-theme="dark"]
   (theme.js của app dùng thuộc tính này) → hỗ trợ cả hai.
   Nền đọc tối nhưng KHÔNG dùng #000 (hại mắt khi đọc dài)
   ============================================================ */
.theme-dark,
[data-theme="dark"] {
  --shell:    #0F0F11;
  --paper:    #17171A;
  --ink:      #ECEAE3;
  --ink-2:    #A6A29A;
  --ink-3:    #6E6B63;
  --line:     #29292E;
  --line-2:   #37373D;

  --flag-red: #E7332A;  /* đỏ tươi hơn chút để nổi trên nền tối */
  --red-ink:  #FF8A80;  /* link đỏ trên nền tối */
  --red-wash: #241413;
  --gold:     #FFC400;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 8px 28px -10px rgba(0,0,0,.6);
}

/* ============================================================
   BASE — reset gọn + kiểu chữ nền
   ============================================================ */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--shell);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: var(--lh-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--red-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--flag-red);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ============================================================
   VÙNG ĐỌC — kiểu chữ thân bài (dùng lại được ở app thật)
   Gắn class .article-body cho khối chứa nội dung bài viết.
   ============================================================ */
.article-body {
  font-family: var(--font-read);
  font-size: var(--text-read);
  line-height: var(--lh-body);
  color: var(--ink);
  max-width: var(--measure);   /* GIỚI HẠN BỀ RỘNG DÒNG — khác biệt lớn nhất */
}
.article-body > * + * { margin-top: var(--s5); }  /* nhịp đoạn đều */

.article-body p { margin: 0; }

.article-body h2 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  color: var(--ink);
  margin-top: var(--s7);
  letter-spacing: -0.01em;
}

.article-body blockquote {
  margin: var(--s6) 0;
  padding-left: var(--s5);
  border-left: 3px solid var(--flag-red);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  font-style: italic;
  color: var(--ink-2);
}

.article-body ul { margin: 0; padding-left: var(--s5); }
.article-body li { margin-top: var(--s3); }
.article-body li::marker { color: var(--flag-red); }

.article-body figure { margin: var(--s6) 0; }
.article-body figcaption {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--ink-3);
  margin-top: var(--s3);
}

/* ============================================================
   LỚP LỄ HỘI — bật/tắt bằng .festive trên <html>
   Khi TẮT: không banner, sao thành dấu định danh trung tính.
   Đỏ vẫn là màu thương hiệu (Viettel), chỉ bỏ phần "trang trí Tết".
   ============================================================ */
.festive-banner { display: none; }        /* mặc định ẩn */
.festive .festive-banner { display: flex; } /* hiện khi .festive */
.festive .brand-star .star-gold { fill: var(--gold); }  /* sao vàng khi lễ */