/* ========================================================================== HAM AI — Design Tokens Nguồn chân lý duy nhất cho màu, chữ, khoảng cách, bo góc, đổ bóng, chuyển động. Không hard-code giá trị ở bất kỳ file nào khác. ========================================================================== */ :root { /* ---------- 1. Nền (dark-first) ---------- */ --ham-bg-void: #06101D; /* nền sâu nhất — body */ --ham-bg-base: #0A1728; /* nền section */ --ham-bg-raised: #0F2036; /* card đặc, không kính */ --ham-bg-overlay: #16293F; /* dropdown, modal, input */ --ham-bg-hover: #1C3350; /* trạng thái hover trên nền đặc */ /* ---------- 2. Màu thương hiệu ---------- */ --ham-blue: #2F80FF; /* primary — hành động, link */ --ham-blue-600: #1F63D6; /* pressed */ --ham-blue-300: #6BA5FF; /* text trên nền tối, focus ring */ --ham-cyan: #33D6FF; /* accent — dữ liệu, highlight, node */ --ham-cyan-600: #17AEDA; --ham-purple: #8257FF; /* accent phụ — AI, tính năng cao cấp */ --ham-purple-600: #6A3FE0; /* ---------- 3. Màu ngữ nghĩa tài chính ---------- */ --ham-up: #17C97E; /* tăng giá */ --ham-up-soft: rgba(23, 201, 126, .14); --ham-down: #FF4D6A; /* giảm giá */ --ham-down-soft: rgba(255, 77, 106, .14); --ham-flat: #7C8FA8; /* đi ngang */ --ham-warn: #FFB020; --ham-warn-soft: rgba(255, 176, 32, .14); --ham-info-soft: rgba(47, 128, 255, .14); /* ---------- 4. Chữ ---------- */ --ham-text: #F2F7FF; /* tiêu đề, số liệu chính */ --ham-text-2: #A9B8CE; /* body */ --ham-text-3: #6B7F99; /* caption, label, meta */ --ham-text-on-brand:#061020; /* chữ trên nền cyan/xanh sáng */ /* ---------- 5. Kính & viền ---------- */ --ham-glass-fill: rgba(255, 255, 255, .038); --ham-glass-fill-2: rgba(255, 255, 255, .065); /* hover */ --ham-glass-stroke: rgba(255, 255, 255, .085); --ham-glass-stroke-2: rgba(255, 255, 255, .16); /* hover / active */ --ham-glass-shine: rgba(255, 255, 255, .22); /* viền sáng mép trên */ --ham-blur: 20px; --ham-blur-sm: 12px; --ham-blur-lg: 36px; --ham-hairline: rgba(255, 255, 255, .07); /* divider, table row */ --ham-hairline-2: rgba(255, 255, 255, .12); /* ---------- 6. Gradient ---------- */ --ham-grad-brand: linear-gradient(120deg, var(--ham-blue) 0%, var(--ham-cyan) 100%); --ham-grad-ai: linear-gradient(120deg, var(--ham-purple) 0%, var(--ham-blue) 60%, var(--ham-cyan) 100%); --ham-grad-text: linear-gradient(100deg, #FFFFFF 0%, #B8D9FF 45%, var(--ham-cyan) 100%); --ham-grad-surface: linear-gradient(160deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.015) 100%); --ham-grad-edge: linear-gradient(180deg, var(--ham-glass-shine) 0%, transparent 55%); /* ---------- 7. Chữ: family & scale ---------- */ --ham-font-display: "Be Vietnam Pro", ui-sans-serif, system-ui, "Segoe UI", sans-serif; --ham-font-body: "Inter", "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif; --ham-font-num: "Inter", ui-sans-serif, system-ui, sans-serif; /* dùng kèm tabular-nums */ /* Tối thiểu 2.25rem: ở 360px thì 2.75rem làm tiêu đề vỡ quá nhiều dòng. */ --ham-fs-display: clamp(2.25rem, 1.35rem + 4.4vw, 5rem); /* hero */ --ham-fs-h1: clamp(2.1rem, 1.5rem + 2.6vw, 3.25rem); --ham-fs-h2: clamp(1.65rem, 1.3rem + 1.6vw, 2.375rem); --ham-fs-h3: clamp(1.3rem, 1.15rem + .7vw, 1.625rem); --ham-fs-h4: 1.125rem; --ham-fs-lead: clamp(1.0625rem, 1rem + .35vw, 1.25rem); --ham-fs-body: 1rem; --ham-fs-sm: .9375rem; --ham-fs-xs: .8125rem; --ham-fs-label: .6875rem; /* eyebrow / uppercase label */ --ham-lh-tight: 1.08; --ham-lh-snug: 1.28; --ham-lh-body: 1.65; --ham-ls-display: -.03em; --ham-ls-head: -.018em; --ham-ls-label: .14em; --ham-fw-reg: 400; --ham-fw-med: 500; --ham-fw-semi: 600; --ham-fw-bold: 700; --ham-fw-black: 800; /* ---------- 8. Khoảng cách — thang 4px ---------- */ --ham-s-1: 4px; --ham-s-2: 8px; --ham-s-3: 12px; --ham-s-4: 16px; --ham-s-5: 20px; --ham-s-6: 24px; --ham-s-7: 32px; --ham-s-8: 40px; --ham-s-9: 48px; --ham-s-10: 64px; --ham-s-11: 80px; --ham-s-12: 96px; --ham-s-13: 128px; --ham-section-y: clamp(56px, 4vw + 32px, 128px); /* padding dọc mỗi section */ /* ---------- 9. Lưới & bề rộng ---------- */ --ham-container: 1280px; --ham-container-w: 1440px; /* rộng: dashboard, bảng dữ liệu */ --ham-container-n: 760px; /* hẹp: bài viết, pháp lý */ --ham-gutter: clamp(16px, 4vw, 40px); --ham-cols: 12; --ham-gap: clamp(16px, 2vw, 24px); /* ---------- 10. Bo góc ---------- */ --ham-r-xs: 6px; --ham-r-sm: 10px; --ham-r-md: 14px; --ham-r-lg: 20px; --ham-r-xl: 28px; --ham-r-2xl: 36px; --ham-r-pill: 999px; /* ---------- 11. Đổ bóng ---------- */ --ham-sh-sm: 0 1px 2px rgba(2, 8, 18, .4); --ham-sh-md: 0 8px 24px -8px rgba(2, 8, 18, .65); --ham-sh-lg: 0 24px 60px -20px rgba(2, 8, 18, .8); --ham-sh-glass: 0 20px 50px -24px rgba(2, 8, 18, .85), inset 0 1px 0 0 var(--ham-glass-shine); --ham-sh-lift: 0 32px 72px -28px rgba(2, 8, 18, .9), inset 0 1px 0 0 var(--ham-glass-shine); --ham-glow-blue: 0 0 0 1px rgba(47,128,255,.35), 0 12px 40px -12px rgba(47,128,255,.55); --ham-glow-cyan: 0 0 0 1px rgba(51,214,255,.35), 0 12px 40px -12px rgba(51,214,255,.5); --ham-focus: 0 0 0 2px var(--ham-bg-void), 0 0 0 4px var(--ham-blue-300); /* ---------- 12. Chuyển động ---------- */ --ham-ease: cubic-bezier(.22, .61, .36, 1); --ham-ease-out: cubic-bezier(.16, 1, .3, 1); --ham-t-fast: .14s; --ham-t-base: .24s; --ham-t-slow: .42s; /* ---------- 13. Lớp z ---------- */ --ham-z-base: 1; --ham-z-sticky: 100; --ham-z-header: 200; --ham-z-drawer: 300; --ham-z-modal: 400; --ham-z-toast: 500; --ham-z-tooltip: 600; } /* Breakpoint tham chiếu (dùng trong media query, không phải biến CSS): 360 / 390 → mobile nhỏ, mobile chuẩn 480 → mobile lớn 768 → tablet dọc 1024 → tablet ngang / laptop nhỏ 1280 → desktop 1440+ → desktop lớn */ /* Giảm chuyển động theo hệ điều hành */ @media (prefers-reduced-motion: reduce) { :root { --ham-t-fast: .01ms; --ham-t-base: .01ms; --ham-t-slow: .01ms; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }