/** * HCTCLIENT01 DESIGN TOKENS V1 * -------------------------------------------------------------------------- * Theme ownership: * - This file belongs to theme "beoi" and may be replaced by another theme. * - Components must consume semantic --hctclient01-* variables instead of * copying raw colors, spacing, radius, shadows or typography values. * - Legacy --beoi-* aliases remain available in beoi-layout.css while old * components are migrated gradually. * * Responsive strategy: * - Fluid values use clamp(min, viewport-based preferred, max). * - Text must remain readable at 320px without separate hard-coded sizes in * every component. */ :root { /* * Brand and semantic colors. * --hctclient01-color-primary is the ONE source of truth for the brand red — * match it against the real design reference before ever changing it, since * dozens of components read it both directly and through the short-name * aliases below (--hctclient01-primary/-text/-muted/-soft). */ --hctclient01-color-primary: #d8231f; --hctclient01-color-primary-hover: #b71e1a; --hctclient01-color-primary-soft: #fff1ef; --hctclient01-color-secondary: #ff7a12; --hctclient01-color-secondary-soft: #fff5eb; --hctclient01-color-success: #16a34a; --hctclient01-color-warning: #d97706; --hctclient01-color-danger: #dc2626; --hctclient01-color-info: #0284c7; --hctclient01-color-text: #171717; --hctclient01-color-text-muted: #5f6368; --hctclient01-color-heading: #b51d12; --hctclient01-color-surface: #ffffff; --hctclient01-color-surface-soft: #fff9f8; --hctclient01-color-border: #ececec; --hctclient01-color-border-strong: #d9d9d9; --hctclient01-color-focus: rgba(216, 35, 31, 0.32); --hctclient01-color-backdrop: rgba(15, 23, 42, 0.58); /* * Short-name aliases used by the "beoi" theme pages/components (category * pages, service cards, home-sections). Kept separate from the long-form * --hctclient01-color-* names above because many call sites already ship * with a literal fallback (var(--hctclient01-primary, #d8231f)) — these * aliases must stay equal to those fallback values or the fallback and the * resolved value will visibly diverge. */ --hctclient01-primary: var(--hctclient01-color-primary); --hctclient01-text: #4c3732; --hctclient01-muted: #76635e; --hctclient01-soft: #fff5f2; /* Font families. Override here for a different theme. */ --hctclient01-font-family-base: Arial, Helvetica, sans-serif; --hctclient01-font-family-heading: var(--hctclient01-font-family-base); /* * Fluid type scale — sàn (mobile) giữ nguyên: chữ đọc chính (md/body) * không xuống dưới 16px, chữ phụ (xs/sm) không xuống dưới ~13px. Riêng * md/xl (dùng cho p/h3 các box home) gần như PHẲNG qua mọi màn hình — * to hơn không đáng kể trên PC so với mobile — để "đồng bộ" tuyệt đối * giữa các kích thước màn hình, đúng yêu cầu, và không phình to trên PC. * sm/lg (menu chính PC + menu mobile) KHÔNG đổi khi chỉnh md/xl. * md/xl giảm thêm 1px đồng loạt (mobile lẫn PC) theo yêu cầu. */ --hctclient01-font-size-xs: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem); --hctclient01-font-size-sm: clamp(0.875rem, 0.84rem + 0.14vw, 0.9375rem); --hctclient01-font-size-md: 0.9375rem; --hctclient01-font-size-lg: clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem); --hctclient01-font-size-xl: clamp(1.125rem, 1.0875rem + 0.20vw, 1.1875rem); --hctclient01-font-size-2xl: clamp(1.4375rem, 1.24rem + 0.80vw, 1.9375rem); --hctclient01-font-size-3xl: clamp(1.8125rem, 1.48rem + 1.32vw, 2.5625rem); --hctclient01-font-size-4xl: clamp(2.0625rem, 1.58rem + 1.92vw, 3.1875rem); /* Website-wide semantic typography roles. */ --hctclient01-text-caption: var(--hctclient01-font-size-xs); --hctclient01-text-meta: var(--hctclient01-font-size-sm); --hctclient01-text-body: var(--hctclient01-font-size-md); --hctclient01-text-body-lg: var(--hctclient01-font-size-lg); --hctclient01-text-button: var(--hctclient01-font-size-md); --hctclient01-text-card-title: var(--hctclient01-font-size-xl); --hctclient01-text-panel-title: var(--hctclient01-font-size-2xl); --hctclient01-text-section-title: clamp(1.75rem, 1.55rem + 0.85vw, 2.25rem); --hctclient01-text-page-title: clamp(2rem, 1.70rem + 1.15vw, 2.75rem); --hctclient01-text-hero-title: clamp(2.25rem, 1.85rem + 1.55vw, 3.25rem); --hctclient01-text-icon-sm: 1.25rem; --hctclient01-text-icon-md: 1.5rem; --hctclient01-text-icon-lg: 1.75rem; --hctclient01-icon-size-md: var(--hctclient01-text-icon-md); --hctclient01-icon-size-lg: var(--hctclient01-text-icon-lg); --hctclient01-font-weight-regular: 400; --hctclient01-font-weight-medium: 500; --hctclient01-font-weight-semibold: 600; --hctclient01-font-weight-bold: 700; --hctclient01-font-weight-extrabold: 800; --hctclient01-line-height-tight: 1.18; --hctclient01-line-height-heading: 1.28; --hctclient01-line-height-base: 1.6; --hctclient01-line-height-relaxed: 1.75; /* Spacing scale. */ --hctclient01-space-0: 0; --hctclient01-space-1: 0.25rem; --hctclient01-space-2: 0.5rem; --hctclient01-space-3: 0.75rem; --hctclient01-space-4: 1rem; --hctclient01-space-5: 1.25rem; --hctclient01-space-6: 1.5rem; --hctclient01-space-7: 2rem; --hctclient01-space-8: 2.5rem; --hctclient01-space-9: 3rem; --hctclient01-space-10: 4rem; --hctclient01-space-11: 5rem; --hctclient01-space-12: 6rem; --hctclient01-section-space: clamp(3rem, 2rem + 4vw, 6rem); --hctclient01-section-space-sm: clamp(2rem, 1.5rem + 2vw, 3.5rem); --hctclient01-section-padding-block: var(--hctclient01-section-space); --hctclient01-section-padding-block-sm: var(--hctclient01-section-space-sm); --hctclient01-gutter: clamp(1rem, 0.65rem + 1.25vw, 2rem); /* Radius. */ --hctclient01-radius-xs: 0.25rem; --hctclient01-radius-sm: 0.5rem; --hctclient01-radius-md: 0.75rem; --hctclient01-radius-lg: 1rem; --hctclient01-radius-xl: 1.5rem; --hctclient01-radius-2xl: 2rem; --hctclient01-radius-pill: 999px; --hctclient01-radius-circle: 50%; /* Borders. */ --hctclient01-border-width: 1px; --hctclient01-border: var(--hctclient01-border-width) solid var(--hctclient01-color-border); --hctclient01-border-strong: var(--hctclient01-border-width) solid var(--hctclient01-color-border-strong); /* Shadows. */ --hctclient01-shadow-xs: 0 2px 8px rgba(15, 23, 42, 0.06); --hctclient01-shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.08); --hctclient01-shadow-md: 0 14px 36px rgba(15, 23, 42, 0.11); --hctclient01-shadow-lg: 0 24px 70px rgba(15, 23, 42, 0.16); --hctclient01-shadow-primary: 0 12px 28px rgba(201, 35, 22, 0.22); /* Motion. */ --hctclient01-duration-fast: 160ms; --hctclient01-duration-normal: 240ms; --hctclient01-duration-slow: 420ms; --hctclient01-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --hctclient01-ease-standard: ease; /* Containers. */ --hctclient01-container-xs: 44rem; --hctclient01-container-sm: 60rem; --hctclient01-container-md: 75rem; --hctclient01-container-lg: 75rem; --hctclient01-container-wide: 75rem; --hctclient01-container-content: 75rem; /* Opacity. */ --hctclient01-opacity-disabled: 0.5; --hctclient01-opacity-muted: 0.72; --hctclient01-opacity-hover: 0.92; /* Layer scale. Keep synchronized with shared UI owners. */ --hctclient01-z-base: 1; --hctclient01-z-sticky: 100; --hctclient01-z-dropdown: 900; --hctclient01-z-backdrop: 1000; --hctclient01-z-mobile-menu: 1010; --hctclient01-z-lightbox: 1040; --hctclient01-z-popup: 1100; --hctclient01-z-modal: 1120; --hctclient01-z-loading: 1200; --hctclient01-z-feedback: 1300; --hctclient01-z-toast: 1310; }