/* ========================================================================= MMOLogin Solutions — DESIGN TOKENS (nguồn sự thật DUY NHẤT) ========================================================================= Nạp TRƯỚC mọi file CSS khác. Không file nào được khai `:root` nữa. Vì sao gộp: trước đây styles.css / home.css / pages.css mỗi file khai :root riêng, lệch cả TÊN lẫn GIÁ TRỊ. Cùng khái niệm "container" là 1200px ở 6 trang nhưng 1230px ở trang products — mắt người đọc không thấy, chỉ thấy giao diện lệch vài pixel giữa các trang. QUY TẮC: mỗi khái niệm chỉ MỘT tên. Tên cũ được giữ làm BÍ DANH (`--tên-mới: var(--gốc)`) khi vẫn còn chỗ dùng — bí danh KHÔNG được mang giá trị riêng. Giá trị dưới đây đã được chốt bằng tool/check_tokens.mjs: resolve token theo TỪNG TRANG, so với baseline ghi trước refactor. Đổi một giá trị ở file này là đổi giao diện toàn site — chạy lại guard sau khi sửa. ========================================================================= */ :root { /* ── Màu thương hiệu ──────────────────────────────────────────────────── Một bộ tên duy nhất (lấy theo home.css/pages.css — phủ 6/7 trang). */ --c-white: #ffffff; --c-ink: #0b1b2b; /* chữ chính */ --c-ink-soft: #5a6b7b; /* chữ phụ / mô tả */ --c-blue: #003970; /* xanh tiêu đề */ --c-purple: #9647db; /* tím nhấn */ --c-violet: #5e57ea; /* xanh tím */ --c-lime: #dce400; /* vàng chanh nhấn */ --c-line: #e7ecf3; /* viền */ --c-surface: #f6f8fc; /* nền section tint */ --c-black: #000000; /* pages.css gọi chữ phụ là --c-muted; home.css gọi --c-ink-soft. Cùng giá trị, cùng vai trò → --c-muted là BÍ DANH, không phải token thứ hai. */ --c-muted: var(--c-ink-soft); /* ── Gradient ─────────────────────────────────────────────────────────── Trang products dùng gradient hero/footer khác 6 trang còn lại: products --grad-footer (4a2aa0 → 6d3bd4 60% → 7e46d6) 6 trang --g-footer (3a1f8c → 5b34c4 55% → 7e46d6) Giữ CẢ HAI dưới hai tên khác nhau — đây là hai thiết kế khác nhau, không phải trùng lặp cần dọn. */ --g-hero: linear-gradient(135deg, #2a1668 0%, #4a2aa0 45%, #6d3bd4 100%); --g-purple: linear-gradient(135deg, #5e57ea 0%, #9647db 100%); --g-card: linear-gradient(180deg, #9647db 0%, #5e57ea 100%); --g-footer: linear-gradient(135deg, #3a1f8c 0%, #5b34c4 55%, #7e46d6 100%); --grad-footer: linear-gradient(135deg, #4a2aa0 0%, #6d3bd4 60%, #7e46d6 100%); --grad-project-card: var(--g-card); --grad-system-btn: linear-gradient(90deg, #5e57ea 0%, #9647db 100%); --grad-blog: linear-gradient(135deg, #5b34c4 0%, #7e46d6 100%); /* ── Chữ ─────────────────────────────────────────────────────────────── */ --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-primary: var(--font); --fw-l: 300; --fw-r: 400; --fw-m: 500; --fw-sb: 600; --fw-b: 700; /* Bí danh tên khác dùng trong styles.css */ --fw-light: var(--fw-l); --fw-regular: var(--fw-r); --fw-medium: var(--fw-m); --fw-semibold: var(--fw-sb); --fw-bold: var(--fw-b); /* Thang chữ fluid (home.css/pages.css) */ --fs-display: clamp(32px, 4.2vw, 54px); --fs-h2: clamp(28px, 3.4vw, 44px); --fs-h3: clamp(19px, 1.5vw, 22px); --fs-lead: clamp(16px, 1.35vw, 19px); --fs-body: clamp(14px, 1.05vw, 16px); --fs-sm: 14px; --fs-xs: 13px; /* Thang chữ cố định (styles.css, sinh từ Figma). GIỮ NGUYÊN các mốc: styles.css có override riêng trong @media, nên gộp mốc sẽ đổi giao diện. */ --fs-14: 14px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-28: 28px; --fs-33: 33px; --fs-45: 45px; --fs-50: 50px; /* ── Bố cục ──────────────────────────────────────────────────────────── 1200px cho 6 trang, 1230px cho products. Giữ cả hai: --container là bản 6 trang dùng; products khai đè cục bộ trong styles.css bằng --container-w. */ --container: 1200px; --container-w: 1230px; --container-wide: 1320px; /* products dùng gutter cố định 24px (16px mobile) — khai riêng trong styles.css */ --gutter: clamp(18px, 4vw, 32px); /* pages.css gọi là --section (104px), home.css gọi là --section-pad (110px). Hai giá trị KHÁC NHAU và đã chốt với thiết kế — giữ đúng từng trang, không gộp về một mốc. Đây là lý do tồn tại hai tên. */ --section-pad: clamp(64px, 8vw, 110px); --section: clamp(64px, 8vw, 104px); /* ── Bo góc ──────────────────────────────────────────────────────────── Hai thang cùng tồn tại: 18/24/999 cho 6 trang, 4/6/8/16/25/50 cho products. */ --radius: 18px; --radius-lg: 24px; --radius-pill: 999px; --r-sm: 4px; --r: 6px; --r-lg: 8px; --r-xl: 16px; --r-25: 25px; --r-50: 50px; --pill: var(--radius-pill); /* ── Đổ bóng ─────────────────────────────────────────────────────────── products dùng thang riêng (shadow-card/-hover/-nav), 6 trang dùng thang shadow-sm/-lg/-purple. Giữ cả hai — khác trang thì khác thiết kế. */ --shadow-sm: 0 6px 20px rgba(11, 27, 43, .06); --shadow: 0 18px 46px rgba(11, 27, 43, .10); --shadow-lg: 0 30px 80px rgba(11, 27, 43, .16); --shadow-purple: 0 22px 52px rgba(109, 59, 212, .30); --shadow-card: 0 10px 40px rgba(3, 24, 40, 0.08); --shadow-card-hover: 0 18px 50px rgba(3, 24, 40, 0.15); --shadow-nav: 0 2px 20px rgba(3, 24, 40, 0.06); /* ── Chuyển động ─────────────────────────────────────────────────────── */ --t: .28s cubic-bezier(.4, 0, .2, 1); /* ── Bí danh tên Figma (styles.css) ──────────────────────────────────── Chỉ ở đây được phép mapping tên cũ → tên canonical. */ /* LƯU Ý: --c-black-pearl KHÔNG phải bí danh của --c-ink. styles.css dùng #071828 (đậm hơn #0b1b2b của 6 trang còn lại) cho nền tối và gạch chân tiêu đề — đổi sang #0b1b2b làm lệch màu thật. Giữ giá trị riêng. */ --c-black-pearl: #071828; --c-regal-blue: var(--c-blue); --c-regal-blue-15: rgba(0, 57, 112, 0.15); --c-chartreuse: var(--c-lime); --c-medium-purple: var(--c-purple); --c-blue-63: var(--c-violet); --c-body-bg: #ffffff; } /* ========================================================================= Ghi chú cho người sửa sau 1. KHÔNG khai `:root` trong styles.css / home.css / pages.css / chrome.css. Guard tool/check_tokens.mjs sẽ không bắt được token khai trùng nếu chúng trùng cả giá trị — nhưng lần sau ai đổi một chỗ sẽ tưởng là đổi toàn site. 2. Nếu cần một giá trị CHỈ cho một trang, khai ngay trong file CSS của trang đó với tên RIÊNG (ví dụ --w-card-pad), không dùng lại tên canonical. 3. chrome.css (header/footer) hiện không dùng var() — toàn giá trị cứng. Khi refactor chrome, dùng token ở đây thay vì gõ lại hex. ========================================================================= */