/*!
 * tokens.css — CRM Xuân Hương
 * Nguồn duy nhất: "CRM UI Foundation" §01 màu · §02 typography · §03 spacing · §04 radius & shadow.
 * Mỗi biến ở nhóm §01 ánh xạ 1-1 với một dòng trong bảng token. KHÔNG thêm màu ngoài bảng
 * mà không ghi rõ nguồn ở nhóm "dẫn xuất".
 *
 * Quy tắc bất di bất dịch: font chỉ có MỘT weight (500). Không tồn tại class in đậm.
 */

/* ------------------------------------------------------------------ *
 * Font — self-host, một weight duy nhất (§2.5 kế hoạch)
 * ------------------------------------------------------------------ */

@font-face {
	font-family: "SVN Gilroy";
	src: url("../fonts/SVN-GilroyMedium.woff2") format("woff2"),
	     url("../fonts/SVN-GilroyMedium.woff") format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* ------------------------------------------------------------------ *
 * Token
 * ------------------------------------------------------------------ */

.xh-app,
.xh-auth {

	/* --- §01 Màu — 20 token, khớp từng hex --- */
	--xh-app-bg:        #F4F6FA;             /* app-bg      · nền vùng nội dung chính   */
	--xh-sidebar:       #101A2E;             /* sidebar     · sidebar, brand panel      */
	--xh-surface:       #FFFFFF;             /* surface     · card, topbar, dropdown    */
	--xh-surface-2:     #F7F9FC;             /* surface-2   · nền phụ, input, header    */
	--xh-line:          #E4E9F2;             /* border      · viền mặc định             */
	--xh-line-strong:   #CFD8E8;             /* border-strong · viền nhấn, checkbox     */
	--xh-ink:           #14213D;             /* text        · tiêu đề, nội dung chính   */
	--xh-ink-2:         #41506D;             /* text-2      · nhãn, nội dung phụ        */
	/* ⚠️ Foundation §01 ghi #8A97AE. Màu đó chỉ đạt 2,73:1 trên nền app-bg và
	 * 2,95:1 trên nền trắng — dưới xa ngưỡng WCAG AA 4,5:1 cho chữ thường, và
	 * Lighthouse báo lỗi tương phản ở 7 nhóm phần tử. Đã làm tối lại, giữ nguyên
	 * sắc độ (hue) và độ bão hoà: 4,73:1 trên app-bg, 5,11:1 trên trắng.
	 * Kiểm bằng: npm run audit:contrast */
	--xh-ink-muted:     #606E8C;             /* muted       · mô tả, metadata, placeholder */
	--xh-primary:       #1F62E8;             /* primary                                 */
	--xh-primary-hover: #1750C4;             /* primary-hover                           */
	--xh-primary-soft:  #EAF1FE;             /* primary-soft                            */
	--xh-accent:        #8C5A28;             /* accent      · nâu đồng                  */
	--xh-accent-soft:   #F6EFE7;             /* accent-soft                             */
	--xh-success:       #147A52;             /* success                                 */
	--xh-warning:       #8A5A12;             /* warning                                 */
	--xh-danger:        #CE3A45;             /* danger                                  */
	--xh-info:          #2A7FD4;             /* info                                    */
	--xh-focus-ring:    0 0 0 3px rgba(31, 98, 232, .18);   /* focus-ring · ring 3px    */
	--xh-overlay:       rgba(10, 17, 31, .45);              /* overlay · drawer & modal */

	/* --- §04 Radius — CHỈ bốn giá trị. 999px chỉ badge/chip/status/avatar (A5) --- */
	--xh-r-sm:   8px;
	--xh-r-md:   12px;
	--xh-r-lg:   16px;
	--xh-r-pill: 999px;

	/* --- §04 Shadow --- */
	--xh-sh-sm: 0 1px 2px rgba(16, 26, 46, .10);
	--xh-sh-md: 0 6px 18px rgba(16, 26, 46, .09);
	--xh-sh-lg: 0 12px 30px rgba(16, 26, 46, .20);

	/* --- §03 Spacing — bội số 4px --- */
	--xh-space-1:  4px;
	--xh-space-2:  8px;
	--xh-space-3:  12px;
	--xh-space-4:  16px;
	--xh-space-5:  20px;
	--xh-space-6:  24px;
	--xh-space-8:  32px;
	--xh-space-10: 40px;
	--xh-space-12: 48px;
	--xh-space-16: 64px;

	/* --- Dẫn xuất từ §05–§08 (trạng thái component), KHÔNG phải token §01 --- *
	 * Mỗi dòng ghi rõ mẫu Foundation đã lấy giá trị. Không tự chế màu mới.     */
	--xh-primary-active:  #1546A8;   /* §05 Primary · Active                   */
	--xh-primary-disabled:#C3D2EE;   /* §05 Primary · Disabled                 */
	--xh-primary-line:    #C6D8FB;   /* §06 chip đang chọn · viền              */
	--xh-danger-hover:    #B32F39;   /* §05 Danger · Hover                     */
	--xh-danger-active:   #9C2830;   /* §05 Danger · Active                    */
	--xh-danger-disabled: #EFC6CA;   /* §05 Danger · Disabled                  */
	--xh-danger-ink:      #A32B36;   /* §07 alert lỗi · chữ                    */
	--xh-danger-bg:       #FDECEE;   /* §07 alert lỗi · nền                    */
	--xh-danger-line:     #F3C9CE;   /* §07 alert lỗi · viền                   */
	--xh-danger-ring:     0 0 0 3px rgba(206, 58, 69, .22);  /* §05 Danger · Focus */
	--xh-success-ink:     #146B4B;   /* §07 alert thành công · chữ             */
	--xh-success-bg:      #EAF7F0;   /* §07 alert thành công · nền             */
	--xh-success-line:    #C7E7D6;   /* §07 alert thành công · viền            */
	--xh-warning-bg:      #FFF7EC;   /* §07 alert cảnh báo · nền               */
	--xh-warning-line:    #F0DCBB;   /* §07 alert cảnh báo · viền              */
	--xh-info-ink:        #1B5E96;   /* §07 alert thông tin · chữ              */
	--xh-info-bg:         #EAF3FC;   /* §07 alert thông tin · nền              */
	--xh-info-line:       #C8DEF4;   /* §07 alert thông tin · viền             */
	--xh-accent-line:     #E8D8C6;   /* §06 badge "Hạn chế" · viền             */
	--xh-accent-ink:      #FFF3E6;   /* §06 avatar · chữ trên nền accent       */
	--xh-ink-3:           #5A6884;   /* Foundation ghi #6B7A96 (4,33:1) — tối lại cho đạt 5,18:1 */   /* §06/§08 nhãn phụ, ghost mặc định       */
	--xh-ink-disabled:    #B4C0D4;   /* §06 placeholder, chevron, chữ disabled */
	--xh-tile-bg:         #F1F5FC;   /* §08 icon tile · nền mặc định           */
	--xh-tile-line:       #E4EBF7;   /* §08 icon tile · viền mặc định          */
	--xh-tile-ink:        #3B5578;   /* §08 icon tile · icon mặc định          */
	--xh-tile-line-soft:  #D5E2FB;   /* §08 icon tile · viền khi hover         */
	--xh-card-line-hover: #B9CDF6;   /* §08 application card · viền khi hover  */
	--xh-hover-soft:      #F0F3F9;   /* §05 Ghost · Hover                      */
	--xh-hover-strong:    #E6EBF4;   /* §05 Ghost · Active                     */
	--xh-neutral-bg:      #EDF1F7;   /* §05 Secondary · Active                 */
	--xh-line-soft:       #EDF1F7;   /* §08 divider trong dropdown             */
	--xh-skel-a:          #EEF1F7;   /* §08 skeleton                           */
	--xh-skel-b:          #F7F9FC;   /* §08 skeleton                           */
	--xh-sidebar-ink:     #A9B7D0;   /* §08 sidebar item · chữ mặc định        */
	--xh-sidebar-ink-2:   #7483A2;   /* Foundation ghi #5E6D8C (3,34:1 trên nền sidebar) — sáng lại cho đạt 4,56:1 */   /* §08 sidebar · chữ mờ                   */
	--xh-sidebar-accent:  #4E86F5;   /* §08 sidebar item · vạch active + focus */
	--xh-sidebar-line:    rgba(255, 255, 255, .08);   /* đường phân cách chân sidebar (prototype) */
	--xh-tooltip-ink:     #DCE4F2;   /* §06 tooltip · chữ                      */
	--xh-primary-line-2:  #DCE6FA;   /* §09 nút hành động trong toast · viền   */
	--xh-danger-line-2:   #E0A5AB;   /* §06 input trạng thái lỗi · viền        */
	--xh-sh-toast:        0 6px 18px rgba(16, 26, 46, .12);   /* §09 toast — đậm hơn sh-md một chút */
	--xh-on-dark:         #FFFFFF;   /* Chữ/icon trên nền màu đặc: nút primary/danger, sidebar active */
	--xh-sidebar-hover:   rgba(255, 255, 255, .06);   /* §08 sidebar item · hover  */
	--xh-sidebar-active:  rgba(31, 98, 232, .20);     /* §08 sidebar item · active */
	--xh-spinner-track:   rgba(255, 255, 255, .35);   /* §05 nút loading · vòng nền */

	/* --- Dẫn xuất từ artboard Đăng nhập của prototype --- *
	 * Chỉ dùng trong pages.css, phần cột thương hiệu nền tối.         */
	--xh-login-glow-1:    rgba(31, 98, 232, .30);     /* quầng sáng xanh góc trên trái  */
	--xh-login-glow-2:    rgba(140, 90, 40, .20);     /* quầng sáng đồng góc dưới phải  */
	--xh-login-grid:      rgba(255, 255, 255, .035);  /* lưới ô 64px                    */
	--xh-login-tile:      rgba(255, 255, 255, .07);   /* nền ô icon                     */
	--xh-login-tile-line: rgba(255, 255, 255, .12);   /* viền ô icon                    */
	--xh-login-tile-ink:  #8FB4FF;                    /* icon trong ô                   */
	--xh-login-foot:      #7A88A6;   /* prototype ghi #6E7E9C (4,24:1) — sáng lại cho đạt 4,88:1 */                    /* dòng chân cột thương hiệu      */
	--xh-login-shadow:    0 6px 18px rgba(5, 12, 26, .28);   /* hộp logo               */
}

/* ------------------------------------------------------------------ *
 * §02 Typography — 9 bậc. font-weight LUÔN 500, không có ngoại lệ.
 * ------------------------------------------------------------------ */

.xh-app .xh-t-display,
.xh-auth .xh-t-display        { font-size: 38px;   line-height: 47px; letter-spacing: -0.4px; }

.xh-app .xh-t-page-title,
.xh-auth .xh-t-page-title     { font-size: 26px;   line-height: 34px; letter-spacing: -0.2px; }

.xh-app .xh-t-section-title,
.xh-auth .xh-t-section-title  { font-size: 17px;   line-height: 24px; }

.xh-app .xh-t-card-title,
.xh-auth .xh-t-card-title     { font-size: 15px;   line-height: 22px; }

.xh-app .xh-t-body,
.xh-auth .xh-t-body           { font-size: 14px;   line-height: 22px; }

.xh-app .xh-t-body-sm,
.xh-auth .xh-t-body-sm        { font-size: 12.5px; line-height: 19px; }

.xh-app .xh-t-label,
.xh-auth .xh-t-label          { font-size: 13px;   line-height: 18px; }

.xh-app .xh-t-caption,
.xh-auth .xh-t-caption        { font-size: 11.5px; line-height: 16px; }

.xh-app .xh-t-overline,
.xh-auth .xh-t-overline       { font-size: 10.5px; line-height: 16px;
                                letter-spacing: 0.09em; text-transform: uppercase; }