/* ========================================================================== CNL — Design tokens Rút ra trực tiếp từ bộ mockup: nền kem ấm, thẻ trắng, đỏ Trung Hoa làm màu chính, vàng/tím/teal làm màu nhấn theo từng module học. ========================================================================== */ :root { /* --- Màu thương hiệu --- */ --cnl-primary: #E23B2E; --cnl-primary-600: #C92E22; --cnl-primary-700: #A82419; --cnl-primary-100: #FDE7E4; --cnl-primary-50: #FFF3F1; --cnl-accent: #F59E0B; /* vàng hoàng kim */ --cnl-accent-100: #FEF3C7; --cnl-purple: #7C3AED; --cnl-purple-100: #EDE9FE; --cnl-teal: #0D9488; --cnl-teal-100: #CCFBF1; --cnl-blue: #2563EB; --cnl-blue-100: #DBEAFE; --cnl-green: #16A34A; --cnl-green-100: #DCFCE7; --cnl-orange: #EA580C; --cnl-orange-100: #FFEDD5; --cnl-indigo: #4F46E5; --cnl-indigo-100: #E0E7FF; --cnl-sky: #0EA5E9; --cnl-sky-100: #E0F2FE; --cnl-gold: #D97706; --cnl-gold-100: #FEF3C7; --cnl-red: var(--cnl-primary); --cnl-red-100: var(--cnl-primary-100); /* --- Nền & chữ --- */ --cnl-surface: #FFF8F3; /* nền trang, kem ấm */ --cnl-surface-2: #FDF1EA; --cnl-card: #FFFFFF; --cnl-ink: #1E2532; /* chữ chính */ --cnl-ink-2: #4B5565; /* chữ phụ */ --cnl-muted: #7A8598; /* chữ mờ */ --cnl-line: #F0E2D7; /* viền ấm */ --cnl-line-2: #E7EBF0; /* viền trung tính */ /* --- Đổ bóng --- */ --cnl-shadow-xs: 0 1px 2px rgba(30, 37, 50, .05); --cnl-shadow-sm: 0 2px 8px rgba(30, 37, 50, .06); --cnl-shadow: 0 8px 24px -8px rgba(30, 37, 50, .12), 0 2px 6px rgba(30, 37, 50, .04); --cnl-shadow-lg: 0 24px 48px -20px rgba(30, 37, 50, .22); --cnl-shadow-red: 0 10px 24px -10px rgba(226, 59, 46, .55); /* --- Bo góc --- */ --cnl-r-sm: 10px; --cnl-r: 16px; --cnl-r-lg: 22px; --cnl-r-xl: 28px; --cnl-r-pill: 999px; /* --- Khoảng cách --- */ --cnl-gap-xs: 6px; --cnl-gap-sm: 12px; --cnl-gap: 20px; --cnl-gap-lg: 32px; --cnl-gap-xl: 56px; --cnl-section: clamp(48px, 6vw, 88px); /* --- Bố cục --- */ --cnl-container: 1240px; --cnl-container-narrow: 820px; --cnl-header-h: 76px; /* --- Chữ --- */ --cnl-font: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --cnl-font-hanzi: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", var(--cnl-font); --cnl-fs-xs: .75rem; --cnl-fs-sm: .8125rem; --cnl-fs-base: .9375rem; --cnl-fs-md: 1rem; --cnl-fs-lg: 1.125rem; --cnl-fs-xl: 1.375rem; --cnl-fs-2xl: clamp(1.5rem, 2.4vw, 1.875rem); --cnl-fs-3xl: clamp(1.875rem, 3.4vw, 2.5rem); --cnl-fs-hero: clamp(2.125rem, 5vw, 3.5rem); /* --- Chuyển động --- */ --cnl-ease: cubic-bezier(.22, .61, .36, 1); --cnl-t: .22s var(--cnl-ease); --cnl-t-slow: .45s var(--cnl-ease); --cnl-z-header: 100; --cnl-z-drawer: 120; --cnl-z-modal: 140; } /* Chế độ tối — bật bằng class trên hoặc theo thiết lập hệ thống. */ :root.cnl-dark { --cnl-surface: #14171F; --cnl-surface-2: #1B1F29; --cnl-card: #1E222C; --cnl-ink: #F1F4F9; --cnl-ink-2: #C3CAD6; --cnl-muted: #8A93A3; --cnl-line: #2C313D; --cnl-line-2: #2C313D; --cnl-primary-50: #2A1A18; --cnl-primary-100: #3A201C; --cnl-shadow: 0 8px 24px -8px rgba(0, 0, 0, .6); --cnl-shadow-sm: 0 2px 8px rgba(0, 0, 0, .4); --cnl-shadow-lg: 0 24px 48px -20px rgba(0, 0, 0, .7); }