/* ============================================================ TOKENS — hệ thiết kế HuongUp Nhận diện: XANH LIME trên nền trắng, chữ đen/tím than. Đây là bảng màu ĐO TRỰC TIẾP từ app benchmark DanceFitme (getComputedStyle, 2026-09-08) — khung xương HuongUp sao lại cho giống bản gốc, không tự chế màu khác. Đổi giá trị ở ĐÂY là đổi toàn bộ giao diện. Không hardcode màu/khoảng cách ở file khác. LUẬT VÀNG: lime là màu RẤT SÁNG (độ chói .85). Nó chỉ làm NỀN, chữ đè lên phải là --ink. Lime KHÔNG BAO GIỜ làm màu chữ trên nền trắng (1.17:1 — tàng hình) và KHÔNG BAO GIỜ đi với chữ trắng. Bảng đối chiếu tương phản ở cuối file. ============================================================ */ :root { /* --- Màu thương hiệu (trục lime — đo từ DanceFitme) --- */ --lime: #D8FC3E; /* LIME CHÍNH — nút TIẾP TỤC, nền nhãn/chip. Chữ trên nó = --ink */ --lime-deep: #C2E724; /* lime đậm — VIỀN và nét nhấn. KHÔNG dùng làm màu chữ */ --lime-soft: #EFFFAC; /* lime nhạt — nền khối nhấn */ --lime-wash: #F1FFB6; /* lime nhạt hơn — badge, khối highlight */ /* --- Trung tính (chữ đậm trên nền sáng) --- */ --ink: #1C1835; /* tiêu đề — tím than; cũng dùng làm nền tối */ --ink-2: #333333; /* chữ thân bài */ --ink-3: #727883; /* chữ phụ — xám bản gốc */ --ink-4: #7E7E94; /* nhãn nhỏ, placeholder — xám bản gốc */ --navy: #222222; /* nền tối — thẻ tối, dải tải app */ --white: #FFFFFF; --cream: #F6F6F6; /* nền section chẵn / khối phụ */ --cream-2: #F4F6F7; /* nền section lẻ */ --line: #E5E7EB; /* viền, gạch ngăn — màu dùng nhiều nhất ở bản gốc */ --line-2: #E7E7F5; /* gạch ngăn nhạt, nền lam rất nhạt */ --gray-block: #D8D8D8; /* xám khối — nút vô hiệu */ /* --- Ngữ nghĩa --- */ --ok: #1B7F4E; --warn: #B4530A; --danger: #C62139; --streak: #C23A28; /* lửa streak */ /* --- Chữ --- */ --font: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fs-hero: clamp(32px, 5.2vw, 56px); --fs-h1: clamp(28px, 4vw, 44px); --fs-h2: clamp(22px, 2.6vw, 32px); --fs-h3: 20px; --fs-body: 16px; --fs-sm: 14px; --fs-xs: 12px; --lh-tight: 1.15; --lh-body: 1.6; /* --- Bo góc --- */ --r-sm: 8px; --r-md: 12px; --r-lg: 24px; /* thẻ — đúng bo góc của benchmark */ --r-xl: 32px; --r-pill: 999px; /* --- Khoảng cách (thang 4px) --- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-30: 120px; /* --- Chiều cao điều khiển --- */ --h-btn: 54px; /* nút chính — đúng chiều cao benchmark */ --h-btn-sm: 42px; --h-input: 54px; --h-nav: 72px; /* header landing */ --h-tabbar: 64px; /* thanh tab dưới của app */ /* --- Đổ bóng --- */ --sh-sm: 0 1px 3px rgba(28,24,53,.06); --sh-md: 0 4px 16px rgba(28,24,53,.09); --sh-lg: 0 12px 40px rgba(28,24,53,.12); --sh-lime: 0 8px 24px rgba(194,231,36,.45); /* quầng lime dưới nút chính */ /* --- Bố cục --- */ --wrap: 1200px; /* bề rộng nội dung landing */ --wrap-app: 480px; /* app mobile-first: khung điện thoại */ --sec-pad: var(--s-30); /* đệm dọc mỗi section = 120px */ /* --- Chuyển động --- */ --ease: cubic-bezier(.22,.61,.36,1); --t-fast: .15s; --t: .25s; } @media (max-width: 720px) { :root { --sec-pad: var(--s-16); --h-nav: 60px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ============================================================ BẢNG TƯƠNG PHẢN (WCAG AA cần >= 4.5:1 cho chữ thường, >= 3:1 cho chữ lớn >=18.66px đậm / >=24px, và cho viền-biểu tượng) Tính bằng công thức độ chói tương đối WCAG, không ước lượng bằng mắt. ĐẠT — mọi cặp chữ/nền chính: chữ nền tỷ lệ ----------------- --------------------- ----- ink #1C1835 white 17.05 ink #1C1835 lime #D8FC3E 14.55 ink #1C1835 lime-deep #C2E724 11.98 ink #1C1835 lime-soft #EFFFAC 15.89 ink #1C1835 lime-wash #F1FFB6 16.01 ink #1C1835 cream #F6F6F6 15.78 ink #1C1835 cream-2 #F4F6F7 15.73 ink #1C1835 line #E5E7EB 13.77 ink-2 #333333 white 12.63 ink-2 #333333 cream 11.69 ink-2 #333333 lime-wash 11.86 white navy #222222 15.91 white ink #1C1835 17.05 lime #D8FC3E ink #1C1835 14.55 lime #D8FC3E navy #222222 13.57 streak #C23A28 lime-wash 5.02 danger #C62139 white 5.71 warn #B4530A white 5.02 ok #1B7F4E white 5.01 ink #1C1835 huy chương lime tối nhất (#7E9617) 5.09 #B0B0BC nền player #1E1E24 7.72 CHƯA ĐẠT 4.5:1 — GIỮ NGUYÊN VÌ LÀ MÀU CỦA BẢN GỐC: ink-3 #727883 white 4.44 (thiếu 0.06) ink-3 #727883 cream #F6F6F6 4.11 ink-3 #727883 cream-2 #F4F6F7 4.10 ink-4 #7E7E94 white 3.96 ink-4 #7E7E94 cream 3.67 ink-4 #7E7E94 cream-2 3.66 ink-3 #727883 gray-block #D8D8D8 3.12 (nút vô hiệu — WCAG 1.4.3 miễn trừ điều khiển không hoạt động) Hai màu xám #727883 và #7E7E94 là màu chữ xám đo được từ DanceFitme. Chúng đạt 3:1 (AA cho chữ lớn / viền) nhưng KHÔNG đạt 4.5:1 cho chữ thường. Sếp yêu cầu bám bản gốc nên giữ nguyên. Nếu sau này ưu tiên khả năng đọc hơn độ giống, đổi --ink-3 -> #5F6570 (4.5:1 trên trắng) và --ink-4 -> #6B6B80 (4.5:1 trên trắng) là đủ, không cần sửa file nào khác. PHI-VĂN-BẢN dưới 3:1 — chấp nhận vì đúng bản gốc và trạng thái luôn được báo song song bằng thứ khác (chữ, biểu tượng, viền): lime #D8FC3E trên line #E5E7EB 1.06 (thanh tiến độ quiz, vòng %) lime-deep #C2E724 trên white 1.42 (viền nút ghost, gạch chân tab) LUẬT MÀU (đảo ngược hoàn toàn so với bản hồng trước đó): --lime / --lime-soft / --lime-wash / --lime-deep đều là nền SÁNG -> chữ trên chúng LUÔN là --ink. TUYỆT ĐỐI KHÔNG chữ trắng. --ink và --navy là nền TỐI -> chữ trên chúng là --white hoặc --lime. Không dùng lime làm màu CHỮ trên nền sáng — dùng --ink. Đổi bất kỳ màu nào ở trên thì phải chạy lại phép tính này. Chế độ tối: bản này chưa có (không file CSS nào khai báo prefers-color-scheme). Khi làm chế độ tối thì định nghĩa lại ĐÚNG các biến ở trên trong một khối @media, giữ nguyên tên. ============================================================ */