/*
  TOKENS — biến màu/bo góc/shadow dùng chung toàn app.
  Nguồn: app_design_system_and_ux_ui.md (mục 2 — Design Tokens & Visual Styling).
  Đây là NƠI DUY NHẤT khai báo giá trị màu/bo góc/shadow — mọi file CSS khác chỉ dùng var(--...).
  Xem .claude/skills/design-system/SKILL.md trước khi đổi giá trị ở đây.

  Bảng màu hiện tại: "Xanh dương nhạt" — accent xanh dương thuần (#3B82F6), nền xanh sương,
  chữ xanh navy. Thay cho bộ indigo/tím cũ (#4F46E5) từ 2026-09-09.
*/
:root {
  --bg: #F0F5FC;
  --bg-grad-a: #E8F1FC;
  --bg-grad-b: #EAF3FF;
  --surface: #FFFFFF;
  --surface-muted: #F2F7FD;
  --surface-dim: #EDEFF3;
  --ink: #0F2A47;
  --ink-muted: #7089A6;
  --ink-dim: #AAB6C4;
  --line: rgba(219, 232, 246, .9);

  --accent: #3B82F6;
  --accent-2: #60A5FA;
  --accent-soft: #DCEAFE;
  --accent-strong: #2563EB;
  --accent-ink: #1D4ED8;
  --accent-shadow: rgba(59, 130, 246, .45);

  --amber: #96690B;
  --amber-soft: #FBEFD3;
  --sage: #2F8A69;
  --sage-2: #4FB08C;
  --sage-soft: #D6F0E5;
  --red: #D64545;
  --red-soft: #FCE4E4;
  --party: #C2185B;
  --party-soft: #FFE1EF;
  --violet: #7C6BF0;
  --violet-soft: #E8E6FE;

  --radius: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-soft: 0 20px 45px -20px rgba(15, 42, 71, .18), 0 4px 12px -4px rgba(15, 42, 71, .07);
  --shadow-card: 0 10px 24px -18px rgba(15, 42, 71, .45), 0 2px 6px -4px rgba(15, 42, 71, .08);
}