/* ============================================================
   tokens.css — Nguồn chân lý về giao diện
   Sổ tay Kiến trúc Phần mềm · hệ "editorial blueprint"
   Đổi màu / typography / spacing ở ĐÂY, không rải rác trong trang.
   ============================================================ */

:root {
  /* ---- Mực xanh "blueprint" (panel tối, nhấn brand) ---- */
  --brand-900: #14233b;  /* panel mực sâu nhất (hero, code) */
  --brand-800: #1b3050;
  --brand-700: #244168;  /* accent mặc định (hub) */
  --brand-500: #2f5d8f;
  --brand-300: #80a8cf;
  --brand-100: #d8e5f1;

  /* ---- Trung tính ấm (giấy) ---- */
  --ink:         #1c1a14;  /* chữ chính (mực ấm) */
  --ink-soft:    #4a4639;  /* chữ phụ */
  --muted:       #8c8675;  /* chú thích */
  --line:        #e3dcc9;  /* hairline */
  --line-soft:   #efe9da;  /* hairline rất nhạt */
  --line-strong: #cdc4ac;  /* hairline đậm / chấm rỗng */
  --surface:     #fffdf7;  /* nền thẻ (giấy sáng) */
  --surface-2:   #f3eedf;  /* nền nhạt */
  --surface-3:   #ebe4d2;  /* nền nhấn nhẹ */
  --bg:          #f5f0e4;  /* nền trang (giấy) */

  /* ---- Màu ngữ nghĩa (trầm, kiểu editorial) ---- */
  --pro:     #2f7d4f;  --pro-bg:  #e6f0e6;
  --con:     #b23a2e;  --con-bg:  #f7e6e1;
  --warn:    #b5791b;  --warn-bg: #f6edd5;
  --info:    #2f6d93;  --info-bg: #e2edf3;

  /* ---- Màu nhấn theo PHẦN (phân biệt khi lướt) ---- */
  /* Pool accent dùng chung mọi sách; nhãn dưới đây là ví dụ map của Fundamentals/Clean. */
  --part1:    #0f7d72;  --part1-bg: #dbeee8;  /* teal      — Fund. I Nền tảng · Clean I Nền tảng */
  --part2:    #6a4ca8;  --part2-bg: #eae2f5;  /* violet    — Fund. II Phong cách · Clean II SOLID */
  --part3:    #bc5a16;  --part3-bg: #f7e5d4;  /* cam đất   — Fund. III Kỹ năng · Clean III Component */
  --part4:    #2e5e8c;  --part4-bg: #dce7f1;  /* indigo thép — Clean IV Kiến trúc */
  --part5:    #9c3450;  --part5-bg: #f1dbe0;  /* đỏ mận    — Clean V Chi tiết */

  /* Biến "phần hiện tại": trang topic set --accent qua class .part-1/2/3 */
  --accent:    var(--brand-700);
  --accent-bg: var(--brand-100);

  /* ---- Typography ----
     LƯU Ý: chữ Việt chạy phải dùng Be Vietnam Pro (định vị dấu chuẩn).
     Serif (Noto Serif) CHỈ dùng cho SỐ/figure (chữ số & số La Mã = ASCII, an toàn). */
  --font-display: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num:     "Noto Serif", Georgia, "Times New Roman", serif;
  --font-body:    "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "Cascadia Code", ui-monospace, monospace;

  --fs-hero:  clamp(2.3rem, 1.5rem + 3.4vw, 3.9rem);
  --fs-h1:    clamp(2rem, 1.4rem + 2.6vw, 3rem);
  --fs-h2:    clamp(1.55rem, 1.2rem + 1.6vw, 2.2rem);
  --fs-h3:    1.2rem;
  --fs-body:  1.0625rem;
  --fs-small: 0.9rem;
  --fs-tiny:  0.78rem;
  --leading:  1.7;

  /* nhãn mono dạng "small caps kỹ thuật" */
  --eyebrow-ls: .16em;

  /* ---- Spacing (thang 4px) ---- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-8: 3rem;     --s-10: 4rem;
  --s-12: 6rem;

  /* ---- Hình khối ---- */
  --radius:    10px;
  --radius-sm: 7px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 0 rgba(28,26,20,.04);
  --shadow:    0 1px 2px rgba(28,26,20,.05), 0 10px 30px -16px rgba(28,26,20,.22);
  --shadow-lg: 0 30px 70px -28px rgba(20,35,59,.45);

  --content-w: 1160px;
  --reading-w: 730px;
}

/* Mỗi PHẦN ánh xạ --accent về màu của phần đó */
.part-1 { --accent: var(--part1); --accent-bg: var(--part1-bg); }
.part-2 { --accent: var(--part2); --accent-bg: var(--part2-bg); }
.part-3 { --accent: var(--part3); --accent-bg: var(--part3-bg); }
.part-4 { --accent: var(--part4); --accent-bg: var(--part4-bg); }
.part-5 { --accent: var(--part5); --accent-bg: var(--part5-bg); }