/* ============================================================================ MosVPN - Design tokens ---------------------------------------------------------------------------- Nạp TRƯỚC mọi stylesheet khác. File này chỉ khai báo custom property, không có selector nào tạo ra hình hài, nên không bao giờ tranh chấp specificity với CSS cũ. Mọi component mới phải lấy giá trị từ đây thay vì gõ số trực tiếp. Quy ước: thang cỡ chữ và khoảng cách đều mobile-first. Giá trị mặc định là giá trị dùng cho điện thoại 320-430px; desktop mở rộng bằng clamp() hoặc bằng khối @media (min-width: ...) ở cuối file. ============================================================================ */ :root { /* ---- Màu thương hiệu ---- Đỏ chỉ dùng cho hành động và điểm nhấn, chiếm khoảng 10-15% diện tích. Không dùng đỏ làm nền cho vùng lớn. */ --mos-primary: #d41835; --mos-primary-dark: #a90e2b; --mos-primary-soft: #fff7f8; /* blush, nền nhạt */ --mos-primary-tint: #ffe9ec; /* nền badge */ /* ---- Màu NHÃN PHỤ (eyebrow, kicker, số mục lục, dòng ngày/thời gian đọc) ---- Ba nhóm này từng trượt WCAG AA: đo trên nền thật, .seo-eyebrow đạt 3.61 và .seo-section-kicker 3.27 ở chế độ tối, còn dòng ngày đạt 3.50 trên nền trắng. Nguyên nhân là mỗi nhóm gán màu cứng cho MỘT chế độ rồi để chế độ kia dùng lại. Hai token dưới đây đổi theo theme (bản tối ở css/site-shell.css). Giá trị đã đo bằng phép trộn alpha đúng với nền cuối cùng, không đọc rgba() như màu đặc. Đây là màu, không phải cỡ chữ: phân cấp thị giác giữ nguyên. */ --label-accent: #c51632; /* 5.94:1 trên trắng, 5.38:1 trên nền badge #fcf1f3 */ --label-muted: #5f6b7b; /* 5.42:1 trên trắng */ /* ---- Checklist ---- Nền phải đổi theo theme. Bản cũ khoá cứng #f8fafc nên ở chế độ tối, chữ --shell-muted nằm trên nền gần trắng: 2.07:1, không đọc nổi. */ --checklist-bg: #f8fafc; --checklist-border: #e3e7ed; /* ---- Màu chữ và đường viền ---- */ --mos-ink: #111827; /* chữ chính, 16.8:1 trên nền trắng */ --mos-ink-muted: #667085; /* chữ phụ, 4.97:1 trên nền trắng */ --mos-border: #e7e9ee; --mos-surface: #ffffff; --mos-surface-alt: #f7f8fa; /* ---- Màu trạng thái ---- Ba màu dưới đây đã kiểm tương phản trên nền trắng: đều vượt 4.5:1 nên dùng làm màu chữ được, không chỉ làm màu viền. */ --mos-success: #0f7a4d; /* 4.85:1 */ --mos-success-soft: #e8f6ef; --mos-warning: #8a5a00; /* 5.32:1 */ --mos-warning-soft: #fff5e0; --mos-error: #b3261e; /* 6.24:1 */ --mos-error-soft: #fdeceb; /* ---- Thang khoảng cách ---- Một thang duy nhất cho toàn site. Không tự chế giá trị ngoài thang này. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* ---- Container ---- Điện thoại rất nhỏ dùng 14px để chữ không dính mép; từ 360px trở lên là 16px. Giá trị nới rộng ở khối min-width bên dưới. */ --mos-gutter: 16px; --mos-container: 100%; /* ---- Cỡ chữ ---- Base 16px trên mobile. H1/H2 dùng clamp để lớn dần lên desktop mà không cần thêm breakpoint. SÀN CHỮ NHỎ, hai tầng. Đây là nguồn duy nhất; component không được tự đặt giá trị nhỏ hơn --text-micro. --text-micro 13px CHỈ cho chữ thuần phân cấp hoặc trang trí: eyebrow, kicker, nhãn section viết hoa, chỉ số trang trí đã có nội dung tương đương ngay bên cạnh. --text-small 14px Chữ MANG THÔNG TIN hoặc phục vụ thao tác: metadata trong thẻ, trạng thái, badge, số bước, đầu bảng, mục lục, helper và lỗi của form, chú thích giá, phiên bản, thời gian, điều hướng, nút, liên kết hành động, và mọi nội dung nằm trong thẻ . --text-body 16px Thân bài. Trên điện thoại, mọi chữ mang thông tin hoặc tương tác đều phải từ --text-small trở lên; --text-micro chỉ được dùng cho nhóm trang trí ở trên. */ --text-micro: 0.8125rem; /* 13px */ --text-small: 0.875rem; /* 14px */ --text-body: 1rem; /* 16px */ /* Ba bậc cũ giữ lại vì còn nơi tham chiếu; --fs-3xs nay trỏ vào sàn 13px chứ không còn là 12px. Xoá dần khi mọi component đã dùng token mới. */ --fs-3xs: var(--text-micro); --fs-2xs: var(--text-micro); --fs-xs: var(--text-small); --fs-sm: 0.9375rem; /* 15px */ --fs-base: 1rem; /* 16px - body mobile */ --fs-lg: 1.0625rem; /* 17px - body bài viết */ --fs-xl: 1.25rem; --fs-h3: clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem); --fs-h2: clamp(1.625rem, 1.3rem + 1.6vw, 2.25rem); /* 26px -> 36px */ --fs-h1: clamp(2.125rem, 1.6rem + 2.6vw, 3.25rem); /* 34px -> 52px */ /* Tiếng Nga trung bình dài hơn tiếng Việt khoảng 15%, nên H1 bắt đầu nhỏ hơn một bậc để không tràn ba dòng trên máy 320px. */ --fs-h1-ru: clamp(1.875rem, 1.45rem + 2.2vw, 3rem); /* 30px -> 48px */ /* ---- Chiều cao dòng ---- */ --lh-tight: 1.15; --lh-heading: 1.22; --lh-body: 1.65; --lh-article: 1.72; /* ---- Bo góc ---- */ --r-btn: 12px; --r-card: 16px; --r-card-lg: 20px; --r-sheet: 20px; --r-pill: 999px; /* ---- Đổ bóng ---- Rất nhẹ, màu trung tính. Không dùng bóng đỏ phát sáng. */ --sh-1: 0 1px 2px rgba(17, 24, 39, 0.05); --sh-2: 0 4px 12px rgba(17, 24, 39, 0.06); --sh-3: 0 10px 28px rgba(17, 24, 39, 0.09); --sh-sheet: 0 -8px 32px rgba(17, 24, 39, 0.14); /* ---- Vùng bấm ---- 44px là mức tối thiểu cho mọi điều khiển đứng riêng (WCAG 2.1 AA 2.5.5). */ --tap: 44px; --tap-lg: 48px; /* ---- Lớp xếp chồng ---- Khai báo tập trung để không còn z-index tùy hứng rải rác. */ --z-header: 100; --z-sticky-cta: 90; --z-float: 95; --z-overlay: 200; --z-drawer: 210; /* ---- Chiều cao thanh cố định ---- */ --header-h: 60px; /* ---- Chuyển động ---- */ --ease: cubic-bezier(0.32, 0.72, 0, 1); --dur-fast: 140ms; --dur: 220ms; } /* Máy rất nhỏ: giảm lề ngang để nội dung không bị bóp. */ @media (max-width: 359px) { :root { --mos-gutter: 14px; } } @media (min-width: 640px) { :root { --mos-gutter: 24px; --mos-container: 600px; } } @media (min-width: 768px) { :root { --mos-container: 720px; --header-h: 68px; } } @media (min-width: 1024px) { :root { --mos-gutter: 32px; --mos-container: 960px; --header-h: 74px; } } @media (min-width: 1280px) { :root { --mos-container: 1200px; } } /* Giao diện tối: chỉ đổi giá trị token, mọi component tự đi theo. */ html[data-theme="dark"] { --mos-ink: #e8ecf3; --mos-ink-muted: #9aa4b6; /* Đỏ thương hiệu là màu CHỮ ở nhiều nơi (liên kết "Đọc tiếp", nhãn nhóm). Trên nền tối #101722 thì #c51632 chỉ đạt 3.03:1 và #d41835 đạt 3.41:1, đều dưới 4.5:1 cho chữ nhỏ. Hai sắc sáng hơn dưới đây giữ đúng họ màu và cho khoảng 7:1. Nền nút vẫn dùng --mos-primary, không đổi. */ /* CHỈ đổi token dùng cho CHỮ. --accent còn là NỀN của nút chính, nâng sáng nó làm nút primary thành hồng nhạt và chữ trắng trên đó chỉ còn 2.17:1. */ --label-accent: #ff8fa1; --mos-border: #263042; --mos-surface: #131a26; --mos-surface-alt: #0d131d; --mos-primary-soft: rgba(212, 24, 53, 0.12); --mos-primary-tint: rgba(212, 24, 53, 0.18); --mos-success-soft: rgba(15, 122, 77, 0.16); --mos-warning-soft: rgba(138, 90, 0, 0.18); --mos-error-soft: rgba(179, 38, 30, 0.16); --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4); --sh-2: 0 4px 12px rgba(0, 0, 0, 0.45); --sh-3: 0 10px 28px rgba(0, 0, 0, 0.5); }