/* Design tokens (DESIGN.md là canonical). 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. */ :root { color-scheme: light; --bg: #F4F6F8; --surface: #FFFFFF; --surface-2: #EEF1F4; --text: #0E1419; --muted: #5A6572; --faint: #8A94A0; --border: #E4E8EC; --border-strong: #D2D8DE; --accent: #1F6FEB; --accent-press: #1A5FD0; --accent-soft: rgba(31, 111, 235, .10); --on-accent: #FFFFFF; --danger: #DC2640; --success: #11A05A; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 9999px; } /* 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: #0E1116; --surface: #161A20; --surface-2: #1B2027; --text: #E7EAEE; --muted: #9AA6B2; --faint: #6B7682; --border: #252B33; --border-strong: #323A44; --accent: #4F8DF7; --accent-press: #3D7BE0; --accent-soft: rgba(79, 141, 247, .14); --on-accent: #08101E; --danger: #F2557A; --success: #34C77B; } /* 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: #0E1116; --surface: #161A20; --surface-2: #1B2027; --text: #E7EAEE; --muted: #9AA6B2; --faint: #6B7682; --border: #252B33; --border-strong: #323A44; --accent: #4F8DF7; --accent-press: #3D7BE0; --accent-soft: rgba(79, 141, 247, .14); --on-accent: #08101E; --danger: #F2557A; --success: #34C77B; } }