/* ═══════════════════════════════════════════════════════════════════════════ App DevTools — Design System tokens. NGUỒN SỰ THẬT DUY NHẤT về màu sắc, khoảng cách, bán kính và kiểu chữ cho cả platform: hub + mọi tool. Ba tầng, theo đúng thứ tự phụ thuộc: PRIMITIVE giá trị thô, không mang ý nghĩa --brand-500, --space-4 ↓ SEMANTIC gán ý nghĩa, ĐỔI theo sáng/tối --accent, --surface-card ↓ COMPONENT riêng cho từng thành phần --button-bg, --card-padding Luật: CSS của component chỉ được dùng tầng SEMANTIC và COMPONENT. Không hex thô, không chạm tầng PRIMITIVE. `tests/toolbox/test_design_tokens.py` cưỡng chế, và nó TỰ TÍNH LẠI tương phản WCAG từ file này — đổi một màu làm vỡ chuẩn là test đỏ, không phải chờ ai đó phát hiện trên production. Hướng thị giác "Clean & Soft" (2026-09-23, theo Claude Design của ik-resources): nền trắng/xám TRUNG TÍNH, bo góc tròn hơn một bậc, bóng mềm thay cho đường kẻ, nền cam nhạt cho nút "soft". SÁNG là mặc định: khối `:root, :root[data-theme="light"]` là sáng, `[data-theme="dark"]` là tối. Vì sao file này tồn tại: trước nó, cùng một khái niệm có BA tên khác nhau (`--bg`/`--web-bg`/`--card`) và màu accent có BA giá trị (`#ff6b35`, `#FF6131`, `#FB3C38→#F66F1B`). Nút chính của hub — chữ trắng trên `#ff6b35` — chỉ đạt 2.84:1 trên chuẩn 4.5:1, tức không đạt trên mọi trang đăng nhập. Xem docs/design-system.md §Bằng chứng. ═══════════════════════════════════════════════════════════════════════════ */ /* ─── TẦNG 1: PRIMITIVE ───────────────────────────────────────────────────── Không đổi theo theme. Không dùng trực tiếp trong CSS của component. */ :root { /* Brand — lấy từ gradient trong favicon.svg, là định nghĩa gốc của thương hiệu */ --brand-red-500: #FB3C38; /* đầu gradient */ --brand-orange-500: #F66F1B; /* cuối gradient */ --brand-500: #FF6131; /* accent tươi — CẦN mực tối, xem §accent */ --brand-700: #C63A0D; /* accent đậm — đỡ chữ trắng (5.23:1) VÀ đủ làm chữ trên nền sáng #F5F6F8 (4.84:1). Bản #D2400F cũ chỉ đạt 4.33 trên nền trang sáng — đo trên #FFFFFF thì qua, trên nền THẬT thì không. */ --brand-800: #A62F09; /* hover của accent đậm */ /* Neutral — thang theo độ sáng, gộp từ cả hub và gncrawl */ --neutral-950: #0D0D0E; --neutral-920: #1E1E1E; /* surface lõm (gncrawl --web-surface) */ --neutral-880: #2C2C2C; /* surface lõm bậc 2 */ --neutral-900: #0F1115; --neutral-850: #151517; --neutral-800: #171A21; --neutral-700: #262B36; --neutral-600: #383840; --neutral-500: #63696E; /* SỬA từ #575D61 — bản cũ 2.91:1 < 3.0 */ --neutral-400: #8B93A3; --neutral-350: #5F6774; /* muted cho nền sáng */ --neutral-300: #7C838F; /* chữ mờ bậc 3 — ĐẠT 4.5:1 trên nền tối, khác #575D61 cũ chỉ đạt 2.91:1 */ --neutral-250: #9E9E9F; --neutral-200: #CECFCE; --neutral-190: #E2E2E2; --neutral-120: #F5F5F5; --neutral-150: #DDE1E8; --neutral-100: #E7EAF0; --neutral-75: #F5F6F8; --neutral-ink: #1C2027; /* chữ đậm nhất trên nền sáng */ --neutral-ink-2: #313545; /* chữ đọc (bài dài) trên nền sáng */ --neutral-0: #FFFFFF; /* Xám TRUNG TÍNH — thang không ám màu, cho hướng "công cụ dữ liệu". Thang --neutral-* cũ ám xanh (#171A21 có B cao hơn R 10 bước), nên mảng lớn của giao diện ngả lạnh. Thang này giữ R=G=B hoặc lệch ≤2, để nền là nền chứ không phải một màu nhạt. Thang cũ GIỮ NGUYÊN: gncrawl alias nó, và bìa truyện cần nền hơi lạnh. Từ Clean & Soft, thang này chỉ còn phục vụ chế độ TỐI; chế độ sáng dùng --pure-*. */ --grey-980: #0A0A0B; --grey-950: #101011; --grey-900: #151516; --grey-850: #1A1A1C; --grey-800: #202023; --grey-700: #2A2A2E; --grey-600: #3C3C41; --grey-500: #6E6E75; --grey-450: #808089; /* chữ mờ bậc 3 trên nền tối — 4.66:1 trên --surface-card, và VẪN mờ hơn --text-muted (5.77). Thang này đánh số thuận (số nhỏ = sáng), ngược với thang --neutral-* cũ; lần đầu tôi map thẳng 300→subtle và làm subtle SÁNG HƠN muted, tức đảo lộn phân cấp. */ --grey-400: #909099; --grey-300: #A6A6AE; --grey-200: #C8C8CE; --grey-150: #E4E4E7; --grey-100: #EDEDEF; --grey-75: #F7F7F8; --grey-50: #FAFAFA; --grey-ink: #17171A; --grey-ink-2: #3A3A40; /* Pure — xám Clean & Soft cho chế độ SÁNG. Không ám màu nào, để cam brand là sắc độ DUY NHẤT trên trang trắng. Giá trị lấy nguyên từ `_ds/tokens/colors.css` — bảng TRUNG TÍNH, không phải "giấy ấm" #FBF8F5 mà README của DS mô tả (người dùng chốt 2026-09-23). */ --pure-0: #FFFFFF; --pure-25: #FCFCFD; --pure-50: #FAFAFA; --pure-75: #F5F5F6; --pure-100: #EDEDEF; --pure-150: #E7E7EA; --pure-300: #C9C9CE; --pure-500: #85858C; /* đường kẻ đậm — 3.66:1 trên nền trắng */ --pure-600: #6B6B72; /* chữ mờ — 4.52:1 ngay cả trên --pure-100 */ --pure-700: #52525A; --pure-ink-2: #3F3F46; --pure-ink: #18181B; /* Peach — nền cam nhạt cho nút "soft" và vùng nhấn */ --peach-50: #FFF7F3; --peach-100: #FFEEE6; /* chữ #C63A0D trên nó: 4.64:1 */ --peach-150: #FFEAE0; /* THÊM, không có trong DS: hover của nút soft. DS dùng --peach-200 và chữ #C63A0D trên nó chỉ đạt 4.08:1. Nền có thể tối hơn --peach-100 rất ít trước khi chữ rơi dưới 4.5 — đây là bước tối nhất còn đạt: 4.51:1 (đo bằng test). */ --peach-200: #FFDCCB; /* giữ theo DS cho đủ thang — KHÔNG đặt chữ #C63A0D lên nó (4.08:1) */ /* Status — mỗi trạng thái hai bước: -400 cho nền tối, -700 cho nền sáng */ --green-400: #16AF65; --green-700: #0E8149; /* SỬA từ #0F8C4F — bản cũ 4.30:1 < 4.5 */ --amber-400: #FFBB00; --amber-700: #8A6500; --red-400: #F04444; /* SỬA từ #E93131 — bản cũ 4.10:1 trên thẻ tối (#171A21); đo trên #0D0D0E thì qua */ --red-700: #C41F1F; --blue-400: #1F87FF; --blue-700: #0A6BDB; /* Chart — bảng phân loại, ĐÃ validate riêng cho từng chế độ. Không lật ngược bảng tối thành sáng: tương phản với nền trắng đòi màu tối hơn hẳn nên các bước phải tính lại. Hai bảng giữ cùng họ màu (lệch hue ≤ 14°) nên một series vẫn nhận ra được khi đổi chế độ. ĐỔI MÀU THÌ PHẢI CHẠY LẠI VALIDATOR CHO CẢ HAI CHẾ ĐỘ. */ --chart-dark-1: #6B8FDA; --chart-light-1: #0D5794; --chart-dark-2: #10A88E; --chart-light-2: #14A49C; --chart-dark-3: #C17F55; --chart-light-3: #84400E; --chart-dark-4: #975B89; --chart-light-4: #950F66; --chart-dark-5: #6A7507; --chart-light-5: #6C7A16; /* Khoảng cách — thang 4px */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; /* Bán kính — Clean & Soft tròn hơn bản cũ (8/10/14) một bậc. --radius-xl cho khối lớn (hộp thoại, thẻ trang chủ). */ --radius-sm: 10px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 24px; --radius-pill: 100px; /* Kiểu chữ */ /* Mỗi stack nêu MẶT CHỮ MONG MUỐN trước, rồi rơi về stack hệ thống. Module nào tự host mặt chữ đó (xem ik_resources/web/static/fonts.css) thì render bằng nó; module nào không thì rơi về hệ thống và trông đúng như trước. Nhờ vậy ý định kiểu chữ nằm MỘT chỗ ở đây, còn việc ship file woff2 là chuyện riêng của từng module — không module nào phải tự khai lại token, và thêm font cho một module không âm thầm đổi diện mạo module khác. */ --font-ui: "IBM Plex Sans", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Space Grotesk", "SVN-Gilroy", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --font-reading: Literata, Georgia, "Times New Roman", serif; --text-xs: 12px; --text-sm: 13px; --text-base: 15px; --text-lg: 17px; --text-xl: 22px; /* Số liệu trong bảng: một bậc TO HƠN chữ nhãn quanh nó, và đậm hơn. Bảng effort được đọc bằng cách quét cột số, không bằng cách đọc dòng — nên số phải thắng nhãn về trọng lượng thị giác, ngược với văn bản thường. */ --text-data: 14px; --text-data-lg: 18px; /* con số chủ đạo của một thẻ tóm tắt */ --weight-data: 600; --leading-tight: 1.25; --leading-normal: 1.6; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --tracking-tight: -0.02em; --tracking-caps: 0.08em; /* Chuyển động. --*-soft cho bóng/nền đổi khi hover: chậm hơn và "đỗ mềm" ở cuối, hợp với bóng khuếch tán; --*-fast/standard cho phản hồi tức thì. */ --duration-fast: 120ms; --duration-soft: 220ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-soft: cubic-bezier(0.22, 1, 0.36, 1); /* Vùng chạm tối thiểu — WCAG 2.5.5 / hướng dẫn nền tảng di động */ --tap-min: 44px; } /* ─── TẦNG 2: SEMANTIC — nền sáng (MẶC ĐỊNH) ──────────────────────────────── Đây là tầng ĐỔI khi chuyển theme. Component chỉ nên dùng tầng này trở lên. Selector có `:root` trần nên khối này là MẶC ĐỊNH: trang thiếu data-theme vẫn ra sáng, khớp với theme.js ("không phải dark thì là sáng"). Khối tối bên dưới thắng nhờ ĐỘ ĐẶC HIỆU (0,2,0 > 0,1,0), không nhờ thứ tự — nên mọi token ở đây PHẢI có bản tối tương ứng, nếu không trang tối thừa hưởng giá trị sáng. Test "moi token prototype dung deu co" canh chuyện đó. Không phải bản lật ngược của nền tối: mỗi giá trị được chọn lại và đo lại trên nền của chính nó. Đó là lý do status dùng bước -700 chứ không phải -400. */ :root, :root[data-theme="light"] { /* Trang và thẻ CÙNG màu trắng: thẻ tách khỏi trang bằng bóng mềm + đường kẻ mảnh, không bằng chênh nền. */ --surface-page: var(--pure-0); --surface-card: var(--pure-0); --surface-raised: var(--pure-0); /* menu, hộp thoại: trắng + --shadow-pop */ --surface-sunken: var(--pure-75); --surface-sunken-2: var(--pure-100); --surface-reading: var(--pure-25); --surface-glass: var(--surface-card); --surface-accent-soft: var(--peach-50); --nav-bg: var(--pure-0); --overlay: rgba(24, 24, 27, 0.32); --border-subtle: var(--pure-150); --border-soft: var(--pure-100); /* kẻ hàng bảng — mảnh hơn subtle */ --border-strong: var(--pure-500); /* 3.66:1 trên nền trang (≥ 3:1) */ --text-primary: var(--pure-ink); --text-muted: var(--pure-600); --text-subtle: var(--pure-600); --text-reading: var(--pure-ink-2); --text-tab: var(--pure-600); --accent: var(--brand-500); --accent-ink: var(--neutral-950); --accent-hover: var(--brand-orange-500); --accent-strong: var(--brand-700); --accent-strong-ink: var(--neutral-0); /* Trên nền sáng, accent tươi chỉ đạt 2.77:1 trên nền trang — KHÔNG đủ cho chữ (4.5) lẫn cho viền (3.0). Cả hai vai dùng bước đậm. Đây đúng là chỗ `hub.css` cũ sai: nó dùng cùng một --accent cho cả hai chế độ. */ --accent-text: var(--brand-700); /* 5.23:1 trên --surface-page */ --accent-line: var(--brand-700); /* Nút "soft": nền cam nhạt + chữ accent đậm. Hover dùng --peach-150 thay cho --peach-200 của DS (4.08:1) — đo được 4.51:1. */ --accent-soft: var(--peach-100); /* 4.64:1 với --accent-soft-ink */ --accent-soft-hover: var(--peach-150); /* 4.51:1 */ --accent-soft-ink: var(--brand-700); --status-success: var(--green-700); --status-warning: var(--amber-700); --status-danger: var(--red-700); --status-info: var(--blue-700); /* Vòng focus cam đậm thay cho xanh: trên trang trắng một sắc độ duy nhất (cam) giữ giao diện yên; 5.23:1 trên nền trang, dư chuẩn 3:1. */ --focus-ring: var(--brand-700); --focus-halo: 0 0 0 4px rgba(255, 97, 49, 0.16); --selection: rgba(255, 97, 49, 0.20); /* Bóng mềm — trung tính, alpha thấp, blur rộng. Không bao giờ có cạnh cứng. */ --shadow-xs: 0 1px 2px rgba(24, 24, 27, 0.05); --shadow-card: 0 1px 2px rgba(24, 24, 27, 0.05), 0 8px 24px rgba(24, 24, 27, 0.08); --shadow-hover: 0 2px 4px rgba(24, 24, 27, 0.05), 0 12px 32px rgba(24, 24, 27, 0.10); --shadow-pop: 0 4px 8px rgba(24, 24, 27, 0.06), 0 20px 48px rgba(24, 24, 27, 0.14); --link: var(--brand-700); --link-hover: var(--brand-800); /* Gradient thương hiệu — ĐỊNH NGHĨA GỐC nằm ở favicon.svg. Bản DS chỉ khai nó ở khối tối, nên ở chế độ sáng (mặc định) nút chính gncrawl mất nền. Dùng làm NỀN thì mực trên nó phải là --accent-ink: chữ trắng trên đầu cuối gradient (#F66F1B) chỉ đạt 2.91:1. */ --accent-gradient: linear-gradient(90deg, var(--brand-red-500) 0%, var(--brand-orange-500) 100%); /* Nền nhạt + viền cho badge/alert theo trạng thái. Chữ --status-* đặt lên tint phủ trên --surface-card phải đạt 4.5:1 (test đo sau khi trộn alpha). tint-success: DS để 0.08 → 4.44:1; hạ còn 0.06 → 4.55:1. Các cặp còn lại giữ giá trị DS: warning 4.90, danger 5.25, info 4.61. */ --tint-success: rgba(14, 129, 73, 0.06); --line-success: rgba(14, 129, 73, 0.24); --tint-warning: rgba(255, 187, 0, 0.14); --line-warning: rgba(190, 140, 0, 0.30); --tint-danger: rgba(196, 31, 31, 0.07); --line-danger: rgba(196, 31, 31, 0.24); --tint-info: rgba(10, 107, 219, 0.07); --line-info: rgba(10, 107, 219, 0.24); --tint-accent: rgba(255, 97, 49, 0.10); --line-accent: rgba(198, 58, 13, 0.26); /* Bìa giữ chỗ khi truyện chưa có ảnh — trang trí, ba biến thể để lưới không đơn điệu. Vẫn là token vì nó phải đổi theo sáng/tối: gradient tối trên trang sáng trông như một lỗ đen. */ --cover-tint-0: linear-gradient(150deg, #FFE1D2, var(--pure-75)); --cover-tint-1: linear-gradient(150deg, #E9EDF3, var(--pure-75)); --cover-tint-2: linear-gradient(150deg, #EEEEF0, var(--pure-75)); --chart-1: var(--chart-light-1); --chart-2: var(--chart-light-2); --chart-3: var(--chart-light-3); --chart-4: var(--chart-light-4); --chart-5: var(--chart-light-5); --chart-surface: var(--surface-card); } /* ─── TẦNG 2: SEMANTIC — nền tối ──────────────────────────────────────────── Chọn bằng data-theme="dark". Giá trị cũ giữ nguyên (đây từng là mặc định); token mới của Clean & Soft lấy bản tối của DS. */ :root[data-theme="dark"] { /* Nền trang thống nhất về #0D0D0E — trùng nền favicon và trùng gncrawl (giao diện lớn nhất, chín nhất). Đổi từ #0F1115 sang chỉ LÀM TĂNG mọi tỉ lệ tương phản, nên không cặp nào xấu đi. */ --surface-page: var(--grey-980); --surface-card: var(--grey-900); --surface-raised: var(--grey-850); --surface-sunken: var(--grey-950); --surface-sunken-2: var(--grey-800); --surface-reading: var(--grey-980); /* ĐẶC, không trong suốt. Trước đây hai token này là kính mờ để nền glow xuyên qua — trông đẹp nhưng chữ trên chúng không đạt WCAG, và số liệu loại bỏ mọi cách cứu hiệu ứng đó: · giữ frost + giảm glow -> phải giảm alpha glow 0.28 → 0.07, tức mất glow để cứu frost · giữ frost + làm sáng --text-subtle -> cần #9099A6 (5.15), nhưng --text-muted chỉ 4.80, tức subtle SÁNG HƠN muted: đảo lộn phân cấp · thẻ đặc -> subtle 4.56 / muted 5.64, glow và phân cấp giữ nguyên cả hai Glow vẫn thấy ở lề và khoảng trống quanh nội dung. */ --surface-glass: var(--surface-card); --surface-accent-soft: rgba(255, 97, 49, 0.08); --nav-bg: var(--surface-card); --overlay: rgba(13, 13, 14, 0.72); /* Đường kẻ MẢNH: ở hướng "công cụ dữ liệu", cấu trúc bảng do khoảng cách và trọng lượng chữ dựng nên, đường kẻ chỉ tách hàng. Viền dày biến một bảng 40 dòng thành một cái lưới sắt. */ --border-subtle: var(--grey-700); --border-soft: var(--grey-800); --border-strong: var(--grey-500); /* 3.91:1 trên nền trang, 3.61:1 trên thẻ — grey-600 chỉ đạt 1.80, dưới 3:1 của WCAG 1.4.11 cho thành phần UI */ --text-primary: var(--grey-100); --text-muted: var(--grey-400); --text-subtle: var(--grey-450); /* placeholder, chú thích phụ */ --text-reading: var(--grey-150); /* bài dài — dịu hơn text-primary */ --text-tab: var(--grey-200); /* accent TƯƠI: dùng làm NỀN thì chữ trên nó phải là mực tối. Cam brand bão hoà cao — không bước nào của nó đỡ được chữ trắng ở 4.5:1 mà vẫn còn tươi (#FF6131 + trắng = đúng 3.00). Nên nút chính là "cam tươi + mực tối", không phải "cam + chữ trắng". */ --accent: var(--brand-500); --accent-ink: var(--neutral-950); /* 6.48:1 trên --accent */ --accent-hover: var(--brand-orange-500); /* accent ĐẬM: dành cho chỗ buộc phải có chữ trắng (badge trên ảnh, v.v.) */ --accent-strong: var(--brand-700); --accent-strong-ink: var(--neutral-0); /* 4.69:1 */ /* accent làm CHỮ trên nền trang */ --accent-text: var(--brand-500); /* 6.48:1 trên --surface-page */ /* accent làm VIỀN/VỆT trên nền trang — hợp đồng KHÁC --accent. --accent là một MẢNG MÀU (nền nút): nó chỉ cần tương phản với mực đặt trên nó. --accent-line là một ĐƯỜNG KẺ: nó phải tương phản với nền trang. Dùng chung một token cho hai vai là lỗi mô hình hoá — và ở chế độ sáng nó hỏng thật: #FF6131 trên #F5F6F8 chỉ đạt 2.77:1. */ --accent-line: var(--brand-500); /* 6.30:1 trên --surface-page */ /* Nút "soft". DS để hover 0.22 → chữ 4.46:1; hạ còn 0.20 → 4.63:1. Nền nghỉ 0.14 → 5.08:1. */ --accent-soft: rgba(255, 97, 49, 0.14); --accent-soft-hover: rgba(255, 97, 49, 0.20); --accent-soft-ink: var(--brand-500); --status-success: var(--green-400); --status-warning: var(--amber-400); --status-danger: var(--red-400); --status-info: var(--blue-400); --focus-ring: var(--blue-400); --focus-halo: 0 0 0 4px rgba(31, 135, 255, 0.22); --selection: rgba(255, 97, 49, 0.28); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.32); --shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.4); --shadow-pop: 0 4px 8px rgba(0, 0, 0, 0.4), 0 20px 48px rgba(0, 0, 0, 0.5); --link: var(--brand-500); --link-hover: #FFB199; --accent-gradient: linear-gradient(90deg, var(--brand-red-500) 0%, var(--brand-orange-500) 100%); /* Nền nhạt + viền cho badge/alert theo trạng thái. tint-danger: bản cũ 0.12 → chữ 4.34:1; hạ còn 0.08 → 4.53:1. Còn lại giữ nguyên: success 5.48, warning 8.48, info 4.52. */ --tint-success: rgba(22, 175, 101, 0.12); --line-success: rgba(22, 175, 101, 0.32); --tint-warning: rgba(255, 187, 0, 0.12); --line-warning: rgba(255, 187, 0, 0.32); --tint-danger: rgba(240, 68, 68, 0.08); --line-danger: rgba(240, 68, 68, 0.32); --tint-info: rgba(31, 135, 255, 0.12); --line-info: rgba(31, 135, 255, 0.32); --tint-accent: rgba(255, 97, 49, 0.12); --line-accent: rgba(255, 97, 49, 0.32); --cover-tint-0: linear-gradient(150deg, #3A2018, var(--surface-sunken)); --cover-tint-1: linear-gradient(150deg, #16233A, var(--surface-sunken)); --cover-tint-2: linear-gradient(150deg, #1B3524, var(--surface-sunken)); --chart-1: var(--chart-dark-1); --chart-2: var(--chart-dark-2); --chart-3: var(--chart-dark-3); --chart-4: var(--chart-dark-4); --chart-5: var(--chart-dark-5); --chart-surface: var(--surface-card); } /* color-scheme để ô input, thanh cuộn và control gốc của trình duyệt đổi theo */ :root { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* ─── TẦNG 3: COMPONENT ───────────────────────────────────────────────────── Chỉ trỏ vào tầng SEMANTIC. Mỗi token ở đây tồn tại để đổi được MỘT thành phần mà không đụng phần còn lại. */ :root { /* Button — chính */ --button-bg: var(--accent); --button-fg: var(--accent-ink); --button-bg-hover: var(--accent-hover); --button-radius: var(--radius-md); --button-padding-y: 11px; --button-padding-x: var(--space-4); --button-min-height: var(--tap-min); --button-weight: var(--weight-semibold); /* Button — ghost: KHÔNG viền, nền lõm. Ranh giới nút do nền + chữ nhãn tạo nên; module dùng ghost PHẢI đặt `background: var(--button-ghost-bg)`, nếu không nút chỉ còn là chữ trôi. */ --button-ghost-fg: var(--text-muted); --button-ghost-border: transparent; --button-ghost-bg: var(--surface-sunken); --button-ghost-bg-hover: var(--surface-sunken-2); --button-ghost-fg-hover: var(--text-primary); /* Button — soft: nền cam nhạt, chữ accent đậm */ --button-soft-bg: var(--accent-soft); --button-soft-fg: var(--accent-soft-ink); --button-soft-bg-hover: var(--accent-soft-hover); /* Card */ --card-bg: var(--surface-card); --card-border: var(--border-subtle); --card-radius: var(--radius-lg); --card-padding: var(--space-6); /* ĐƯỜNG KẺ -> --accent-line (≥ 3:1 trên nền trang), KHÔNG phải --line-accent của DS: đó là viền tint alpha .26/.32, chỉ 1.49:1 (sáng) / 1.61:1 (tối) — viền hover thẻ gần như biến mất. */ --card-hover-border: var(--accent-line); --card-shadow: var(--shadow-card); --card-shadow-hover: var(--shadow-hover); /* Input — nền lõm + viền mảnh 3:1. DS để viền `transparent` và chỉ còn nền lõm (1.09:1 so với thẻ): người mắt kém không thấy ô nhập ở đâu. Người dùng chốt giữ viền = --border-strong (sáng 3.66:1, tối 3.61:1 trên thẻ). Khi focus nền về màu thẻ — DS trỏ thẳng --pure-0 (primitive, không đổi theo theme: ô nhập trắng giữa trang tối). */ --input-bg: var(--surface-sunken); --input-bg-focus: var(--surface-card); --input-fg: var(--text-primary); --input-border: var(--border-strong); --input-border-focus: var(--accent-line); /* ĐƯỜNG KẺ -> accent-line */ --input-focus-halo: var(--focus-halo); --input-radius: var(--radius-md); --input-padding-y: 10px; --input-padding-x: var(--space-3); --input-min-height: var(--tap-min); /* Alert */ --alert-danger-fg: var(--status-danger); --alert-danger-border: var(--status-danger); --alert-radius: var(--radius-md); /* Topbar — không kẻ đáy: Clean & Soft tách vùng bằng khoảng trắng */ --topbar-border: transparent; --topbar-padding-y: var(--space-4); --topbar-padding-x: var(--space-6); /* Badge đặt TRÊN ẢNH (bìa truyện) — NGOẠI LỆ CÓ LÝ DO. Nó nằm trên tác phẩm bất kỳ mà ta không biết trước màu, nên nó KHÔNG đổi theo sáng/tối: nền tối mờ + chữ trắng đọc được trên mọi ảnh. Cùng loại ngoại lệ với nút Google. Ba giá trị này nằm trong HEX_DUOC_PHEP của test. */ --badge-media-bg: rgba(13, 13, 14, 0.72); --badge-media-fg: #FFFFFF; --badge-media-border: rgba(255, 255, 255, 0.16); /* Table */ --table-header-fg: var(--text-muted); --table-row-border: var(--border-soft); }