/* * Làng Du Lịch Ông Đề — DESIGN TOKENS * ------------------------------------------------------------------ * ĐÂY LÀ NƠI DUY NHẤT ĐỔI MÀU / BO GÓC / BÓNG / FONT. * Mọi class Tailwind (bg-primary, rounded-card, shadow-card, ...) đều đọc từ đây. * * Màu viết dạng "R G B" (cách nhau bằng dấu cách, không có dấu phẩy) * để Tailwind dùng được độ trong suốt: bg-primary/50, text-ink/70 ... * * Giá trị gốc lấy từ thiết kế hiện tại (7 trang). Tên token theo VAI TRÒ, * không theo mã hex — đổi thương hiệu chỉ cần đổi giá trị bên dưới. */ /* ════════ LIGHT (mặc định) ════════ */ :root { color-scheme: light; /* ── Thương hiệu ─────────────────────────────────────────── */ /* primary: xanh dương — nút chính, link, nhấn mạnh */ --c-primary: 0 112 173; /* #0070AD */ --c-primary-hover: 0 89 138; /* #00598A */ --c-primary-accent: 0 130 200; /* #0082C8 viền/gạch nhấn */ --c-primary-soft: 207 227 242; /* #CFE3F2 viền/nền nhạt */ --c-on-primary: 255 255 255; /* chữ trên nền primary */ /* secondary: xanh lá — nút CTA phụ, nhãn, nhấn "miệt vườn" */ --c-secondary: 140 198 63; /* #8CC63F */ --c-secondary-hover: 125 181 50; /* #7DB532 */ --c-secondary-deep: 69 111 24; /* #456F18 chữ xanh lá đậm */ --c-secondary-soft: 241 248 230; /* #F1F8E6 nền xanh lá nhạt */ --c-secondary-line: 207 227 180; /* #CFE3B4 viền xanh lá nhạt */ --c-on-secondary: 46 42 36; /* chữ trên nền secondary */ /* earth: nâu đất — tiêu đề nhỏ (eyebrow), chữ nhấn ấm */ --c-earth: 122 82 53; /* #7A5235 */ --c-earth-deep: 90 70 50; /* #5A4632 */ /* ── Chữ ─────────────────────────────────────────────────── */ --c-ink: 46 42 36; /* #2E2A24 chữ chính */ --c-ink-deep: 35 31 26; /* #231F1A nền tối (footer) */ --c-muted: 107 98 85; /* #6B6255 chữ phụ */ --c-faint: 185 168 140; /* #B9A88C chữ mờ / placeholder */ /* ── Nền (surface) ───────────────────────────────────────── */ --c-canvas: 255 253 247; /* #FFFDF7 nền trang / thẻ */ --c-sand: 246 239 226; /* #F6EFE2 nền section xen kẽ */ --c-sunken: 239 231 216; /* #EFE7D8 nền lõm / chip / hàng bảng */ --c-surface: 255 255 255; /* #FFFFFF thẻ nổi trên nền canvas (tối: nâu đen sáng hơn canvas) */ --c-white: 255 255 255; /* trắng cố định, không đổi theo theme (chữ trên nút/ảnh) */ /* ── Đường viền ──────────────────────────────────────────── */ --c-line: 232 223 207; /* #E8DFCF viền mặc định */ --c-line-strong: 217 205 184; /* #D9CDB8 viền ô nhập / nút viền */ --c-line-deep: 201 180 143; /* #C9B48F viền nhấn / đường kẻ đậm */ /* ── Trạng thái ──────────────────────────────────────────── */ --c-danger: 180 35 24; /* #B42318 lỗi, nút xem video */ --c-danger-deep: 145 32 24; /* #912018 */ --c-danger-soft: 242 201 191; /* #F2C9BF */ --c-live: 229 72 58; /* #E5483A chấm "đang diễn ra" */ --c-warning: 242 209 107; /* #F2D16B nhãn "ảnh tạm / demo" */ --c-warning-soft: 246 233 196; /* #F6E9C4 */ /* Chữ nhấn đọc được trên nền nhạt ở cả sáng/tối (khu tài khoản: badge, alert, lỗi ô nhập) */ --c-primary-ink: 0 89 138; /* chữ xanh dương trên nền primary-soft */ --c-danger-ink: 145 32 24; /* chữ đỏ trên nền danger-soft / canvas */ /* ── Lớp phủ trên ảnh (nâu đen, độ mờ chỉnh bằng /alpha) ─── */ --c-overlay: 30 22 14; /* rgba(30,22,14,.xx) */ --c-shadow: 46 42 36; /* màu bóng đổ (tối: đen thuần) */ /* ── Bo góc ──────────────────────────────────────────────── */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; /* ô nhập, nút vuông */ --r-lg: 18px; --r-xl: 22px; /* thẻ */ --r-2xl: 28px; /* khối lớn / panel */ --r-3xl: 30px; --r-pill: 999px; /* nút, chip */ /* Bí danh theo vai trò — đổi "phong cách bo" cả site ở đây */ --r-button: var(--r-pill); --r-field: var(--r-md); --r-card: var(--r-xl); --r-panel: var(--r-2xl); --r-media: var(--r-xl); /* ── Bóng đổ (nâu ấm, không dùng đen thuần) ─────────────── */ --shadow-soft: 0 8px 18px rgb(var(--c-shadow) / .12); --shadow-card: 0 16px 30px rgb(var(--c-shadow) / .12); --shadow-raised: 0 12px 30px rgb(var(--c-shadow) / .16); --shadow-float: 0 22px 44px rgb(var(--c-shadow) / .32); --shadow-modal: 0 30px 80px rgb(0 0 0 / .4); --shadow-ring: 0 0 0 4px rgb(var(--c-primary) / .25); /* ── Font ────────────────────────────────────────────────── */ --font-sans: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif; /* ── Bố cục ──────────────────────────────────────────────── */ --wrap-max: 1280px; /* độ rộng nội dung (.wrap) */ --wrap-pad: 32px; /* lề hai bên desktop */ --wrap-pad-m: 16px; /* lề hai bên mobile */ --header-h: 72px; } /* ════════ DARK ════════ * Chỉ ghi đè token đổi theo theme. Brand (primary, secondary, danger, live...) giữ nguyên. * Bật: · Tắt: data-theme="light" · Bỏ trống = theo hệ điều hành. * (Hai khối dưới giống nhau — CSS không cho dùng chung được điều kiện media + attribute.) */ :root[data-theme="dark"] { color-scheme: dark; /* primary giữ nguyên để nút vẫn đúng thương hiệu; hover sáng hơn trên nền tối */ --c-primary-hover: 24 136 196; --c-primary-soft: 17 52 74; --c-secondary-hover: 156 214 84; --c-secondary-deep: 156 214 84; /* chữ xanh lá: sáng lên để đọc được */ --c-secondary-soft: 33 46 20; --c-secondary-line: 62 84 38; --c-earth: 214 170 130; --c-earth-deep: 232 205 170; --c-ink: 245 238 225; --c-ink-deep: 14 12 9; --c-muted: 176 166 150; --c-faint: 120 110 95; --c-canvas: 24 21 17; --c-sand: 32 28 23; --c-sunken: 42 37 30; --c-surface: 36 32 26; --c-line: 58 52 43; --c-line-strong: 74 67 56; --c-line-deep: 99 89 73; --c-danger-soft: 74 30 26; --c-warning-soft: 70 58 24; --c-primary-ink: 122 195 240; --c-danger-ink: 255 153 138; --c-shadow: 0 0 0; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; /* primary giữ nguyên để nút vẫn đúng thương hiệu; hover sáng hơn trên nền tối */ --c-primary-hover: 24 136 196; --c-primary-soft: 17 52 74; --c-secondary-hover: 156 214 84; --c-secondary-deep: 156 214 84; /* chữ xanh lá: sáng lên để đọc được */ --c-secondary-soft: 33 46 20; --c-secondary-line: 62 84 38; --c-earth: 214 170 130; --c-earth-deep: 232 205 170; --c-ink: 245 238 225; --c-ink-deep: 14 12 9; --c-muted: 176 166 150; --c-faint: 120 110 95; --c-canvas: 24 21 17; --c-sand: 32 28 23; --c-sunken: 42 37 30; --c-surface: 36 32 26; --c-line: 58 52 43; --c-line-strong: 74 67 56; --c-line-deep: 99 89 73; --c-danger-soft: 74 30 26; --c-warning-soft: 70 58 24; --c-primary-ink: 122 195 240; --c-danger-ink: 255 153 138; --c-shadow: 0 0 0; } }