/* ============================================================ Huapont — Theme Tokens (Phase 2) ------------------------------------------------------------ Tông màu chủ đạo: Đen + Vàng kim nhạt (sang trọng, cao cấp) File này KHÔNG chứa rule phải dùng trực tiếp; chỉ khai báo CSS Custom Properties để các file khác (navbar, components, pages…) tham chiếu qua var(--token). Hỗ trợ 2 theme: light (mặc định) và dark. Toggle: do JS điều khiển. ============================================================ */ :root { /* -------- Neutral (đen) -------- */ --color-ink-900: #0B0B0B; /* đen tuyền — primary text/nền tối */ --color-ink-800: #1A1A1A; /* đen chủ đạo */ --color-ink-700: #2B2B2B; /* đen phụ */ --color-ink-600: #3F3F3F; /* heading phụ */ --color-ink-500: #5C5C5C; /* body text */ --color-ink-400: #8A8A8A; /* muted text */ --color-ink-300: #B8B8B8; /* placeholder / border nhạt */ --color-ink-200: #E4E4E4; /* divider / border */ --color-ink-100: #F2F2F2; /* nền phụ */ --color-ink-050: #F8F8F8; /* nền phụ nhạt */ --color-white: #FFFFFF; /* -------- Gray scale (aliases for common usages) -------- */ --color-gray-800: #1A1A1A; --color-gray-700: #2B2B2B; /* -------- Gold (vàng kim nhạt) -------- */ --color-gold-900: #8A6A1F; /* vàng đậm — hover/active */ --color-gold-700: #B08A3E; /* vàng đậm vừa */ --color-gold-600: #B08A3E; /* vàng đậm vừa (alias for consistency) */ --color-gold-500: #C9A961; /* vàng kim nhạt — PRIMARY ACCENT */ --color-gold-400: #D4B978; /* vàng kim nhạt — hover */ --color-gold-300: #E1CC94; /* vàng nhạt highlight */ --color-gold-100: #F5ECD3; /* vàng rất nhạt — badge bg */ --color-gold-050: #FBF5E4; /* vàng kem — subtle bg */ /* -------- Semantic (ánh xạ vai trò) -------- */ --color-primary: var(--color-ink-900); /* primary action = đen */ --color-primary-hover: var(--color-ink-700); --color-accent: var(--color-gold-500); /* điểm nhấn = vàng kim */ --color-accent-hover: var(--color-gold-700); --color-accent-soft: var(--color-gold-100); --color-gold-soft: var(--color-gold-050); /* alias dùng trong home.css / pages.css */ --color-text: var(--color-ink-800); --color-text-muted: var(--color-ink-500); --color-text-soft: #6B7280; /* soft gray for secondary text */ --color-text-secondary: #9CA3AF; /* lighter gray for tertiary text */ --color-text-subtle: var(--color-ink-400); --color-text-on-dark: var(--color-white); --color-text-on-gold: var(--color-ink-900); /* CTA section tokens — section luxury tối theo brand default */ --color-cta-bg: var(--color-ink-900); --color-cta-text: var(--color-white); --color-cta-text-soft: var(--color-gold-300); --color-cta-button-secondary-text: var(--color-white); --color-bg: var(--color-white); --color-bg-soft: var(--color-ink-050); --color-bg-secondary: var(--color-ink-100); /* alias dùng trong home.css */ --color-bg-dark: var(--color-ink-900); --color-border: var(--color-ink-200); --color-border-strong: var(--color-ink-300); --color-divider: var(--color-ink-100); /* -------- States -------- */ --color-success: #2E7D32; --color-warning: #C9A961; /* warning dùng vàng kim cho hợp tone */ --color-danger: #B00020; --color-info: #1F4E79; /* -------- Elevation / Shadow -------- */ --shadow-xs: 0 1px 2px rgba(11, 11, 11, 0.04); --shadow-sm: 0 2px 6px rgba(11, 11, 11, 0.06); --shadow-md: 0 6px 18px rgba(11, 11, 11, 0.08); --shadow-lg: 0 16px 40px rgba(11, 11, 11, 0.12); --shadow-gold: 0 6px 20px rgba(201, 169, 97, 0.25); /* -------- Alpha / Opacity helpers (reusable for overlays, shadows, etc) -------- */ --alpha-overlay-light: rgba(255, 255, 255, 0.1); --alpha-overlay-medium: rgba(0, 0, 0, 0.45); --alpha-overlay-dark: rgba(11, 11, 11, 0.92); --alpha-hover: rgba(201, 169, 97, 0.1); --alpha-focus-ring: rgba(201, 169, 97, 0.15); --alpha-backdrop: rgba(11, 11, 11, 0.8); /* -------- Radius -------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* Aliases dùng trong home.css / pages.css */ --radius-2: var(--radius-sm); /* 6px */ --radius-3: var(--radius-md); /* 10px */ /* -------- Spacing scale (bổ sung cho layout) -------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* -------- Type scale (font-size tokens) -------- */ --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-md: 16px; --text-lg: 18px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --text-4xl: 36px; --text-5xl: 48px; /* -------- Layout -------- */ --container-max: 1280px; --container-padding: 24px; --navbar-height: 80px; --topbar-height: 36px; /* -------- Motion -------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-fast: 160ms; --duration-base: 240ms; --duration-normal: 200ms; --duration-slow: 360ms; /* -------- Z-index -------- */ --z-dropdown: 100; --z-sticky: 200; --z-overlay: 900; --z-modal: 1000; /* -------- Color scheme (browsers: scrollbar, form controls) -------- */ color-scheme: light; } /* ============================================================ Dark theme — bật bằng Override các token semantic + page-level styling ============================================================ */ :root[data-theme="dark"] { /* Bảng semantic tokens đảo ngược */ --color-text: var(--color-ink-100); --color-text-muted: var(--color-ink-300); --color-text-subtle: var(--color-ink-400); --color-bg: var(--color-ink-900); --color-bg-soft: var(--color-ink-800); --color-bg-dark: #000000; --color-border: var(--color-ink-700); --color-border-strong: var(--color-ink-600); --color-divider: var(--color-ink-700); --color-white: var(--color-ink-800); /* dùng cho surface (card/dropdown) */ --color-primary: var(--color-white); --color-primary-hover: var(--color-ink-100); --color-accent-soft: rgba(201, 169, 97, 0.12); /* CTA trong dark mode — đảo thành surface sáng để nổi bật trên body tối */ --color-cta-bg: var(--color-ink-100); --color-cta-text: var(--color-ink-900); --color-cta-text-soft: var(--color-ink-500); --color-cta-button-secondary-text: var(--color-ink-900); /* Shadow dùng tone tối hơn cho dark */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.55); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.65); --shadow-gold: 0 6px 20px rgba(201, 169, 97, 0.35); color-scheme: dark; } /* Dark theme — áp dụng cho body & page-level (tách khỏi token để tăng cường) */ :root[data-theme="dark"] body { background: var(--color-bg); color: var(--color-text); } /* Optional: nếu muốn áp dụng mặc định ở dark mode (sau này) */ @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { /* giữ nguyên light cho giai đoạn 2 — Huapont brand là light */ } } /* ============================================================ Image Frame — khung chứa ảnh có placeholder khi ảnh lỗi ------------------------------------------------------------ - .image-frame bao quanh để tránh dùng trực tiếp - Fallback: nền gradient + icon placeholder khi ảnh lỗi/none - Modifier sizes: --sm (60px), --md (120px), --lg (240px) ============================================================ */ .image-frame { display: block; overflow: hidden; background: var(--color-ink-100); border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .image-frame img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Fallback — hiển thị khi ảnh lỗi hoặc chưa có */ .image-frame img[src=""], .image-frame img:not([src]) { visibility: hidden; } .image-frame::before { content: ''; display: block; background: linear-gradient(135deg, var(--color-ink-200) 0%, var(--color-ink-100) 100%); } /* Kích thước nhỏ — thumbnail form, ~60px */ .image-frame--sm { width: 60px; height: 60px; } .image-frame--sm::before { padding-top: 100%; } /* Kích thước trung — gallery admin, ~120px */ .image-frame--md { width: 120px; height: 120px; } .image-frame--md::before { padding-top: 100%; } /* Kích thước lớn — product detail, ~240px */ .image-frame--lg { width: 240px; height: 240px; } .image-frame--lg::before { padding-top: 100%; } /* Dark theme overrides */ :root[data-theme="dark"] .image-frame { background: var(--color-ink-800); border-color: var(--color-ink-700); } :root[data-theme="dark"] .image-frame::before { background: linear-gradient(135deg, var(--color-ink-700) 0%, var(--color-ink-800) 100%); } /* Custom preset — primary và accent do admin chọn */ :root[data-theme-preset="custom"] { --color-ink-900: var(--site-custom-primary); --color-ink-800: var(--site-custom-primary); --color-ink-700: var(--site-custom-primary); --color-ink-600: var(--site-custom-primary); --color-ink-500: var(--site-custom-primary); --color-gold-900: var(--site-custom-accent); --color-gold-700: var(--site-custom-accent); --color-gold-500: var(--site-custom-accent); --color-gold-400: var(--site-custom-accent); --color-gold-300: var(--site-custom-accent); --color-gold-100: color-mix(in srgb, var(--site-custom-accent) 18%, white); --color-gold-050: color-mix(in srgb, var(--site-custom-accent) 9%, white); --color-accent-soft: color-mix(in srgb, var(--site-custom-accent) 16%, transparent); --color-warning: var(--site-custom-accent); --color-info: var(--site-custom-primary); --shadow-gold: 0 6px 20px color-mix(in srgb, var(--site-custom-accent) 25%, transparent); } /* ============================================================ Theme Presets — Override palette tokens theo lựa chọn admin ------------------------------------------------------------ - Bật bằng do layout render - Chỉ override tokens "swappable" (primary, accent, gold scale) để không phá token semantic (text/bg/border) - Dark mode vẫn chạy độc lập trên preset hiện tại ============================================================ */ /* Blue White preset — navy primary + sky accent */ :root[data-theme-preset="blue-white"] { --color-ink-900: #0F1E47; --color-ink-800: #1E3A8A; --color-ink-700: #2C4DA8; --color-ink-600: #3D5FB8; --color-ink-500: #5C7BC8; --color-ink-400: #8FA4D8; --color-ink-300: #B8C8E8; --color-ink-200: #D9E1F2; --color-ink-100: #EBEFF7; --color-ink-050: #F4F6FB; --color-gold-900: #0C3A75; --color-gold-700: #1F5DB8; --color-gold-500: #60A5FA; --color-gold-400: #80BDFC; --color-gold-300: #A8D0FD; --color-gold-100: #DBEAFE; --color-gold-050: #EFF6FF; --color-warning: #1F5DB8; --color-info: #1E3A8A; --shadow-gold: 0 6px 20px rgba(96, 165, 250, 0.25); } /* Green Brown preset — green primary + earth-brown accent */ :root[data-theme-preset="green-brown"] { --color-ink-900: #02261A; --color-ink-800: #065F46; --color-ink-700: #0B7A5A; --color-ink-600: #148F6E; --color-ink-500: #2BA582; --color-ink-400: #65C5A6; --color-ink-300: #92D7C1; --color-ink-200: #C2E8DA; --color-ink-100: #DEF2E8; --color-ink-050: #EDF7F1; --color-gold-900: #5C2F08; --color-gold-700: #7C4413; --color-gold-500: #92400E; --color-gold-400: #B05A1C; --color-gold-300: #D08445; --color-gold-100: #F5E1CB; --color-gold-050: #FBF1E2; --color-warning: #92400E; --color-info: #065F46; --shadow-gold: 0 6px 20px rgba(146, 64, 14, 0.25); } /* ============================================================ Global Dark Mode — base overrides cho toàn bộ trang ------------------------------------------------------------ Đảm bảo khi , mọi phần tử kế thừa semantic tokens sẽ tự đổi màu. Áp dụng 1 lần ở cuối theme. ============================================================ */ :root[data-theme="dark"] body { background: var(--color-bg); color: var(--color-text); } /* Headings + paragraphs — kế thừa color động */ :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4, :root[data-theme="dark"] h5, :root[data-theme="dark"] h6 { color: var(--color-text); } :root[data-theme="dark"] p, :root[data-theme="dark"] li, :root[data-theme="dark"] label, :root[data-theme="dark"] span { color: inherit; } /* Links */ :root[data-theme="dark"] a { color: var(--color-text); } :root[data-theme="dark"] a:hover { color: var(--color-accent); } /* Inline borders / dividers */ :root[data-theme="dark"] hr { border-color: var(--color-border); background: var(--color-border); } /* Image-frame placeholder */ :root[data-theme="dark"] .image-frame { background: var(--color-ink-800); border-color: var(--color-ink-700); } :root[data-theme="dark"] .image-frame::before { background: linear-gradient(135deg, var(--color-ink-700) 0%, var(--color-ink-800) 100%); } /* table skeleton (legacy views) */ :root[data-theme="dark"] table { background: var(--color-bg-soft); color: var(--color-text); } :root[data-theme="dark"] table th { background: var(--color-ink-800); color: var(--color-text); } :root[data-theme="dark"] table td { border-color: var(--color-border); } /* Form controls — native dark tweaks */ :root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { background: var(--color-bg-soft); color: var(--color-text); border-color: var(--color-border-strong); } :root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: var(--color-text-subtle); } /* Selection highlight */ :root[data-theme="dark"] ::selection { background: var(--color-accent); color: var(--color-text-on-gold); }