/* ========================================================================= MASTERI CAO XÀ LÁ — BRAND TOKENS ------------------------------------------------------------------------- Đây là "nguồn chân lý" (single source of truth) cho toàn bộ thương hiệu. Muốn đổi màu, font, khoảng cách của CẢ TRANG → chỉ sửa file này. styles.css chỉ tiêu thụ các biến (var()) định nghĩa ở đây. Thứ tự nạp trong index.html: 1) brand.css (file này — định nghĩa token) 2) styles.css (layout + component, dùng token) Quy ước đặt tên: --paper* : nền sáng (kem/ngà) --ink* : chữ trên nền sáng --on-dark* : chữ trên nền tối --gold* : màu nhấn thương hiệu (vàng đồng) ========================================================================= */ :root { /* --------------------------------------------------------------------- 1. MÀU SẮC — BẢNG MÀU THƯƠNG HIỆU --------------------------------------------------------------------- */ /* Nền sáng — họ kem/ngà ấm */ --paper: #f6f1e7; /* nền nền chính của trang */ --paper-2: #efe8d9; /* section xen kẽ (đậm hơn 1 nấc) */ --paper-3: #ece3d1; /* panel/khung kem đậm nhất */ /* Nền tối — đen ấm (section nhấn, footer, form) */ --ink-bg: #1b1815; --ink-bg-2: #211d19; /* Chữ trên nền sáng */ --ink: #211c16; /* chữ chính */ --ink-soft: #5d564b; /* chữ phụ / mô tả */ --ink-faint: #8a8174; /* chú thích / caption */ /* Chữ trên nền tối */ --on-dark: #f1ead9; --on-dark-soft: #b3a892; /* Màu nhấn thương hiệu — vàng đồng (bronze/gold) */ --gold: #a9824a; /* nhấn chính */ --gold-deep: #8a682f; /* hover / chữ nhấn đậm */ --gold-tint: rgba(169,130,74,0.10); /* nền nhấn rất nhạt */ --gold-rgb: 169,130,74; /* để tự pha alpha: rgba(var(--gold-rgb), .x) */ /* Đường kẻ / viền */ --rule: rgba(33,28,22,0.14); /* viền trên nền sáng */ --rule-soft: rgba(33,28,22,0.08); /* viền nhạt */ --rule-dark: rgba(241,234,217,0.16); /* viền trên nền tối */ /* --------------------------------------------------------------------- 2. KIỂU CHỮ (TYPOGRAPHY) Font nạp qua Google Fonts trong của index.html. --------------------------------------------------------------------- */ --serif: "Cormorant Garamond", "Cormorant", Georgia, serif; /* tiêu đề */ --sans: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif; /* nội dung */ /* Trọng lượng chữ dùng nhất quán */ --w-regular: 400; --w-medium: 500; --w-semibold:600; --w-bold: 700; /* --------------------------------------------------------------------- 3. BỐ CỤC & KHÔNG GIAN (LAYOUT) --------------------------------------------------------------------- */ --maxw: 1240px; /* bề rộng tối đa khối nội dung */ --gutter: clamp(20px, 5vw, 72px); /* lề trái/phải responsive */ --section-y: clamp(72px, 11vh, 150px); /* padding dọc mỗi section */ /* Thang khoảng cách (spacing scale) — dùng cho phát triển sau */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 40px; --space-5: 64px; /* Bo góc — thương hiệu thiên tối giản, gần như vuông */ --radius-sm: 0px; --radius: 0px; /* Đổ bóng (khi cần nâng khối) */ --shadow-soft: 0 8px 24px rgba(0,0,0,0.10); --shadow-card: 0 18px 50px rgba(33,28,22,0.14); /* --------------------------------------------------------------------- 4. CHUYỂN ĐỘNG (MOTION) --------------------------------------------------------------------- */ --ease-out: cubic-bezier(.16, 1, .3, 1); /* easing chủ đạo (reveal) */ --dur-reveal: 0.9s; /* thời lượng hiệu ứng cuộn */ --dur-hero-zoom: 22s; /* tốc độ zoom ảnh hero */ }