/* ========================================================================== CaBo — Design tokens (nguồn chân lý duy nhất cho màu sắc / font / spacing) Load thứ tự: bootstrap.min.css → variables.css → base.css → components.css → pages/.css ========================================================================== */ :root{ /* Nền & bề mặt */ --bg:#F2F5F7; --surface:#FFFFFF; --surface-2:#F7FAFB; --surface-3:#EDF2F4; --ink:#0B1723; --ink-2:#122334; --ink-3:#1B3247; /* Chữ */ --text:#12212F; --text-2:#48606F; --text-3:#8AA0AD; /* Viền */ --border:#E1E9ED; --border-2:#EEF3F5; /* Màu chủ đạo (teal-emerald) */ --accent:#0E9683; --accent-2:#3ECFB2; --accent-dark:#0A7264; --accent-subtle:#E3F5F1; --accent-ring:rgba(14,150,131,.18); /* Trạng thái booking (dispatch) */ --st-new:#5B5BD6; --st-new-bg:#EEEEFB; --st-assign:#C77414; --st-assign-bg:#FCF1E2; --st-accept:#0B7DBB; --st-accept-bg:#E4F3FB; --st-pickup:#8046D8; --st-pickup-bg:#F1EAFC; --st-run:#D3541F; --st-run-bg:#FCEBE2; --st-done:#0F8A54; --st-done-bg:#E4F6EC; --st-cancel:#CC3355; --st-cancel-bg:#FBE7EC; /* Ngữ nghĩa khác */ --err:#CC3355; --err-bg:#FBE7EC; --warn:#C77414; --warn-bg:#FCF1E2; --star:#F5A623; --assign:#C77414; --assign-bg:#FCF1E2; --run:#D3541F; --done:#0F8A54; /* Typography */ --font-display:'Lexend','Noto Sans SC',sans-serif; --font-body:'Be Vietnam Pro','Noto Sans SC',sans-serif; --font-mono:'JetBrains Mono',monospace; /* Bo góc, bóng, easing */ --r-md:12px; --r-lg:16px; --r-full:9999px; --shadow-sm:0 1px 2px rgba(11,23,35,.05); --shadow-md:0 6px 20px -6px rgba(11,23,35,.12); --shadow-lg:0 24px 60px -12px rgba(11,23,35,.25); --shadow:0 10px 30px -10px rgba(11,23,35,.15); --ease:cubic-bezier(.16,1,.3,1); /* Layout */ --sidebar-w:242px; } /* Dark mode — hiện dùng ở app tài xế (toggle class .dark trên ) */ html.dark{ --bg:#0B1220; --surface:#121B2C; --surface-2:#182338; --text:#EAF1F6; --text-2:#9FB2C2; --text-3:#5F7488; --border:#22304A; --accent-subtle:rgba(62,207,178,.12); --assign-bg:rgba(199,116,20,.16); --shadow:0 10px 30px -10px rgba(0,0,0,.5); }