/* ════════════════════════════════════════════════════════════════════════ stage-themes.css — bảng màu theo GIAI ĐOẠN cho các khoá dùng tierb-core ───────────────────────────────────────────────────────────────────── Chị Phi chốt 2026-08-25: "course của cat nào thì mang bảng màu của cat đó". Màu nhấn lấy đúng từ stages.js (nguồn chuẩn của 4 giai đoạn): Khám phá #38BDF8 · Quyết định #F59E0B · Vận hành #10B981 · Mở rộng #8B5CF6 Cách dùng: và nạp file này SAU /tierb.css. Không nạp → khoá giữ nguyên palette "Ngân Xanh" mặc định của Tier B (Khoá 26–32 không bị ảnh hưởng). Biến giữ nguyên tên ngữ nghĩa của tierb.css (--green = màu chính, --copper = màu phụ) để không phải sửa engine; chỉ đổi GIÁ TRỊ. Mọi cặp chữ-trắng-trên-nền-chính đều đạt WCAG AA (≥4.5:1). ════════════════════════════════════════════════════════════════════════ */ /* ── Giai đoạn 0 · KHÁM PHÁ — Trời & Hổ phách ── */ :root[data-stage="discover"]{ --bg:#F5FAFE; --green:#0369A1; --green-d:#075985; --green-l:#E0F2FE; --copper:#B45309; --copper-d:#92400E; --copper-l:#FEF3C7; --teal:#0E7490; --teal-l:#CFFAFE; --accent-bright:#38BDF8; } :root[data-stage="discover"] #gate{background:linear-gradient(160deg,#F5FAFE 0%,#E0F2FE 55%,#FEF9EE 100%)} /* ── Giai đoạn 1 · QUYẾT ĐỊNH — Hổ phách & Chàm ── */ :root[data-stage="decide"]{ --bg:#FEFBF5; --green:#B45309; --green-d:#92400E; --green-l:#FEF3C7; --copper:#1E40AF; --copper-d:#1E3A8A; --copper-l:#DBEAFE; --teal:#0F766E; --teal-l:#CCFBF1; --accent-bright:#F59E0B; } :root[data-stage="decide"] #gate{background:linear-gradient(160deg,#FEFBF5 0%,#FEF3C7 55%,#EEF2FF 100%)} /* ── Giai đoạn 2 · VẬN HÀNH — Lục ngọc & Đồng ── */ :root[data-stage="operate"]{ --bg:#F5FBF8; --green:#047857; --green-d:#065F46; --green-l:#D1FAE5; --copper:#B45309; --copper-d:#92400E; --copper-l:#FEF3C7; --teal:#0F766E; --teal-l:#CCFBF1; --accent-bright:#10B981; } :root[data-stage="operate"] #gate{background:linear-gradient(160deg,#F5FBF8 0%,#D1FAE5 55%,#FEF9EE 100%)} /* ── Giai đoạn 3 · MỞ RỘNG — Tím & Đất nung ── */ :root[data-stage="scale"]{ --bg:#FAF8FE; --green:#6D28D9; --green-d:#5B21B6; --green-l:#EDE9FE; --copper:#C2410C; --copper-d:#9A3412; --copper-l:#FFEDD5; --teal:#7C3AED; --teal-l:#F3E8FF; --accent-bright:#8B5CF6; } :root[data-stage="scale"] #gate{background:linear-gradient(160deg,#FAF8FE 0%,#EDE9FE 55%,#FFF7ED 100%)} /* Bóng nút chính đổi theo màu giai đoạn (mặc định tierb.css là xanh ngân) */ :root[data-stage] .btn-primary:hover{box-shadow:0 8px 22px color-mix(in srgb,var(--green) 34%,transparent)} /* ── Chứng nhận đổi màu theo giai đoạn ────────────────────────────────── tierb.css vẽ chứng nhận bằng mã màu cứng (xanh ngân + đồng). Khối dưới chỉ áp dụng khi trang khai data-stage, nên chứng nhận Khoá 26–32 giữ nguyên như cũ. Dùng var(--green-d) / var(--copper) để tự khớp giai đoạn. */ :root[data-stage] .cert{border-color:var(--green-d)} :root[data-stage] .cert-corner{border-color:var(--copper)} :root[data-stage] .cert-academy{color:var(--copper)} :root[data-stage] .cert-course{color:var(--green-d)} :root[data-stage] .cert-seal{ background:radial-gradient(circle at 35% 30%,var(--green),var(--green-d)); box-shadow:0 4px 14px color-mix(in srgb,var(--green-d) 45%,transparent); } /* ── MÀU NGỮ NGHĨA — KHÔNG đổi theo giai đoạn ────────────────────────── Vì sao cần: các biến --green/--copper mang tên ngữ nghĩa nhưng GIÁ TRỊ đổi theo giai đoạn (ở giai đoạn Quyết định, --green thật ra là hổ phách và --copper là chàm). Dùng chúng cho các khối "đạt / chưa đạt" sẽ khiến ô đạt hiện màu vàng và ô cảnh báo hiện màu xanh — đọc ngược ý. Ba cặp dưới đây luôn giữ nguyên giá trị ở mọi giai đoạn, chỉ dùng cho những chỗ MÀU MANG NGHĨA (đạt / cần lưu ý / không đạt). Kèm nhãn chữ ở giao diện để không phụ thuộc riêng vào màu. */ :root{ --sem-ok:#15803D; --sem-ok-l:#DCFCE7; --sem-ok-d:#14532D; --sem-warn:#B45309; --sem-warn-l:#FEF3C7;--sem-warn-d:#92400E; --sem-bad:#B91C1C; --sem-bad-l:#FEE2E2; --sem-bad-d:#991B1B; }