/* ============================================================
   BẢN SAO CÓ PHIÊN BẢN của token Admin Section CMS.
   Nguồn : section-cms/admin/src/styles/tokens.css  @ 849152c (06/10/2026)
   Lý do : docs/ket-noi-section-cms.md §3 — Helper dùng chung token Admin với
           Section CMS, ghim phiên bản và phục vụ tại chỗ, không đọc CSS từ
           website production của nhau.
   Quy tắc: KHÔNG sửa tay trong file này. Cập nhật = chép lại từ nguồn, đổi
           số phiên bản trong tên file và ghi lại commit nguồn ở đây.
           Component của Helper (nd-helper-ui.v1.css) chỉ dùng tầng SEMANTIC.
   ============================================================ */

/* ============================================================
   Token của ADMIN — cố ý TÁCH khỏi bộ nhận diện của khách hàng.

   Vì sao tách: Admin là công cụ của Nam Digital, không phải một trang trên
   website khách. Nếu vỏ Admin dùng token của khách thì mỗi khách có một Admin
   trông khác nhau, và khách chọn màu thương hiệu vàng chanh sẽ được một Admin
   không đọc nổi — lỗi mà chính khách gây ra cho chính mình, nhưng ta phải sửa.

   Bộ nhận diện của khách CHỈ xuất hiện trong khung xem trước, và ở đó nó nằm
   trong một tài liệu riêng (iframe) nên không có đường rò ra vỏ Admin.

   Vẫn giữ nguyên kỷ luật ba tầng của dự án:
     primitive  --ad-gray-700     giá trị thô · component KHÔNG dùng
     semantic   --ad-fg           vai trò · có sáng/tối · component CHỈ dùng tầng này
     component  --ad-btn-bg       ghi đè cục bộ
   ============================================================ */

:root {
  /* ---------- primitive ---------- */
  --ad-gray-0:   #ffffff;
  --ad-gray-25:  #fcfcfd;
  --ad-gray-50:  #f7f8fa;
  --ad-gray-100: #eef0f4;
  --ad-gray-200: #dfe3ea;
  --ad-gray-300: #c6ccd8;
  --ad-gray-400: #98a1b2;
  --ad-gray-500: #6b7488;
  --ad-gray-600: #4c5464;
  --ad-gray-700: #363d4a;
  --ad-gray-800: #232833;
  --ad-gray-900: #161a21;
  --ad-gray-950: #0e1116;

  /* Chàm — màu của công cụ, không phải màu của khách. */
  --ad-indigo-50:  #eef2ff;
  --ad-indigo-100: #e0e7ff;
  --ad-indigo-300: #a5b4fc;
  --ad-indigo-400: #818cf8;
  --ad-indigo-500: #6366f1;
  --ad-indigo-600: #4f46e5;
  --ad-indigo-700: #4338ca;

  --ad-green-100: #dcfce7;
  --ad-green-400: #4ade80;
  --ad-green-600: #16a34a;
  --ad-green-700: #15803d;

  --ad-amber-100: #fef3c7;
  --ad-amber-400: #fbbf24;
  --ad-amber-700: #b45309;

  --ad-red-100: #fee2e2;
  --ad-red-400: #f87171;
  --ad-red-600: #dc2626;
  --ad-red-700: #b91c1c;

  --ad-space-1: 4px;
  --ad-space-2: 8px;
  --ad-space-3: 12px;
  --ad-space-4: 16px;
  --ad-space-5: 24px;
  --ad-space-6: 32px;
  --ad-space-7: 48px;

  --ad-radius-sm: 6px;
  --ad-radius:    10px;
  --ad-radius-lg: 14px;
  --ad-radius-full: 999px;

  --ad-font: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue",
             Arial, "Noto Sans", sans-serif;
  --ad-font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, monospace;

  --ad-text-xs: 12px;
  --ad-text-sm: 13px;
  --ad-text-md: 14px;
  --ad-text-lg: 16px;
  --ad-text-xl: 20px;
  --ad-text-2xl: 26px;

  --ad-z-dropdown: 40;
  --ad-z-dialog:   60;
  --ad-z-toast:    80;

  /* ---------- semantic · chế độ sáng ---------- */
  --ad-canvas:        var(--ad-gray-50);
  --ad-surface:       var(--ad-gray-0);
  --ad-surface-sunk:  var(--ad-gray-100);
  --ad-surface-hover: var(--ad-gray-100);
  --ad-fg:            var(--ad-gray-900);
  --ad-fg-muted:      var(--ad-gray-500);
  --ad-fg-faint:      var(--ad-gray-400);
  --ad-border:        var(--ad-gray-200);
  --ad-border-strong: var(--ad-gray-300);

  --ad-accent:        var(--ad-indigo-600);
  --ad-accent-hover:  var(--ad-indigo-700);
  --ad-accent-soft:   var(--ad-indigo-50);
  --ad-fg-on-accent:  var(--ad-gray-0);

  --ad-ok:      var(--ad-green-700);
  --ad-ok-soft: var(--ad-green-100);
  --ad-warn:      var(--ad-amber-700);
  --ad-warn-soft: var(--ad-amber-100);
  --ad-danger:      var(--ad-red-600);
  --ad-danger-hover: var(--ad-red-700);
  --ad-danger-soft: var(--ad-red-100);
  --ad-fg-on-danger: var(--ad-gray-0);

  --ad-scrim: rgb(14 17 22 / 0.45);
  --ad-shadow-sm: 0 1px 2px rgb(16 20 28 / 0.06);
  --ad-shadow:    0 4px 16px rgb(16 20 28 / 0.10);
  --ad-shadow-lg: 0 18px 48px rgb(16 20 28 / 0.18);


  /* Chrome nằm TRÊN ẢNH của khách (khung cắt, nút trên ảnh). Cố ý KHÔNG đổi
     theo sáng/tối: nền ở đây là ảnh, không phải giao diện — một khung cắt màu
     tối trên một tấm ảnh chụp đêm là một khung cắt vô hình. */
  --ad-tren-anh:      #ffffff;
  --ad-tren-anh-vien: #4c5464;
  --ad-tren-anh-toi:  rgb(0 0 0 / 0.45);

  /* Viền focus là một VAI TRÒ, không phải trang trí: nó là thứ duy nhất cho
     người dùng bàn phím biết mình đang ở đâu. */
  --ad-focus: var(--ad-indigo-500);

  color-scheme: light;
}

