/* ========================================================================== TrendyShop — design tokens Cổng vào duy nhất cho màu, chữ, khoảng cách. Một mã hex cứng trong main.css là bug — thêm token ở đây rồi dùng var(). Mọi tỉ lệ tương phản dưới đây được ĐO (WCAG 2.1 relative luminance), không ước lượng. Đo lại trước khi đổi một cặp. ========================================================================== */ :root{ /* ── Nền và mực ─────────────────────────────────────────────────────── Rút từ chính bộ ảnh của shop: hero là bàn gỗ dưới nắng, sản phẩm chụp studio nền trắng. Nền trang ấm để thẻ trắng của sản phẩm nổi lên trên nó; nếu nền cũng trắng thì thẻ biến mất và trang trôi thành một mảng. */ --ground: #FBF7F1; /* nền trang */ --ground-2: #F3ECE2; /* dải chìm một bậc */ --card: #FFFFFF; /* thẻ sản phẩm — phải trắng, khớp nền ảnh chụp */ --ink: #17120E; /* chữ chính — 17.42:1 trên ground · AAA */ --ink-2: #635A50; /* chữ phụ — 6.33:1 trên ground · AA */ /* Đậm hơn #E7DFD3 một nấc. Ở nền trắng thì sắc cũ gần như tan biến, nên các thẻ trông như không có viền và trôi trên trang. Viền là trang trí, không mang chữ, nên không có ngưỡng tương phản nào bị phá ở đây. Sửa ở token vì 51 rule trong main.css dùng chung nó — vá từng chỗ là chắc chắn bỏ sót. */ --line: #DCD1C0; /* kẻ, viền — trang trí, không mang chữ */ --line-2: #D8CCBB; /* ── Thương hiệu ────────────────────────────────────────────────────── ⚠️ Shop đang chạy dùng #FF4F5A. Đo được **3.02:1** trên nền sáng và **3.22:1** cho chữ trắng đặt lên — trượt AA ở cả hai chiều, tức là mọi nút "Thêm vào giỏ" và mọi con số giá đang không đọc được đúng chuẩn. Hai giá trị dưới đây giữ đúng sắc đỏ đó nhưng đạt chuẩn. */ --brand: #D92B38; /* nền đặc, chữ trắng lên trên — 4.82:1 · AA */ --brand-ink: #C81E2B; /* chữ đỏ trên nền sáng — 5.35:1 · AA */ --brand-wash: #FDECEC; /* nền nhạt cho chip, badge */ --sun: #FFC833; /* badge giảm giá — 1.45:1, CHỈ trang trí, chữ luôn --ink */ --sun-2: #FF8A3D; /* đầu kia của vệt cam, chỉ dùng trong gradient */ --sun-lit: #FFE9A8; /* nhịp sáng của ô giây đồng hồ */ --sun-wash: #FFF4D6; /* Chuyển sắc của tấm flash sale. Ba stop này đo rồi: chữ trắng đạt 6.92 / 4.82 / 10.97 → an toàn cả ba. --sun chỉ đạt 3.12 trên --flash-2 → không bao giờ làm chữ trên nền đỏ. */ --flash-1: #B3141F; --flash-2: #D92B38; /* = --brand, viết rời để đọc gradient dễ hơn */ --flash-3: #7A1018; --flash-chip: #2A0407; /* nền ô đồng hồ — --sun trên nó đạt 12.12 */ --sky: #1B5FD9; /* link, nhấn phụ — 5.34:1 · AA */ --green: #147D4E; /* còn hàng, đã kiểm — 4.83:1 · AA */ --ok-bg: #EAF6EF; /* nền chip "đã mua" và vòng tròn xác nhận đơn */ --ok-ink: #0F6B41; /* chữ/icon trên --ok-bg — 5.92:1 · AA cả cỡ nhỏ. Không dùng --green ở đây: nó chỉ được 4.65:1 trên nền này, sát mép 4.5 quá để đặt chữ 12px lên. */ --on-dark: #FFFFFF; /* 18.60:1 trên --ink */ --on-dark-soft: rgba(255,255,255,.74); --line-dark: rgba(255,255,255,.16); /* ── Chữ ────────────────────────────────────────────────────────────── Plus Jakarta Sans: grotesk hiện đại, chắc ở 800, có subset vietnamese. Be Vietnam Pro: dựng riêng cho tiếng Việt, dấu không phải ghép. Cặp này khác cả congviencavoi (Bricolage) lẫn lexus (Saira/IBM Plex). ⚠️ Đã kiểm subset `vietnamese` của cả hai bằng User-Agent desktop — Google trả sheet legacy không có unicode-range nếu UA lạ. */ --f-display: 'Plus Jakarta Sans', 'Be Vietnam Pro', system-ui, sans-serif; --f-body: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif; --f-num: 'Plus Jakarta Sans', system-ui, sans-serif; --t-hero: clamp(2rem, 1.2rem + 2.5vw, 3.3rem); --t-h2: clamp(1.5rem, 1.12rem + 1.3vw, 2.15rem); --t-h3: clamp(1.05rem, .95rem + .4vw, 1.3rem); --t-card: clamp(.94rem, .9rem + .18vw, 1.02rem); --t-body: clamp(.97rem, .94rem + .12vw, 1.05rem); --t-small: .875rem; --t-micro: .75rem; /* ── Leading: tiếng Việt cần nhiều hơn tiếng Anh, và ĐO được ───────── Đo bằng canvas trên chính hai font này (actualBoundingBox + fontBoundingBox), ở 200px, ngày 03.09.2026. "Sàn" = chiều cao mực trọn vẹn theo em; dưới sàn thì dấu của dòng dưới chạm đuôi chữ của dòng trên. Plus Jakarta Sans 800 · chữ thường có dấu chồng sàn 1.27 Plus Jakarta Sans 700 · chữ thường có dấu chồng sàn 1.245 Plus Jakarta Sans 700 · IN HOA có dấu chồng sàn 1.445 Be Vietnam Pro 400 · chữ thường có dấu chồng sàn 1.17 — cùng font, cùng chuỗi, chỉ chữ Latin không dấu: 0.955 – 0.975 Tức là tiếng Việt cần 1.25×–1.50× leading của tiếng Anh trong CÙNG một font. Hộp nội dung mà font tự khai chỉ 1.26em — NHỎ HƠN nhịp mực 1.27em của chính nó ở weight 800. Nên `line-height: normal` là sai ở đây. Hai giá trị đầu từng là 1.05 và 1.18. Đo ra: hero chồng dòng 0.04em và mực thò khỏi hộp 0.105em; h2 với copy xấu nhất chồng 0.09em. ⚠️ Đừng "thắt lại cho đẹp" mà không đo lại. Chuỗi thử: 'ếồữẫặệộợừểỹọụgjpqy' cho chữ thường, 'ĐƯỢC CHỌN NHIỀU' cho in hoa. */ --lh-tight: 1.28; /* h1 hero — trên sàn 1.27 của PJS 800 */ --lh-head: 1.30; /* h1–h4 — trên sàn 1.27, copy do biên tập viên nhập */ --lh-body: 1.62; /* trên sàn 1.17 của BVP 400, và 1.38 khi in hoa */ /* ── Khung ──────────────────────────────────────────────────────────── Khai bằng REM, không phải px. Đây là điều kiện để một cơ chế duy nhất — bậc `font-size` của ở base.css — kéo giãn được cả chữ lẫn khung trên màn lớn. Để px thì chữ giãn còn khung đứng yên, và trang càng rộng càng trông như một cột hẹp kẹt giữa hai mảng trống. */ --container: 80rem; /* 1280px ở 16px gốc */ --gutter: clamp(1rem, 4vw, 3rem); /* Nới từ clamp(3rem, 5.4vw, 5.5rem). Khoảng cách giữa hai dải là thứ quyết định trang đọc ra thong thả hay chật, và nó rẻ hơn mọi thủ pháp khác: không đổi màu, không đổi chữ, không đụng component nào. Trần 6.5rem ở 1440px cho mỗi dải một quãng nghỉ rõ ràng thay vì hai dải dính vào nhau. */ --band: clamp(3.25rem, 6vw, 6.5rem); /* padding dọc một dải */ --measure: 66ch; /* ── Bo và bóng ───────────────────────────────────────────────────────*/ --r-s: 8px; --r-m: 14px; --r-l: 22px; --r-full: 999px; /* Bóng sâu hơn để thẻ tách khỏi nền trắng. Lớp 1px giữ mép, lớp toả rộng tạo độ nổi; cả hai đều lấy màu --ink chứ không phải đen thuần, nếu không bóng ngả xám lạnh giữa một bảng màu ấm. */ --sh-card: 0 1px 2px rgba(23,18,14,.07), 0 10px 24px -12px rgba(23,18,14,.34); --sh-lift: 0 2px 6px rgba(23,18,14,.09), 0 26px 48px -18px rgba(23,18,14,.42); --sh-pop: 0 12px 26px -12px rgba(217,43,56,.50); /* ── Chuyển động ──────────────────────────────────────────────────────*/ --ease: cubic-bezier(.22, 1, .36, 1); --ease-2: cubic-bezier(.4, 0, .2, 1); --dur: .34s; /* Vùng chạm tối thiểu — coding-standards.md, sàn đo được, không phải gu */ --tap: 44px; }