/* ==========================================================================
   Phong cách "R17 Thông Phan" (slug: r17)
   Bật bằng <html data-style="r17">; kit/noir-style.js lo bật/tắt và nút chuyển.
   Tham chiếu: thongphan.com r17 brand-tokens
   Chỉ đổi lớp vỏ. Cấu trúc HTML, hành vi và nhân vật giữ nguyên.
   Thứ tự làm: 1 token → 2 nền → 3 chữ → 4 bề mặt → 5 nút → 6 điều khiển → 7 điều hướng.
   Xoá khối nào không cần đổi; khối còn lại phải có lý do từ tham chiếu.
   ========================================================================== */

/* Font phải có đủ dấu tiếng Việt (Google Fonts: lọc "Vietnamese"). */

/* -------------------------------------------------------------------------- */
/* 1. Token theo vai trò. Tên giữ từ bản Noir, nghĩa là VAI chứ không phải màu: */
/*    ink/ink-2 = nền sâu nhất / nền trang; coal/coal-2/coal-3 = bề mặt, bề mặt */
/*    nổi, viền; ivory/ivory-dim/smoke = chữ chính / chữ phụ / chữ mờ;         */
/*    amber* = màu nhấn duy nhất (nút chính, đang chọn, nguồn sáng);           */
/*    neon* = cảnh báo, tối đa một chỗ mỗi màn hình; ok = đúng/thành công.     */
/* -------------------------------------------------------------------------- */
html[data-kit][data-style="r17"] {
  --ink: #070706;
  --ink-2: #0b0a09;
  --coal: #12100f;
  --coal-2: #1a1715;
  --coal-3: #2c2723;
  --smoke: #a39a8e;
  --ivory: #e8dfcf;
  --ivory-dim: #d9d2c8;
  --amber: #e04b43;
  --amber-hi: #ef6a62;
  --amber-lo: #b3231b;
  --amber-ink: #170605;      /* chữ đặt trên nền màu nhấn */
  --amber-glow: 224 75 67;       /* cùng màu nhấn, dạng "r g b" để dùng với rgb(var(--amber-glow) / a) */
  --neon: #e0a43c;
  --neon-lo: #8a5a12;
  --neon-glow: 224 164 60;
  --rain: #8c8478;
  --ok: #8fc9a3;

  --f-display: "Cormorant Garamond", Georgia, serif;   /* tiêu đề */
  --f-voice: "Cormorant Garamond", Georgia, serif;     /* lời dẫn, trích */
  /* --f-body và --f-mono: giữ Be Vietnam Pro / IBM Plex Mono trừ khi tham chiếu đòi khác */

  /* Hình khối riêng của phong cách */
  --r-1: 2px;
  --r-2: 4px;

  /* Nền sáng: đổi sang light để thanh cuộn, ô nhập và form của trình duyệt đúng màu */
  color-scheme: dark;
}

/* -------------------------------------------------------------------------- */
/* 2. Nền thế giới và cảnh                                                      */
/* -------------------------------------------------------------------------- */
html[data-kit][data-style="r17"] body {
  background: var(--ink-2);
}
/* Cảnh hero của bản Noir (mưa canvas, đèn đường .hero-lamp, quầng sáng) là cảnh ĐÊM.
   Nền tối: nhuộm lại bằng filter. Nền sáng: ẩn mưa và đèn, thay bằng chất liệu của tham chiếu
   (mép giấy, hoa văn, mảng màu phẳng) vẽ bằng CSS trên .nr-backdrop. Ví dụ đầy đủ: styles/dst.css
   trong skill (~/.claude/skills/web-ui-design/assets/site/kit/styles/dst.css). */
html[data-kit][data-style="r17"] .nr-backdrop > canvas { filter: none; }
/* Nền sáng thì bỏ chú thích:
html[data-style="r17"] :is(.nr-backdrop > canvas, .hero-lamp) { display: none; }
*/
html[data-kit][data-style="r17"] noir-character canvas { filter: none; }

/* -------------------------------------------------------------------------- */
/* 3. Chữ                                                                       */
/* -------------------------------------------------------------------------- */
html[data-kit][data-style="r17"] :is(.nr-display, h1.nr, h2.nr, h3.nr, .nr-h3) {
  text-transform: none; letter-spacing: 0; line-height: 1.08;
}
html[data-kit][data-style="r17"] .nr-hero-title { line-height: 1.04; }
html[data-kit][data-style="r17"] .nr-logo { text-transform: none; }

