/* Design tokens — Dòng (DESIGN.md là canonical; giá trị lấy từ bộ export). Brand = xanh lá #00B86B (KHÔNG còn quy ước xanh/đỏ = tăng/giảm tài chính). Chủ đề: - Mặc định THEO HỆ THỐNG (prefers-color-scheme) khi người dùng chưa chọn. - Người dùng chọn thủ công → ghi đè bằng data-theme="light"|"dark" trên . Biến tối khai báo 2 nơi (selector thủ công + media query) — đồng bộ khi sửa. Giữ TÊN biến (--accent…) để CSS hiện có chạy nguyên; chỉ đổi GIÁ TRỊ + thêm token mới (--surface-3/--warning/--info/--shadow) cho component EV. */ :root { color-scheme: light; /* Nền & bề mặt (page hơi ngả slate để card trắng vẫn nổi với CSS hiện có; Phase 2 reskin sẽ căn đúng từng trang theo export). */ --bg: #F2F5F8; --surface: #FFFFFF; --surface-2: #EAF0F4; --surface-3: #F1F5F9; --text: #0F172A; --muted: #5D6B7E; --faint: #94A3B8; --border: #E5E9EF; --border-strong: #CBD5E1; /* Brand (xanh lá) — thay accent xanh dương tài chính. */ --accent: #00B86B; --accent-press: #02A763; --accent-soft: rgba(0, 184, 107, .10); --on-accent: #FFFFFF; /* Cảm xúc UI (KHÔNG mang nghĩa thị trường). */ --danger: #F43F5E; --danger-soft: rgba(244, 63, 94, .12); --success: #11A05A; --warning: #F59E0B; --warning-soft: rgba(245, 158, 11, .12); --info: #0EA5E9; --info-soft: rgba(14, 165, 233, .12); --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06); --shadow: 0 1px 3px rgba(15, 23, 42, .09), 0 1px 2px rgba(15, 23, 42, .05); --shadow-lg: 0 4px 16px rgba(15, 23, 42, .12); --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 18px; --r-pill: 9999px; /* Thanh cuộn: mảnh + màu thương hiệu (dùng var(--accent) nên TỰ đổi theo sáng/tối, không cần khai báo lại ở [data-theme=dark]). Nghỉ: accent mờ (thanh thoát); hover: đặc. */ --scrollbar-size: 4px; --scrollbar-thumb: color-mix(in srgb, var(--accent) 45%, transparent); --scrollbar-thumb-hover: var(--accent); } /* Tối (giá trị dùng chung cho cả chọn-thủ-công lẫn theo-hệ-thống). */ [data-theme=dark] { color-scheme: dark; --bg: #0A0E13; --surface: #11161D; --surface-2: #161D27; --surface-3: #0E131A; --text: #E6EDF3; --muted: #97A4B3; --faint: #5F6B7C; --border: #1E2733; --border-strong: #2B3645; --accent: #00D67D; --accent-press: #00B86B; --accent-soft: rgba(0, 214, 125, .14); --on-accent: #04261A; --danger: #FB7185; --danger-soft: rgba(251, 113, 133, .14); --success: #34C77B; --warning: #FBBF24; --warning-soft: rgba(251, 191, 36, .14); --info: #38BDF8; --info-soft: rgba(56, 189, 248, .14); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 2px 8px rgba(0, 0, 0, .5); --shadow-lg: 0 8px 24px rgba(0, 0, 0, .6); } /* Chưa chọn thủ công (:not([data-theme])) → theo hệ thống. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --bg: #0A0E13; --surface: #11161D; --surface-2: #161D27; --surface-3: #0E131A; --text: #E6EDF3; --muted: #97A4B3; --faint: #5F6B7C; --border: #1E2733; --border-strong: #2B3645; --accent: #00D67D; --accent-press: #00B86B; --accent-soft: rgba(0, 214, 125, .14); --on-accent: #04261A; --danger: #FB7185; --danger-soft: rgba(251, 113, 133, .14); --success: #34C77B; --warning: #FBBF24; --warning-soft: rgba(251, 191, 36, .14); --info: #38BDF8; --info-soft: rgba(56, 189, 248, .14); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 2px 8px rgba(0, 0, 0, .5); --shadow-lg: 0 8px 24px rgba(0, 0, 0, .6); } }