/* ---------- semantic · chế độ tối ----------
   Định nghĩa hai lần, giống hệt cách trang công khai làm: một lần theo cài đặt
   hệ điều hành, một lần theo lựa chọn tay. Chỉ có media query thì nút đổi giao
   diện trong Admin không thắng nổi cài đặt hệ điều hành. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ad-canvas:        var(--ad-gray-950);
    --ad-surface:       var(--ad-gray-900);
    --ad-surface-sunk:  var(--ad-gray-950);
    --ad-surface-hover: var(--ad-gray-800);
    --ad-fg:            var(--ad-gray-50);
    --ad-fg-muted:      var(--ad-gray-400);
    --ad-fg-faint:      var(--ad-gray-500);
    --ad-border:        var(--ad-gray-800);
    --ad-border-strong: var(--ad-gray-700);

    /* Chàm 600 trên nền tối chỉ đạt tương phản ~3,4 — cùng bài học đã ghi
       trong CLAUDE.md về brand.500. Nền tối dùng bậc NHẠT hơn. */
    --ad-accent:       var(--ad-indigo-400);
    --ad-accent-hover: var(--ad-indigo-300);
    --ad-accent-soft:  color-mix(in srgb, var(--ad-indigo-400) 16%, transparent);
    --ad-fg-on-accent: var(--ad-gray-950);

    --ad-ok:        var(--ad-green-400);
    --ad-ok-soft:   color-mix(in srgb, var(--ad-green-400) 16%, transparent);
    --ad-warn:      var(--ad-amber-400);
    --ad-warn-soft: color-mix(in srgb, var(--ad-amber-400) 16%, transparent);
    --ad-danger:       var(--ad-red-400);
    --ad-danger-hover: #fca5a5;
    --ad-danger-soft:  color-mix(in srgb, var(--ad-red-400) 16%, transparent);
    --ad-fg-on-danger: var(--ad-gray-950);

    --ad-scrim: rgb(0 0 0 / 0.6);
    --ad-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --ad-shadow:    0 4px 16px rgb(0 0 0 / 0.45);
    --ad-shadow-lg: 0 18px 48px rgb(0 0 0 / 0.6);
    --ad-focus: var(--ad-indigo-300);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ad-canvas:        var(--ad-gray-950);
  --ad-surface:       var(--ad-gray-900);
  --ad-surface-sunk:  var(--ad-gray-950);
  --ad-surface-hover: var(--ad-gray-800);
  --ad-fg:            var(--ad-gray-50);
  --ad-fg-muted:      var(--ad-gray-400);
  --ad-fg-faint:      var(--ad-gray-500);
  --ad-border:        var(--ad-gray-800);
  --ad-border-strong: var(--ad-gray-700);

  --ad-accent:       var(--ad-indigo-400);
  --ad-accent-hover: var(--ad-indigo-300);
  --ad-accent-soft:  color-mix(in srgb, var(--ad-indigo-400) 16%, transparent);
  --ad-fg-on-accent: var(--ad-gray-950);

  --ad-ok:        var(--ad-green-400);
  --ad-ok-soft:   color-mix(in srgb, var(--ad-green-400) 16%, transparent);
  --ad-warn:      var(--ad-amber-400);
  --ad-warn-soft: color-mix(in srgb, var(--ad-amber-400) 16%, transparent);
  --ad-danger:       var(--ad-red-400);
  --ad-danger-hover: #fca5a5;
  --ad-danger-soft:  color-mix(in srgb, var(--ad-red-400) 16%, transparent);
  --ad-fg-on-danger: var(--ad-gray-950);

  --ad-scrim: rgb(0 0 0 / 0.6);
  --ad-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --ad-shadow:    0 4px 16px rgb(0 0 0 / 0.45);
  --ad-shadow-lg: 0 18px 48px rgb(0 0 0 / 0.6);
  --ad-focus: var(--ad-indigo-300);

  color-scheme: dark;
}