/* -------------------------------------------------------------------------- */
/* 4. Bề mặt: thẻ, hộp thông tin, bóng thoại, hộp thoại, toast                  */
/*    Nếu bề mặt có nền khác hẳn nền trang (giấy sáng trên nền tối),          */
/*    đổi token cục bộ ở đây để mọi thành phần con tự đọc được.               */
/* -------------------------------------------------------------------------- */
html[data-kit][data-style="r17"] :is(.nr-case, .nr-note, .nr-bubble, .nr-modal-card, .nr-toast) {
}
html[data-kit][data-style="r17"] .nr-case::before { }
html[data-kit][data-style="r17"] .nr-note::before { }
html[data-kit][data-style="r17"] .nr-bubble { }
html[data-kit][data-style="r17"] .nr-modal-card { }
html[data-kit][data-style="r17"] .nr-toast { }

/* -------------------------------------------------------------------------- */
/* 5. Nút: lamp = chính, ghost = phụ, coal = trên nền tối, text = liên kết      */
/* -------------------------------------------------------------------------- */
html[data-kit][data-style="r17"] .nr-btn { border-radius: var(--r-2); }
html[data-kit][data-style="r17"] .nr-btn--lamp { }
html[data-kit][data-style="r17"] .nr-btn--ghost { }
html[data-kit][data-style="r17"] .nr-btn--coal { }

/* -------------------------------------------------------------------------- */
/* 6. Badge, chip, form, lựa chọn, tab, tiến độ                                 */
/* -------------------------------------------------------------------------- */
html[data-kit][data-style="r17"] .nr-badge { }
html[data-kit][data-style="r17"] .nr-chip { }
html[data-kit][data-style="r17"] :is(.nr-input, .nr-select, .nr-textarea) { }
html[data-kit][data-style="r17"] :is(.nr-input, .nr-select, .nr-textarea):focus { }
html[data-kit][data-style="r17"] .nr-option { }
html[data-kit][data-style="r17"] .nr-option[aria-checked="true"] { }
html[data-kit][data-style="r17"] .nr-progress { }

/* -------------------------------------------------------------------------- */
/* 7. Điều hướng và nút chuyển phong cách                                       */
/* -------------------------------------------------------------------------- */
html[data-kit][data-style="r17"] .nr-nav { }
html[data-kit][data-style="r17"] .nr-stylepick { }
html[data-kit][data-style="r17"] .nr-stylepick button[aria-pressed="true"] { }

/* -------------------------------------------------------------------------- */
/* 8. Màu cứng còn lại trong noir.css (style-contract §6). Kiểm từng dòng:     */
/*    giữ nếu vẫn đọc tốt trên nền mới, ghi đè nếu không.                       */
/* -------------------------------------------------------------------------- */
/* Chữ lỗi, giảm số liệu, kết luận sai: #ff8a93 (hồng nhạt, chỉ đọc được trên nền tối) */
html[data-kit][data-style="r17"] :is(.nr-field.is-error .nr-hint, .nr-verdict--wrong .nr-verdict-title, .nr-stat-delta.is-down) { color: var(--neon); }
/* Nút cảnh báo: nền neon mờ, chữ #ffe3e5. Nền sáng: nền đặc var(--neon), chữ var(--ink-2) */
html[data-kit][data-style="r17"] .nr-btn--neon { }
/* Nút đèn: đáy gradient #e2952a (hổ phách). Màu nhấn khác hổ phách thì thay */
html[data-kit][data-style="r17"] .nr-btn--lamp { background: linear-gradient(180deg, var(--amber-hi), var(--amber) 42%, var(--amber-lo)); }
/* Tiêu đề chạy chữ (.nr-titlecard): vệt sáng #fff6dc; đầu thanh tiến độ: #fff8e6 */
html[data-kit][data-style="r17"] .nr-titlecard { }
html[data-kit][data-style="r17"] .nr-progress > i::after { }
/* Nút chuyển phong cách: chữ #ede6d6, đang chọn nền #ede6d6, viền focus #f2a93b */
html[data-kit][data-style="r17"] .nr-stylepick button[aria-pressed="true"] { background: var(--ivory); color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  html[data-kit][data-style="r17"] :is(.nr-btn, .nr-case--link):hover { transform: none; }
}

/* Font lấy từ next/font (biến gắn trên body ở app/layout.tsx) */
html[data-kit][data-style="r17"] body {
  --f-display: var(--font-cormorant), Georgia, serif;
  --f-voice: var(--font-newsreader), Georgia, serif;
  --f-body: var(--font-be-vietnam), system-ui, sans-serif;
  --f-mono: var(--font-ibm-plex-mono), ui-monospace, monospace;
}