/** * HCTCLIENT02 DESIGN TOKENS V1 * -------------------------------------------------------------------------- * Theme ownership: * - This file belongs to theme "fujinvietnam" and may be replaced by another theme. * - Components must consume semantic --hctclient02-* variables instead of * copying raw colors, spacing, radius, shadows or typography values. * - Legacy --fujinvietnam-* aliases remain available in fujinvietnam-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 — Fujin Việt Nam (misting/irrigation). * --hctclient02-color-primary is the ONE source of truth for the brand green — * 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 (--hctclient02-primary/-text/-muted/-soft). */ --hctclient02-color-primary: #2d805d; --hctclient02-color-primary-hover: #143d31; --hctclient02-color-primary-soft: #eaf5f0; --hctclient02-color-secondary: #143d31; --hctclient02-color-secondary-soft: #eef3f1; --hctclient02-color-success: #16a34a; --hctclient02-color-warning: #d97706; --hctclient02-color-danger: #dc2626; --hctclient02-color-info: #0284c7; --hctclient02-color-text: #17231e; --hctclient02-color-text-muted: #56655d; --hctclient02-color-heading: #143d31; --hctclient02-color-surface: #ffffff; --hctclient02-color-surface-soft: #f4f8f6; --hctclient02-color-border: #e2ebe6; --hctclient02-color-border-strong: #cfdcd5; --hctclient02-color-focus: rgba(45, 128, 93, 0.32); --hctclient02-color-backdrop: rgba(15, 23, 42, 0.58); /* * Short-name aliases used by the "fujinvietnam" theme pages/components (category * pages, service cards, home-sections). Kept separate from the long-form * --hctclient02-color-* names above because many call sites already ship * with a literal fallback (var(--hctclient02-primary, #2d805d)) — these * aliases must stay equal to those fallback values or the fallback and the * resolved value will visibly diverge. */ --hctclient02-primary: var(--hctclient02-color-primary); --hctclient02-text: #17231e; --hctclient02-muted: #56655d; --hctclient02-soft: #eaf5f0; /* Font families. Fujin Việt Nam dùng 1 bộ font Georgia serif đồng nhất toàn site. */ --hctclient02-font-family-base: Georgia, 'Times New Roman', serif; --hctclient02-font-family-heading: Georgia, 'Times New Roman', serif; /* Fluid type scale. */ --hctclient02-font-size-xs: clamp(0.84375rem, 0.81375rem + 0.10vw, 0.90625rem); --hctclient02-font-size-sm: clamp(0.8125rem, 0.78rem + 0.12vw, 0.875rem); --hctclient02-font-size-md: clamp(0.9375rem, 0.90rem + 0.16vw, 1rem); --hctclient02-font-size-lg: clamp(1rem, 0.94rem + 0.26vw, 1.125rem); --hctclient02-font-size-xl: clamp(1.125rem, 1.02rem + 0.42vw, 1.375rem); --hctclient02-font-size-2xl: clamp(1.375rem, 1.18rem + 0.78vw, 1.875rem); --hctclient02-font-size-3xl: clamp(1.75rem, 1.42rem + 1.30vw, 2.5rem); --hctclient02-font-size-4xl: clamp(2rem, 1.52rem + 1.90vw, 3.125rem); /* Website-wide semantic typography roles. */ --hctclient02-text-caption: var(--hctclient02-font-size-xs); --hctclient02-text-meta: var(--hctclient02-font-size-sm); --hctclient02-text-body: var(--hctclient02-font-size-md); --hctclient02-text-body-lg: var(--hctclient02-font-size-lg); --hctclient02-text-button: var(--hctclient02-font-size-md); --hctclient02-text-card-title: var(--hctclient02-font-size-xl); --hctclient02-text-panel-title: var(--hctclient02-font-size-2xl); --hctclient02-text-section-title: clamp(1.75rem, 1.55rem + 0.85vw, 2.25rem); --hctclient02-text-page-title: clamp(2rem, 1.70rem + 1.15vw, 2.75rem); --hctclient02-text-hero-title: clamp(2.25rem, 1.85rem + 1.55vw, 3.25rem); --hctclient02-text-icon-sm: 1.25rem; --hctclient02-text-icon-md: 1.5rem; --hctclient02-text-icon-lg: 1.75rem; --hctclient02-icon-size-md: var(--hctclient02-text-icon-md); --hctclient02-icon-size-lg: var(--hctclient02-text-icon-lg); --hctclient02-font-weight-regular: 400; --hctclient02-font-weight-medium: 500; --hctclient02-font-weight-semibold: 600; --hctclient02-font-weight-bold: 700; --hctclient02-font-weight-extrabold: 800; --hctclient02-line-height-tight: 1.18; --hctclient02-line-height-heading: 1.28; --hctclient02-line-height-base: 1.6; --hctclient02-line-height-relaxed: 1.75; /* Spacing scale. */ --hctclient02-space-0: 0; --hctclient02-space-1: 0.25rem; --hctclient02-space-2: 0.5rem; --hctclient02-space-3: 0.75rem; --hctclient02-space-4: 1rem; --hctclient02-space-5: 1.25rem; --hctclient02-space-6: 1.5rem; --hctclient02-space-7: 2rem; --hctclient02-space-8: 2.5rem; --hctclient02-space-9: 3rem; --hctclient02-space-10: 4rem; --hctclient02-space-11: 5rem; --hctclient02-space-12: 6rem; --hctclient02-section-space: clamp(3rem, 2rem + 4vw, 6rem); --hctclient02-section-space-sm: clamp(2rem, 1.5rem + 2vw, 3.5rem); --hctclient02-section-padding-block: var(--hctclient02-section-space); --hctclient02-section-padding-block-sm: var(--hctclient02-section-space-sm); --hctclient02-gutter: clamp(1rem, 0.65rem + 1.25vw, 2rem); /* Radius. */ --hctclient02-radius-xs: 0.25rem; --hctclient02-radius-sm: 0.5rem; --hctclient02-radius-md: 0.75rem; --hctclient02-radius-lg: 1rem; --hctclient02-radius-xl: 1.5rem; --hctclient02-radius-2xl: 2rem; --hctclient02-radius-pill: 999px; --hctclient02-radius-circle: 50%; /* Borders. */ --hctclient02-border-width: 1px; --hctclient02-border: var(--hctclient02-border-width) solid var(--hctclient02-color-border); --hctclient02-border-strong: var(--hctclient02-border-width) solid var(--hctclient02-color-border-strong); /* Shadows. */ --hctclient02-shadow-xs: 0 2px 8px rgba(15, 23, 42, 0.06); --hctclient02-shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.08); --hctclient02-shadow-md: 0 14px 36px rgba(15, 23, 42, 0.11); --hctclient02-shadow-lg: 0 24px 70px rgba(15, 23, 42, 0.16); --hctclient02-shadow-primary: 0 12px 28px rgba(45, 128, 93, 0.22); /* Motion. */ --hctclient02-duration-fast: 160ms; --hctclient02-duration-normal: 240ms; --hctclient02-duration-slow: 420ms; --hctclient02-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --hctclient02-ease-standard: ease; /* Containers. */ --hctclient02-container-xs: 44rem; --hctclient02-container-sm: 60rem; --hctclient02-container-md: 75rem; --hctclient02-container-lg: 75rem; --hctclient02-container-wide: 75rem; --hctclient02-container-content: 75rem; /* Opacity. */ --hctclient02-opacity-disabled: 0.5; --hctclient02-opacity-muted: 0.72; --hctclient02-opacity-hover: 0.92; /* Layer scale. Keep synchronized with shared UI owners. */ --hctclient02-z-base: 1; --hctclient02-z-sticky: 100; --hctclient02-z-dropdown: 900; --hctclient02-z-backdrop: 1000; --hctclient02-z-mobile-menu: 1010; --hctclient02-z-lightbox: 1040; --hctclient02-z-popup: 1100; --hctclient02-z-modal: 1120; --hctclient02-z-loading: 1200; --hctclient02-z-feedback: 1300; --hctclient02-z-toast: 1310; }