/* WebTui Admin Kit — token thiết kế. Màu chính theo preset [data-brand], sáng/tối theo [data-theme] hoặc hệ điều hành. */
:root{
  --font:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --fs-xs:11.5px;--fs-sm:12.5px;--fs:13.5px;--fs-md:15px;--fs-lg:18px;--fs-xl:22px;--fs-2xl:28px;
  --lh:1.55;
  --r-xs:6px;--r-sm:8px;--r:12px;--r-lg:16px;--r-xl:20px;--r-full:999px;
  --side-w:264px;--side-mini:76px;--top-h:68px;--tabs-h:64px;

  /* Thang trung tính */
  --n-0:#ffffff;--n-25:#fbfbfd;--n-50:#f5f6fa;--n-100:#eef0f5;--n-150:#e6e9f0;--n-200:#dde1ea;--n-300:#c5cbd8;--n-400:#9aa2b4;--n-500:#6b7387;--n-600:#4d5568;--n-700:#363e51;--n-800:#232a3b;--n-900:#151a28;--n-950:#0c1019;

  /* Màu chính mặc định: Chàm WebTui (gần #5a4ff3 của logo) */
  --p-50:#eff0ff;--p-100:#e2e4ff;--p-200:#c9ccfe;--p-300:#a7aafc;--p-400:#8583f8;--p-500:#6862f1;--p-600:#5448e4;--p-700:#453aca;--p-800:#3a31a3;--p-900:#322d81;
  --p:var(--p-600);--p-hover:var(--p-700);--on-p:#fff;--p-text:var(--p-700);--p-soft:var(--p-50);--p-soft-2:var(--p-100);--p-ring:rgba(84,72,228,.28);
  --grad:linear-gradient(120deg,#1c7cff 0%,#5a4ff3 55%,#8a4cf7 100%);

  /* Bề mặt */
  --bg:var(--n-50);--surface:var(--n-0);--surface-2:var(--n-25);--surface-3:var(--n-100);--hover:var(--n-50);
  --border:var(--n-150);--border-2:var(--n-200);--divider:var(--n-100);
  /* Chữ đậm, gần đen (trước --text-2/3 xám nhạt nên chữ trông mờ "đà đà") */
  --text:#0b0f1a;--text-2:#262c3b;--text-3:#4f5669;--text-4:#7d8598;
  --side-bg:var(--n-0);--side-text:#2a3040;--side-caption:var(--n-400);--side-hover:var(--n-50);
  --scrim:rgba(12,16,25,.48);

  /* Sắc thái trạng thái (nền nhạt + chữ đậm, đạt tương phản AA) */
  --t-amber-bg:#fff4dc;--t-amber-fg:#8f5104;--t-amber-dot:#f0a020;
  --t-blue-bg:#e7f0ff;--t-blue-fg:#1b58b4;--t-blue-dot:#3b82f6;
  --t-violet-bg:#f1ebff;--t-violet-fg:#6534bf;--t-violet-dot:#8b5cf6;
  --t-green-bg:#e3f5ec;--t-green-fg:#146c43;--t-green-dot:#22a063;
  --t-red-bg:#fdeaea;--t-red-fg:#b01f1f;--t-red-dot:#e5484d;
  --t-gray-bg:#eef0f4;--t-gray-fg:#4f586b;--t-gray-dot:#9aa2b4;
  --ok:#16a34a;--warn:#d97706;--err:#dc2626;--info:#2563eb;

  /* Biểu đồ */
  --c1:var(--p-500);--c2:#22a063;--c3:#f0a020;--c4:#e5484d;--c5:#06b6d4;--c6:#a855f7;

  --sh-1:0 1px 2px rgba(16,24,40,.04);
  --sh-2:0 1px 2px rgba(16,24,40,.04),0 6px 16px -10px rgba(16,24,40,.14);
  --sh-3:0 18px 44px -16px rgba(16,24,40,.28),0 2px 6px rgba(16,24,40,.06);
  --focus:0 0 0 3px var(--p-ring);
  color-scheme:light;
}

/* Preset màu chính — sắc độ --p chọn để chữ trắng trên nút và chữ màu trên nền trắng đều ≥ 4.5:1 */
[data-brand=blue]{--p-50:#eef5ff;--p-100:#dbe9ff;--p-200:#bcd6fe;--p-300:#8ebbfc;--p-400:#5b98f8;--p-500:#3a78f0;--p-600:#2460dc;--p-700:#1d4db4;--p-800:#1d418f;--p-900:#1c3872;--p-ring:rgba(36,96,220,.28)}
[data-brand=orange]{--p-50:#fff4ec;--p-100:#ffe6d2;--p-200:#ffc9a3;--p-300:#fea36a;--p-400:#fb7c35;--p-500:#f05f14;--p-600:#c9480b;--p-700:#a33a0d;--p-800:#833112;--p-900:#6b2a12;--p-ring:rgba(201,72,11,.28)}
[data-brand=emerald]{--p-50:#ebfaf3;--p-100:#d0f2e2;--p-200:#a3e4c8;--p-300:#6acfa8;--p-400:#35b486;--p-500:#16986d;--p-600:#0b7a57;--p-700:#0a6248;--p-800:#0b4e3b;--p-900:#0a4031;--p-ring:rgba(11,122,87,.28)}
[data-brand=rose]{--p-50:#fff0f3;--p-100:#ffe0e7;--p-200:#ffc2d0;--p-300:#fe93ac;--p-400:#fa5d82;--p-500:#ef3564;--p-600:#d01d4e;--p-700:#ae1742;--p-800:#91173c;--p-900:#7b1737;--p-ring:rgba(208,29,78,.28)}

/* Chế độ tối */
:root[data-theme=dark]{
  --bg:#0c1019;--surface:#141926;--surface-2:#171d2b;--surface-3:#1d2434;--hover:#1b2130;
  --border:#252d3f;--border-2:#2f384d;--divider:#1f2637;
  --text:#e8ebf3;--text-2:#b2b9cb;--text-3:#8d95aa;--text-4:#6b7389;
  --side-bg:#10141f;--side-text:#aeb5c8;--side-caption:#6b7389;--side-hover:#1a2030;
  --p:var(--p-600);--p-hover:var(--p-500);--p-text:var(--p-300);--p-soft:color-mix(in srgb,var(--p-400) 15%,transparent);--p-soft-2:color-mix(in srgb,var(--p-400) 24%,transparent);
  --t-amber-bg:rgba(240,160,32,.16);--t-amber-fg:#f6c56b;--t-blue-bg:rgba(59,130,246,.18);--t-blue-fg:#93bbff;--t-violet-bg:rgba(139,92,246,.2);--t-violet-fg:#c3a8ff;
  --t-green-bg:rgba(34,160,99,.18);--t-green-fg:#79d8a6;--t-red-bg:rgba(229,72,77,.18);--t-red-fg:#ff9b9e;--t-gray-bg:rgba(154,162,180,.16);--t-gray-fg:#c3c9d6;
  --scrim:rgba(0,0,0,.6);
  --sh-1:0 1px 2px rgba(0,0,0,.3);--sh-2:0 1px 2px rgba(0,0,0,.3),0 8px 20px -12px rgba(0,0,0,.6);--sh-3:0 20px 50px -16px rgba(0,0,0,.7);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --bg:#0c1019;--surface:#141926;--surface-2:#171d2b;--surface-3:#1d2434;--hover:#1b2130;
    --border:#252d3f;--border-2:#2f384d;--divider:#1f2637;
    --text:#e8ebf3;--text-2:#b2b9cb;--text-3:#8d95aa;--text-4:#6b7389;
    --side-bg:#10141f;--side-text:#aeb5c8;--side-caption:#6b7389;--side-hover:#1a2030;
    --p:var(--p-600);--p-hover:var(--p-500);--p-text:var(--p-300);--p-soft:color-mix(in srgb,var(--p-400) 15%,transparent);--p-soft-2:color-mix(in srgb,var(--p-400) 24%,transparent);
    --t-amber-bg:rgba(240,160,32,.16);--t-amber-fg:#f6c56b;--t-blue-bg:rgba(59,130,246,.18);--t-blue-fg:#93bbff;--t-violet-bg:rgba(139,92,246,.2);--t-violet-fg:#c3a8ff;
    --t-green-bg:rgba(34,160,99,.18);--t-green-fg:#79d8a6;--t-red-bg:rgba(229,72,77,.18);--t-red-fg:#ff9b9e;--t-gray-bg:rgba(154,162,180,.16);--t-gray-fg:#c3c9d6;
    --scrim:rgba(0,0,0,.6);
    --sh-1:0 1px 2px rgba(0,0,0,.3);--sh-2:0 1px 2px rgba(0,0,0,.3),0 8px 20px -12px rgba(0,0,0,.6);--sh-3:0 20px 50px -16px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}