/* ============================================================
   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);
}