/* ═══════════════════════════════════════════════════════════════════════════ Thuần Nhiên — Design Tokens (single source of truth) ═══════════════════════════════════════════════════════════════════════════ MỤC ĐÍCH Đây là file DUY NHẤT định nghĩa giá trị thiết kế (màu, spacing, font, shadow, motion). Mọi file CSS khác PHẢI dùng var(--*) thay vì hardcode. File này được load ĐẦU TIÊN trong , trước main.css / lucky.css / blog.css, nên mọi rule khác có thể dùng token. CÁCH DÙNG - Đổi màu brand? Sửa 1 dòng ở đây, toàn site tự update. - Thêm component? Dùng var(--sp-4), var(--fs-base), var(--ease-brand)... Không bao giờ hardcode #c49a3c hoặc 16px. QUY ƯỚC ĐẶT TÊN - Màu: --brand-role (--ivory, --brown, --gold, --green) - Alpha: --tên-aNN (--gold-a12 = alpha 0.12) - Spacing: --sp-N (1 → 8, scale 4/8/12/16/24/32/48/64) - Font size: --fs-role (xs/sm/base/md/lg/xl/2xl/3xl) - Shadow: --shadow-size (sm/md/lg) - Motion: --ease-*, --dur-* (fast/base/slow) - Breakpoint: chỉ dùng 3 tier trong media query — 480 / 680 / 900 ═══════════════════════════════════════════════════════════════════════════ */ /* ─── Fallback fonts (match metric của Cormorant + DM Sans để FOIT mượt) ─── */ @font-face { font-family: 'Cormorant Fallback'; src: local('Georgia'), local('Times New Roman'); size-adjust: 112%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'DM Sans Fallback'; src: local('system-ui'), local('-apple-system'), local('Segoe UI'); size-adjust: 105%; ascent-override: 92%; descent-override: 22%; line-gap-override: 0%; } :root { /* ─── Màu sắc: earthy palette, không đỏ crimson ─── */ --ivory: #faf6ef; /* bg chính */ --ivory2: #f2ebe0; /* bg phụ, card nhẹ */ --ivory3: #ede3d3; /* bg nhấn sâu hơn */ --brown: #2c1a0e; /* text chính, CTA dark */ --brown2: #4a2e1a; /* text phụ, hover state */ --brown3: #1a0f07; /* bg dark overlay (mob-nav) */ --green: #2d5a3d; /* CTA primary, accent */ --green2: #3d7a52; /* hover primary */ --green3: #e8f0ea; /* bg thông báo tích cực */ --gold: #c49a3c; /* eyebrow, star rating, highlight */ --gold2: #e8c068; /* gradient stop sáng hơn */ --text: #1e1208; /* body text (đậm hơn --brown chút) */ --muted: #7a6248; /* helper text, placeholder */ --border: rgba(44, 26, 14, 0.10); /* viền nhẹ mặc định */ --border-strong: rgba(44, 26, 14, 0.18); /* viền nhấn */ /* ─── Alpha alias hay dùng (từ audit: 8 alpha phổ biến nhất) ─── */ --gold-a08: rgba(196, 154, 60, 0.08); --gold-a12: rgba(196, 154, 60, 0.12); --gold-a25: rgba(196, 154, 60, 0.25); --gold-a40: rgba(196, 154, 60, 0.40); --ink-a10: rgba(44, 26, 14, 0.10); --ink-a28: rgba(28, 18, 8, 0.28); --white-a45: rgba(255, 255, 255, 0.45); --white-a85: rgba(255, 255, 255, 0.85); /* ─── Semantic state colors (brand-aligned, không dùng đỏ tươi) ─── */ --state-closed: #b42020; /* CHỈ dùng cho .sticky-bar-dot.closed */ --state-error: var(--brown); /* error text → brown đậm, không đỏ */ --state-warn: var(--gold); --state-ok: var(--green); /* ─── Spacing scale (đơn vị px, 8-point system) ─── */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 80px; --sp-10: 120px; /* ─── Font size scale (rem, Cormorant + DM Sans đều dùng chung) ─── */ --fs-xs: 0.72rem; /* eyebrow, legal */ --fs-sm: 0.85rem; /* caption, meta */ --fs-base: 1rem; /* body text */ --fs-md: 1.12rem; /* emphasized body */ --fs-lg: 1.32rem; /* subhead */ --fs-xl: 1.65rem; /* h4-h3 */ --fs-2xl: 2.1rem; /* h2 */ --fs-3xl: 2.8rem; /* h1 mobile */ --fs-4xl: 4rem; /* h1 desktop */ /* ─── Border radius (brand square, chỉ 4 giá trị) ─── */ --r-sm: 2px; --r-md: 4px; --r-lg: 16px; --r-pill: 999px; /* ─── Shadow (earthy ink base, 3 cấp elevation) ─── */ --shadow-sm: 0 2px 6px rgba(44, 26, 14, 0.08); --shadow-md: 0 8px 24px rgba(44, 26, 14, 0.12); --shadow-lg: 0 18px 48px rgba(28, 18, 8, 0.28); /* ─── Motion (brand easing = signature, dùng cho 99% transition) ─── */ --ease-brand: cubic-bezier(0.23, 1, 0.32, 1); --ease-nav: cubic-bezier(0.65, 0, 0.35, 1); /* chỉ mob-nav sweep */ --dur-fast: 0.2s; --dur-base: 0.35s; --dur-slow: 0.6s; /* ─── Z-index scale ─── */ --z-nav: 200; --z-sticky: 300; --z-fab: 400; --z-overlay: 1000; --z-modal: 1500; --z-toast: 2000; } /* ─── Global reset cơ bản ─── */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; } button, a, [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* ─── Accessibility: focus ring cho keyboard user (WCAG 2.4.7) ─── :focus-visible chỉ hiện khi user navigate bằng Tab, không hiện khi click chuột → đẹp cho mouse user, an toàn cho keyboard + screen reader. */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: var(--r-sm); } /* Bỏ outline mặc định cho mouse user — nhưng giữ :focus-visible ở trên */ :focus:not(:focus-visible) { outline: none; } /* ─── Reduce motion cho user bật setting OS ─── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }