/* ============================================================================ * SINH TỰ ĐỘNG từ ui-redesign/tokens — đừng sửa tay. * Nguồn: C:\PROJECTS\HungKings\ui-redesign\tokens\hungkings-tokens.css * Đổi giá trị thì sửa ở nguồn rồi chép lại, đừng sửa file này tại chỗ. * ========================================================================== */ /* ============================================================================ * HUNGKINGS — TOKEN GIAO DIỆN DÙNG CHUNG * Nguồn chuẩn: ../../BRAND.md mục 2 (màu) + mục 3b (hình khối tương tác). * Sinh ra để 5 bề mặt (lila · coach · points · realchess · arena) hết chạy ba * hệ thị giác rời nhau như báo cáo 03 đo được. * * ĐỪNG sửa giá trị ở đây rồi thôi — BRAND.md mới là nguồn chuẩn, sửa ở đó trước. * * --------------------------------------------------------------------------- * VÌ SAO CÓ HAI CƠ CHẾ THEME (đọc trước khi "dọn cho gọn") * lila chuyển theme bằng CLASS trên (`html.light`), còn coach/points dùng * `prefers-color-scheme` của HĐH. Trước đây hai cơ chế không biết nhau, nên khi * lila ở theme SÁNG mà HĐH đang TỐI thì chữ coach nhúng trong /hlv rơi xuống * 1,05:1 — tức VÔ HÌNH (báo cáo 03, lỗi #3). File này khai cả hai: * 1. `:root` → mặc định TỐI (giống lila) * 2. `@media (prefers-color-scheme: light)` → theo HĐH, chỉ khi trang KHÔNG tự khai * 3. `html.light`, `[data-theme="light"]` → lệnh tường minh, THẮNG cả hai trên * App nhúng phải nhận theme của trang cha qua class/attribute, đừng dựa vào HĐH. * ========================================================================= */ :root { /* --- Màu nền / mực ------------------------------------------------------ */ --hk-bg-page: #070e22; /* cũng là theme-color + manifest PWA */ --hk-bg-elev: #101a35; /* thẻ, hộp nổi trên nền trang */ --hk-bg-sunken: #050b1a; /* rãnh, vùng lõm */ --hk-border: #22304f; --hk-text: #e8edf7; --hk-text-dim: #9fb0cc; /* --- Accent (vàng logo) ------------------------------------------------- * CẢNH BÁO đã trả giá: vàng KHÔNG cõng nổi chữ trắng. Mọi chữ đặt TRÊN nền * accent phải dùng --hk-on-accent (mực tối), không bao giờ dùng trắng. * Muốn dùng VÀNG LÀM CHỮ trên nền tối thì dùng --hk-accent-text (#FFCB24), * vì #FFBF00 làm chữ không đạt AA. */ --hk-accent: #ffbf00; --hk-on-accent: #0d1733; --hk-accent-text: #ffcb24; /* --- Primary (xanh) ----------------------------------------------------- * MỘT xanh không cõng nổi cả hai vai. --hk-primary là vai NỀN (cõng chữ * trắng); --hk-link là vai CHỮ (đạt AA trên nền tối). Đừng gộp lại. */ --hk-primary: #4c6bbe; --hk-on-primary: #ffffff; --hk-link: hsl(from var(--hk-primary) h s 64%); /* --- Trạng thái --------------------------------------------------------- * Ở theme tối đây là màu PASTEL: dùng làm NỀN thì chữ bắt buộc là mực tối * (--hk-on-good/--hk-on-bad). Chữ trắng trên pastel là lỗi #1 của báo cáo 03, * đo được 1,74:1 và 1,52:1 ở những dải hiện trên MỌI ván. */ --hk-good: #4ade80; --hk-on-good: #052e16; --hk-bad: #f0776b; --hk-on-bad: #3b0d09; --hk-warn: #f5c451; --hk-on-warn: #2b1e00; /* --- Hình khối (BRAND.md mục 3b) --------------------------------------- */ --hk-radius-card: 14px; /* hero, hộp coach, card lớn */ --hk-radius-control: 10px; /* nút, input, hộp kênh */ --hk-radius-chip: 8px; /* nút vuông sidebar, nav item, badge */ /* Vùng bấm tối thiểu cho control ĐỘC LẬP trên mobile. * Ngoại lệ CÓ CHỦ Ý: link CHỮ inline trong câu (WCAG 2.5.8 chỉ cần ≥24px — * ép 44px trông kỳ), và ô bàn cờ (WCAG "Essential" — kích thước do ván quyết). */ --hk-touch: 44px; --hk-touch-inline: 24px; --hk-focus-width: 2px; --hk-focus-offset: 2px; --hk-focus-color: var(--hk-primary); --hk-shadow-card: 0 2px 12px rgb(0 0 0 / 35%); /* --- Chữ ---------------------------------------------------------------- * KHÔNG ghim gốc rem bằng px. `_typography.scss:3` của lila ghim gốc px nên * 1rem chỉ còn 12,18px ở 380px, và cài đặt cỡ chữ của trình duyệt bị VÔ HIỆU * trên 3/5 app (báo cáo 03, lỗi #5). Dùng thang tương đối. */ --hk-font-ui: system-ui, 'Noto Sans', 'Segoe UI', Roboto, sans-serif; /* Serif nhấn — tối đa MỘT khối mỗi màn. */ --hk-font-serif: Cambria, 'Palatino Linotype', 'Noto Serif', Georgia, serif; --hk-transition: 120ms ease; } /* 2. Theo HĐH — chỉ áp khi trang không tự khai theme tường minh. */ @media (prefers-color-scheme: light) { :root:not(.light):not(.dark):not([data-theme]) { --hk-bg-page: #f3f6fc; --hk-bg-elev: #ffffff; --hk-bg-sunken: #e6ecf7; --hk-border: #c9d4e8; --hk-text: #0d1733; --hk-text-dim: #4a5878; --hk-accent: #785900; /* vàng sáng không đạt AA làm nền ở theme sáng */ --hk-on-accent: #ffffff; --hk-accent-text: #785900; --hk-link: #244084; /* 9:1 — primary làm chữ ở theme sáng thì đạt */ --hk-good: #1e7a54; --hk-on-good: #ffffff; --hk-bad: #c0392b; --hk-on-bad: #ffffff; --hk-warn: #8a6100; --hk-on-warn: #ffffff; --hk-shadow-card: 0 2px 12px rgb(13 23 51 / 12%); } } /* 3. Lệnh tường minh — thắng cả mặc định lẫn HĐH. * `html.light` là cơ chế của lila; `[data-theme]` cho app nhúng nhận theme * từ trang cha truyền xuống. */ html.light, :root[data-theme='light'] { --hk-bg-page: #f3f6fc; --hk-bg-elev: #ffffff; --hk-bg-sunken: #e6ecf7; --hk-border: #c9d4e8; --hk-text: #0d1733; --hk-text-dim: #4a5878; --hk-accent: #785900; --hk-on-accent: #ffffff; --hk-accent-text: #785900; --hk-link: #244084; --hk-good: #1e7a54; --hk-on-good: #ffffff; --hk-bad: #c0392b; --hk-on-bad: #ffffff; --hk-warn: #8a6100; --hk-on-warn: #ffffff; --hk-shadow-card: 0 2px 12px rgb(13 23 51 / 12%); } html.dark, :root[data-theme='dark'] { --hk-bg-page: #070e22; --hk-bg-elev: #101a35; --hk-bg-sunken: #050b1a; --hk-border: #22304f; --hk-text: #e8edf7; --hk-text-dim: #9fb0cc; --hk-accent: #ffbf00; --hk-on-accent: #0d1733; --hk-accent-text: #ffcb24; --hk-link: hsl(from var(--hk-primary) h s 64%); --hk-good: #4ade80; --hk-on-good: #052e16; --hk-bad: #f0776b; --hk-on-bad: #3b0d09; --hk-warn: #f5c451; --hk-on-warn: #2b1e00; --hk-shadow-card: 0 2px 12px rgb(0 0 0 / 35%); } /* --- Tiện ích dùng chung --------------------------------------------------- * Cố ý ít: đây là lớp token, không phải framework. */ .hk-focusable:focus-visible, a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: var(--hk-focus-width) solid var(--hk-focus-color); outline-offset: var(--hk-focus-offset); } /* Vùng bấm ≥44px mà KHÔNG phải phóng to phần nhìn thấy. */ .hk-hit::after { content: ''; position: absolute; inset: 50% auto auto 50%; width: max(100%, var(--hk-touch)); height: max(100%, var(--hk-touch)); transform: translate(-50%, -50%); } @media (prefers-reduced-motion: reduce) { :root { --hk-transition: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }