/* ============================================================ tokens.css — NGUỒN DUY NHẤT cho màu, cỡ chữ, khoảng cách. Sửa ở đây là sửa cả trang chủ lẫn mọi bài học. LUẬT: không hardcode màu (#hex, rgb) hay cỡ chữ (px, rem) ở bất kỳ file nào khác. Cần giá trị mới → thêm token vào đây. ============================================================ */ :root { /* ---- Cỡ chữ ------------------------------------------------ Chỉ 2 cỡ cho nội dung: --fs-sm (phụ) và --fs-base (chính). --fs-base = 16px. Tiêu đề dùng thang riêng ở dưới. */ --fs-sm: 0.875rem; /* 14px — chú thích, meta, nhãn */ --fs-base: 1rem; /* 16px — MỌI nội dung đọc */ /* Tiêu đề — thang riêng, không dùng cho nội dung đọc */ --fs-h1: 1.75rem; --fs-h2: 1.3rem; --fs-h3: 1.0625rem; --fs-display: 2.25rem; /* số to, tiêu đề hero */ /* Chữ trong sơ đồ SVG — đơn vị của viewBox, KHÔNG phải cỡ chữ trang. Chúng co giãn theo bề rộng sơ đồ nên không đổi theo màn hình. */ --fs-dg: 13px; --fs-dg-sm: 12px; --lh-tight: 1.25; --lh-base: 1.65; --fw-normal: 400; --fw-medium: 500; --fw-bold: 650; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* ---- Khoảng cách (thang 4px) ---- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-full: 999px; --w-content: 780px; /* bề rộng cột đọc */ --w-wide: 1040px; /* bề rộng khung ngoài */ --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05); --shadow: 0 4px 16px -4px rgb(0 0 0 / 0.10); --shadow-lg: 0 12px 32px -8px rgb(0 0 0 / 0.16); --dur-fast: 120ms; --dur: 220ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); /* ---- MÀU — chế độ SÁNG (mặc định) ---- Đặt tên theo VAI TRÒ, không theo màu, để đổi tông một chỗ. */ --c-bg: #f7f8fa; /* nền trang */ --c-surface: #ffffff; /* thẻ, panel */ --c-surface-2: #f0f2f5; /* nền chìm: code, th, hover */ --c-line: #e0e4ea; /* viền */ --c-line-strong: #c7ced8; --c-text: #16191f; /* chữ chính */ --c-text-2: #5b6472; /* chữ phụ */ --c-text-3: #8b95a3; /* chữ mờ */ --c-accent: #0d7d8c; /* nhấn — teal */ --c-accent-hover: #0a6672; --c-accent-soft: #e2f4f6; /* nền nhạt của nhấn */ --c-on-accent: #ffffff; /* chữ trên nền nhấn */ --c-ok: #157f3d; --c-ok-soft: #e3f5e9; --c-warn: #9a6100; --c-warn-soft: #fdf2dc; --c-danger: #b32424; --c-danger-soft: #fdeaea; --c-focus: #0d7d8c; --c-overlay: rgb(0 0 0 / 0.45); color-scheme: light; } /* ---- MÀU — chế độ TỐI ---- Áp dụng khi người dùng chọn "tối", hoặc khi để "tự động" mà hệ điều hành đang tối (theme.js gắn data-theme lên ). */ :root[data-theme="dark"] { --c-bg: #101318; --c-surface: #171b22; --c-surface-2: #1f242d; --c-line: #2a303b; --c-line-strong: #3b4351; --c-text: #e7ebf2; --c-text-2: #a3adbb; --c-text-3: #78828f; --c-accent: #46b6c4; --c-accent-hover: #63c8d4; --c-accent-soft: #14313a; --c-on-accent: #08141a; --c-ok: #4cc776; --c-ok-soft: #122c1c; --c-warn: #e0a63c; --c-warn-soft: #2e2312; --c-danger: #f07171; --c-danger-soft: #331819; --c-focus: #46b6c4; --c-overlay: rgb(0 0 0 / 0.6); --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4); --shadow: 0 4px 16px -4px rgb(0 0 0 / 0.5); --shadow-lg: 0 12px 32px -8px rgb(0 0 0 / 0.6); color-scheme: dark; } /* Trên màn hẹp: mọi cỡ chữ tối thiểu 16px để Safari/iOS không tự phóng to khi chạm vào ô nhập. --fs-sm hoà vào --fs-base. */ @media (max-width: 640px) { :root { --fs-sm: 1rem; --fs-h1: 1.5rem; --fs-display: 1.75rem; } } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur: 0ms; } }