/* tokens.css — NGUỒN DUY NHẤT về màu, chữ, khoảng cách của giao diện phong cách C.
   Trang mới chỉ dùng biến ở đây, không gõ mã màu (docs/ke-hoach-refactor-toan-he-thong.md mục 6).
   Bản vẽ gốc: design/redesign-style-c/README.md */
:root {
  /* Chữ */
  --ink: #1f2933;          /* tiêu đề, chữ đậm */
  --text: #37424d;         /* chữ thường */
  --muted: #6b7785;        /* mô tả, chữ phụ */
  --faint: #a0aab4;        /* gợi ý, nhãn nhóm */

  /* Nền & viền */
  --bg: #ffffff;
  --bg-side: #f7f8fa;      /* thanh bên */
  --bg-soft: #f3f5f7;
  --line: #e9edf1;
  --placeholder: #e9eef2;

  /* Màu chủ đạo — một xanh biển, đậm nhưng tươi (không xám như bản trước) */
  --accent: #0576a6;
  --accent-hover: #045e87;
  --accent-soft: #e3f3fa;  /* mục đang chọn ở thanh bên */
  --callout: #e9f6fb;      /* hộp nhấn nhá */
  --cover: #0b7597;        /* ảnh bìa đại dương */
  --cover-accent: #8fe8ff; /* chữ/sao nhấn trên nền đại dương (hero landing) */
  --dark: #1f2933;         /* nút CH Play */
  --on-accent: #ffffff;    /* chữ trên nền đậm (nút chính, ảnh bìa) */
  --video-bg: #0b0f14;     /* nền khung video / xem toàn màn hình (Shorts) */

  /* Cặp màu nhãn / icon (nền nhạt + chữ đậm) */
  --green-bg: #e8f3ec;  --green-tag: #e3f1e8;  --green: #2b6f4a;
  --amber-bg: #fbefdf;  --amber: #9a5b13;      --sand-bg: #f6eee2;
  --blue-bg: #e3f1fa;   --blue-tag: #dcedf9;   --blue: #1c6f9c;
  --violet-bg: #efe8f8; --violet: #6b4aa0;
  --red-bg: #fbe9e7;    --red: #a33a2c;

  /* Thẻ từ vựng (ghi chú, flashcard): cách đọc / phiên âm xanh sáng, nền sân khấu ôn bài */
  --reading: #1e88e5;
  --stage: #f0f7ff;

  /* Chữ */
  --font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;

  /* Bo góc & bóng */
  --r-sm: 4px;   /* nhãn */
  --r: 6px;      /* nút, ô nhập */
  --r-md: 8px;   /* thẻ */
  --r-lg: 14px;  /* biểu tượng trang */
  --shadow-icon: 0 0 0 1px var(--line), 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-pop: 0 8px 28px rgba(15, 23, 42, 0.14);

  /* Kích thước khung */
  --side-w: 248px;
  --topbar-h: 46px;
  --content-w: 1000px;

  /* Trang đọc PDF (css/pages/reader.css): nền quanh trang giấy, chữ đang bôi, nền chế độ Đọc,
     4 màu ghi chú dán (khớp màu lưu trong DB: yellow/green/pink/blue) */
  --reader-canvas: #eef1f4;
  --reader-select: #cfe6f3;
  /* Nền chế độ Đọc CỐ ĐỊNH, không theo theme cửa hàng (01/10/2026: khung trang đọc theo theme, còn
     trang chữ giữ đúng lựa chọn Sáng / Sepia / Tối của người đọc — Neon tối mà "Sáng" vẫn phải sáng). */
  --reader-light-bg: #ffffff;  --reader-light-text: #1f2933;  --reader-light-muted: #6b7785;
  --reader-sepia-bg: #f6efe2;  --reader-sepia-text: #3b2f1e;  --reader-sepia-muted: #8a7a60;
  --reader-dark-bg: #1b2127;   --reader-dark-text: #e6ebef;   --reader-dark-muted: #9aa6b2;
  --sticky-yellow: #fff6c9; --sticky-green: #d9f0dc; --sticky-pink: #fadbe6; --sticky-blue: #dbeafa;
  --sticky-line: #f0dc8a;   --sticky-ink: #4a3b06;
}