/* Design tokens — Linear/Superhuman inspired dark theme. Semantic colors: red=SLA/dispute, amber=risk, green=healthy, blue=action, violet=VIP. */ :root { /* Surface layers (0..4 = flat to elevated) */ --bg-0: #0b0d13; --bg-1: #10131c; --bg-2: #161a26; --bg-3: #1c2233; --bg-4: #242b40; /* Borders */ --line-1: #232a3d; --line-2: #2f3852; --line-3: #3b4568; /* Text */ --tx-1: #eef1f8; --tx-2: #b7bfd3; --tx-3: #7e879e; --tx-4: #4f586e; /* Accents */ --ac: #6b8cff; /* primary action */ --ac-h: #8aa5ff; --ac-dim: #2a3866; /* Semantic */ --ok: #34d399; --ok-dim: #124232; --warn: #fbbf24; --warn-dim: #4a3712; --danger: #f87171; --danger-dim: #4a1c1c; --info: #22d3ee; --info-dim: #123a44; --vip: #a78bfa; --vip-dim: #2e2352; --orange: #fb923c; --orange-dim: #4a2812; /* Priority chips */ --p0: #f87171; --p1: #fb923c; --p2: #fbbf24; --p3: #64748b; /* Space */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; /* Radius */ --r-1: 6px; --r-2: 8px; --r-3: 10px; --r-4: 12px; --r-5: 16px; /* Elevation */ --sh-1: 0 1px 2px rgba(0,0,0,.4); --sh-2: 0 4px 12px rgba(0,0,0,.35); --sh-3: 0 10px 30px rgba(0,0,0,.45); /* Typography */ --f-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif; --f-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace; /* Motion */ --ease: cubic-bezier(.16,1,.3,1); --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; /* Layout */ --sidebar-w: 216px; --topbar-h: 52px; --drawer-w: 480px; --topbar-bg: rgba(11,13,19,.85); } /* Nhóm tác vụ CS ①-⑥ (taxonomy) — màu dịu phân biệt trên chip */ :root { --tg-1: #7aa2f7; --tg-1-dim: #1d2b4d; /* Tài chính & số dư */ --tg-2: #9ece6a; --tg-2-dim: #22331c; /* Cấp phát tài sản */ --tg-3: #f7768e; --tg-3-dim: #3d1d26; /* Hỗ trợ & sự cố */ --tg-4: #e0af68; --tg-4-dim: #3a2d17; /* Chủ động & giữ khách */ --tg-5: #bb9af7; --tg-5-dim: #2e2347; /* Admin hệ thống */ --tg-6: #7dcfff; --tg-6-dim: #173142; /* Tư vấn / pre-sale */ } /* ============ THEMES (override qua data-theme trên ) ============ */ /* Mặc định (không data-theme) = Tối. Dưới đây: Đen (OLED), Sáng, Dịu mắt. */ /* ---- ĐEN (OLED true black) — tiết kiệm pin, tương phản sâu ---- */ :root[data-theme="black"] { --bg-0: #000000; --bg-1: #060709; --bg-2: #0c0e14; --bg-3: #14171f; --bg-4: #1c2029; --line-1: #191c25; --line-2: #262b38; --line-3: #333a4d; --tx-1: #f3f5fb; --tx-2: #b7bfd3; --tx-3: #7e879e; --tx-4: #4c5468; --topbar-bg: rgba(0,0,0,.88); } /* ---- SÁNG (trắng) — nền trắng, chữ đậm, tint nhạt cho chip ---- */ :root[data-theme="light"] { --bg-0: #e9edf3; --bg-1: #f4f6fa; --bg-2: #ffffff; --bg-3: #eaeef4; --bg-4: #dfe5ee; --line-1: #e4e9f1; --line-2: #d3dbe8; --line-3: #bcc7d9; --tx-1: #182031; --tx-2: #3f4a60; --tx-3: #6a7590; --tx-4: #9aa4ba; --ac: #3b5bdb; --ac-h: #2947c7; --ac-dim: #dbe2fb; --ok: #059669; --ok-dim: #d1fae5; --warn: #b45309; --warn-dim: #fef3c7; --danger: #dc2626; --danger-dim: #fee2e2; --info: #0e7490; --info-dim: #cffafe; --vip: #7c3aed; --vip-dim: #ede9fe; --orange: #ea580c; --orange-dim: #ffedd5; --p0: #dc2626; --p1: #ea580c; --p2: #b45309; --p3: #64748b; --sh-1: 0 1px 2px rgba(30,41,80,.08); --sh-2: 0 4px 12px rgba(30,41,80,.10); --sh-3: 0 10px 30px rgba(30,41,80,.14); --tg-1: #2f5bd0; --tg-1-dim: #dde5fb; --tg-2: #4d8a1f; --tg-2-dim: #e0f0cf; --tg-3: #c2364f; --tg-3-dim: #fbdde3; --tg-4: #9a6a13; --tg-4-dim: #f6e8c8; --tg-5: #7c4fd0; --tg-5-dim: #ece2fb; --tg-6: #0e7490; --tg-6-dim: #d3eef4; --topbar-bg: rgba(244,246,250,.85); } /* ---- DỊU MẮT (sepia ấm) — giảm ánh xanh, tương phản mềm, đỡ mỏi ---- */ :root[data-theme="sepia"] { --bg-0: #e6decd; --bg-1: #f2ebde; --bg-2: #faf5ea; --bg-3: #ece3d3; --bg-4: #e0d6c2; --line-1: #e2d8c4; --line-2: #d2c6ad; --line-3: #baac8f; --tx-1: #3a3226; --tx-2: #5c5442; --tx-3: #837a63; --tx-4: #a89e85; --ac: #9a6a2f; --ac-h: #7f5622; --ac-dim: #ecd9bf; --ok: #5c8a3a; --ok-dim: #dde6cb; --warn: #b07a1e; --warn-dim: #f0e3c3; --danger: #b5513f; --danger-dim: #ecd4cc; --info: #3f7d86; --info-dim: #d4e2e0; --vip: #8a6aa0; --vip-dim: #e3d8ea; --orange: #b3652c; --orange-dim: #eeddc6; --p0: #b5513f; --p1: #b3652c; --p2: #b07a1e; --p3: #837a63; --sh-1: 0 1px 2px rgba(80,60,30,.10); --sh-2: 0 4px 12px rgba(80,60,30,.12); --sh-3: 0 10px 30px rgba(80,60,30,.16); --tg-1: #3d6ab0; --tg-1-dim: #dce6f0; --tg-2: #5c8a3a; --tg-2-dim: #dde6cb; --tg-3: #b5513f; --tg-3-dim: #ecd4cc; --tg-4: #b07a1e; --tg-4-dim: #f0e3c3; --tg-5: #8a6aa0; --tg-5-dim: #e3d8ea; --tg-6: #3f7d86; --tg-6-dim: #d4e2e0; --topbar-bg: rgba(242,235,222,.85); }