/* ============================================================ BAMBUMRO ONE — Design Tokens ------------------------------------------------------------ Theo ĐÚNG Brand Style Guide v2.0 của Bambumro (Projects/MARKETING/MARKETING/_context/Brand_Style_Guide.md) Một thay đổi duy nhất so với guide: **Warm Cream #FFF5EA → TRẮNG #FFFFFF**. Guide dựng cho ấn phẩm in và slide, nơi nền kem tạo cảm giác ấm; còn phần mềm dùng 8 tiếng/ngày với bảng số liệu dày thì nền trắng đọc đỡ mỏi mắt hơn. Mọi chỗ guide ghi "nền Warm Cream" trong phần mềm này là nền trắng. Ba màu chính: Deep Forest #1F4E3D thương hiệu chính — sidebar, topbar, header bảng, footer Bambu Green #2D8A52 CTA, link, icon, highlight Navy Ink #142841 wordmark, tiêu đề lớn trên nền sáng Accent ấm: Terracotta #C65D2E số liệu nổi bật, CTA phụ — KHÔNG làm nền cho text dài Nền: White #FFFFFF · Off White #F8FAF9 · Sage Mist #E4F2EA Quy tắc phối của guide, áp vào phần mềm: Combo 1 · nền tối : Deep Forest + chữ trắng + accent Terracotta/Bambu Green → sidebar, topbar, header bảng, hero Combo 2 · nội dung : nền trắng + chữ Ink/Slate + tiêu đề Deep Forest + số liệu Terracotta Combo 3 · card : card trắng, viền Light Gray, title Deep Forest, KPI Terracotta Ba điều guide cấm, đã tuân thủ: · Không quá 3 màu chính trong một màn hình · Terracotta không làm nền cho đoạn văn dài · Bambu Green và Terracotta không đứng cạnh nhau ở diện tích lớn — luôn có trắng ở giữa Tương phản đã đo: trắng/Deep Forest 9.48 · trắng/Bambu Green 4.31 · Slate/trắng 10.35 · Terracotta/trắng 4.19 — tất cả đạt chuẩn đọc. ============================================================ */ :root { /* ---------- MÀU CHÍNH ---------- */ --forest-900: #143528; /* Deep Forest đậm hơn — pressed, gradient */ --forest-700: #1F4E3D; /* DEEP FOREST — thương hiệu chính */ --forest-500: #2D8A52; /* BAMBU GREEN — CTA, link, icon */ --forest-300: #3DBE6C; /* Bright Green — điểm nhấn trên nền tối */ --forest-100: #C2E0CE; --forest-50: #E4F2EA; /* Sage Mist — nền badge, hover nhạt */ --navy: #142841; /* Navy Ink — wordmark, tiêu đề lớn */ --navy-600: #1B5C7A; /* teal của gradient logo — dùng cho info */ /* ---------- ACCENT ẤM ---------- */ --terra: #C65D2E; /* Terracotta — số liệu nổi bật, CTA phụ */ --terra-100: #F2C9B0; /* Terracotta Light — nền pill/badge */ /* ---------- TRUNG TÍNH (Grayscale trong guide) ---------- */ --ink: #0F172A; /* headline trên nền sáng */ --slate: #334155; /* body text */ --muted: #6B7280; /* caption, metadata, label phụ */ --light-gray: #E5E7EB; /* border, divider */ --off-white: #F8FAF9; /* nền section trung tính */ --white: #FFFFFF; /* ---------- MÀU TRẠNG THÁI (guide mục 2) ---------- */ --state-alert: #C44536; /* Alert — đỏ-đất */ --state-warning: #D97706; /* Warning */ --state-success: #16A34A; /* Success */ --state-info: #1B5C7A; /* Info */ --state-danger: var(--state-alert); --state-neutral: var(--muted); /* ============================================================ VAI TRÒ NGỮ NGHĨA — khi code chỉ gọi nhóm này, đừng gọi màu thô ============================================================ */ --bg-page: var(--white); /* nền trang: TRẮNG (thay Warm Cream) */ --bg-surface: var(--white); --bg-surface-alt: var(--off-white); --bg-nav: var(--forest-700); /* Combo 1 — Deep Forest */ --bg-nav-hover: var(--forest-900); --bg-nav-active: var(--forest-500); /* Bambu Green — mục đang chọn */ --text-primary: var(--ink); /* headline */ --text-secondary: var(--slate); /* body */ --text-muted: var(--muted); --text-on-dark: var(--white); --text-on-action: var(--white); /* chữ trên nút Bambu Green */ --text-title: var(--forest-700); /* tiêu đề mục — Deep Forest */ --text-stat: var(--terra); /* số liệu nổi bật — Terracotta */ --border-subtle: var(--light-gray); --border-strong: #D3DAE0; --border-focus: var(--forest-500); --action-primary: var(--forest-500); --action-primary-hover: var(--forest-700); --action-secondary-bg: var(--off-white); --action-secondary-text:var(--forest-700); --link: var(--forest-500); /* Tên cũ, giữ lại để màn hình không phải sửa ------------------- */ --silver-50: var(--off-white); --silver-100: #EFF3F1; --silver-200: var(--light-gray); --silver-300: #D3DAE0; --silver-400: #A9B2B8; --silver-500: var(--muted); --silver-600: var(--slate); --green-50: var(--forest-50); --green-100: var(--forest-100); --green-300: var(--forest-300); --green-500: var(--forest-500); --green-600: var(--forest-700); --green-700: var(--forest-700); --green-900: var(--forest-900); --ink-900: var(--forest-700); /* nền điều hướng */ --ink-800: var(--forest-900); --ink-700: var(--forest-500); --ink-600: var(--forest-300); --ink-text: var(--ink); --ink-title: var(--forest-700); --text-on-green: var(--white); /* ---------- Gradient (guide: chỉ 2 màu cùng họ) ---------- */ --metal-silver: linear-gradient(135deg, #FFFFFF 0%, #F8FAF9 55%, #EFF3F1 100%); --metal-dark: linear-gradient(135deg, #2D8A52 0%, #1F4E3D 60%, #143528 100%); /* ---------- Bo góc ---------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; /* ---------- Đổ bóng — pha theo Deep Forest ---------- */ --shadow-sm: 0 1px 2px rgba(31,78,61,.07); --shadow-md: 0 2px 8px rgba(31,78,61,.10); --shadow-lg: 0 8px 24px rgba(31,78,61,.16); /* ---------- Khoảng cách (thang 4px) ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; /* ---------- Chữ — Cabin theo guide mục 3 ---------- */ --font-sans: "Cabin", "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Calibri, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 26px; --fs-3xl: 34px; /* guide: line-height 1.5–1.6 body · 1.2–1.3 heading */ --lh-tight: 1.25; --lh-base: 1.55; --lh-loose: 1.7; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---------- Layout ---------- */ --nav-width: 232px; --nav-width-collapsed: 60px; --topbar-height: 52px; --content-max: 1440px; } /* ============================================================ Khi thêm màn hình mới, dùng đúng các biến này: var(--bg-nav) nền điều hướng, header bảng (Deep Forest) var(--text-primary) chữ chính (Ink) var(--text-secondary) chữ phụ (Slate) var(--text-title) tiêu đề mục (Deep Forest) var(--action-primary) nền nút chính (Bambu Green, chữ trắng) var(--link) chữ link, icon nhấn (Bambu Green) var(--text-stat) số liệu nổi bật (Terracotta) ============================================================ */