/* Token màu/kích thước dùng chung giữa style.css (trang chính) và login.html
   (trang đăng nhập có <style> riêng vì cần render độc lập, không phụ thuộc
   session). Đổi màu thương hiệu thì chỉ cần sửa ở đây.

   Bảng màu "phần mềm hiện đại" — nền tối trung tính, phẳng, viền mảnh, đổ
   bóng rất nhẹ, chỉ 1 màu nhấn cam thương hiệu dùng có chừng mực (không
   gradient tràn lan). Cố định — không đổi theo prefers-color-scheme. */
:root {
  --bg: #1a1a1d;
  --card-bg: #232327;
  --card-bg-raised: #2c2c31;
  --text: #f5f5f6;
  --muted: #a3a3ab;
  --border: #38383f;
  --accent: #f97316;
  --accent-hover: #fb923c;
  --accent-2: #fbbf24;
  --accent-gradient: var(--accent);
  --accent-light: rgba(249, 115, 22, 0.14);
  --accent-contrast: #ffffff;
  --danger: #f87171;
  --danger-light: rgba(248, 113, 113, 0.14);
  --success: #34d399;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.5);
  --transition: all 0.15s ease;
  --topbar-bg: rgba(26, 26, 29, 0.85);
  /* Typography scale */
  --font-xs: 12px;
  --font-sm: 13px;
  --font-base: 14px;
  --font-md: 15px;
  --font-lg: 17px;
  --font-xl: 24px;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  /* Select arrow */
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a3a3ab' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Chuyển trang mượt như hiệu ứng Morph — bấm 1 link nội bộ (trang chủ, topbar
   nav, đăng nhập...) sẽ tự crossfade sang trang mới thay vì trắng/đen giật 1
   nhịp. Trình duyệt chưa hỗ trợ (Firefox, Safari cũ) sẽ tự bỏ qua khối này,
   quay về hành vi chuyển trang bình thường như trước — không cần js, không
   rủi ro, không cần kiểm tra hỗ trợ. */
@view-transition {
  navigation: auto;
}

/* Logo "neo" lại xuyên suốt các trang thay vì crossfade cùng phần còn lại của
   trang — giữ đúng cảm giác 1 vật thể trôi mượt xuyên suốt hành trình, giống
   cách chai rượu di chuyển liền mạch qua từng slide trong video tham khảo,
   thay vì đứng yên rồi mờ dần/hiện lại. */
.topbar-logo {
  view-transition-name: brand-logo;
}