/* tokens.css — bộ design token DUY NHẤT của dashboard (MISSION §9.2).
   Vì sao tách riêng: mọi màu/khoảng cách/bo góc đều lấy từ đây,
   đổi theme chỉ cần ghi đè biến — các file CSS khác không chứa hex trần. */

:root {
  /* thương hiệu — nông nghiệp, xanh lá trầm + kem */
  --brand-700: #14663D;
  --brand-600: #1B7F4E;
  --brand-500: #249A60;
  --brand-100: #E8F5EE;
  --brand-050: #F3FAF6;
  --accent-600: #E07A1F; /* CTKM, nhấn */
  /* nền & chữ */
  --bg: #FAFAF7;
  --surface: #FFFFFF;
  --surface-2: #F4F4F0;
  --border: #E6E4DD;
  --text: #1A1D1B;
  --text-muted: #6B7280;
  /* trạng thái */
  --ok: #1B7F4E;
  --warn: #D9A21B;
  --danger: #C6362F;
  --info: #2563EB;
  /* hình khối */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-2: 0 4px 12px rgba(16, 24, 40, .08);
  --font: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-base: 14px;
  --fs-sm: 13px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  /* màu chữ trên nền đậm + lớp phủ modal — bổ sung ngoài §9.2 (session chính chốt)
     để components.css không phải dùng white/black/rgba trần */
  --on-brand: #FFFFFF;   /* chữ trên nền brand/danger đậm */
  --on-warn: #1A1D1B;    /* chữ trên nền warn (amber) — nền sáng nên chữ tối cả 2 theme */
  --overlay: rgba(16, 24, 40, .45);
}

/* User chọn tay 'dark' (html[data-theme="dark"]) — ưu tiên cao nhất */
:root[data-theme="dark"] {
  --bg: #14171A;
  --surface: #1C2024;
  --surface-2: #232830;
  --border: #2A3038;
  --text: #E8EAE9;
  --text-muted: #9AA3AE;
  --brand-100: #12352447;
  --brand-050: #0F241A;
  --overlay: rgba(0, 0, 0, .6);
}

/* Chế độ tối THEO HỆ ĐIỀU HÀNH: chỉ áp khi user CHƯA chọn tay
   (html không có data-theme). :not([data-theme="light"]) để lựa chọn
   tay 'light' vẫn thắng OS dark — acceptance: dark đúng cả 2 chiều. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14171A;
    --surface: #1C2024;
    --surface-2: #232830;
    --border: #2A3038;
    --text: #E8EAE9;
    --text-muted: #9AA3AE;
    --brand-100: #12352447;
    --brand-050: #0F241A;
    --overlay: rgba(0, 0, 0, .6);
  }
}