/* ==========================================================================
   Selltool.vn — Design tokens
   Sáng: :root   ·   Tối: [data-theme="dark"] (chỉ dùng ở khu Khách hàng & Quản trị)
   ========================================================================== */
:root {
  /* ---- Brand scale (gốc #5b4cf5 = 600, đồng bộ email) ---- */
  --brand-50:  #f2f1fe;
  --brand-100: #e6e3fe;
  --brand-200: #cfc9fd;
  --brand-300: #b0a6fb;
  --brand-400: #8c7ff8;
  --brand-500: #7062f7;
  --brand-600: #5b4cf5;
  --brand-700: #4b3ce0;
  --brand-800: #3d31b5;
  --brand-900: #312a8c;
  --brand-950: #1d1952;

  /* ---- Trạng thái ---- */
  --success-600: #16a34a;  --success-700: #15803d; --success-50: #ecfdf3; --success-200: #bbf7d0;
  --warning-500: #f59e0b;  --warning-700: #b45309; --warning-50: #fffbeb; --warning-200: #fde68a;
  --danger-600:  #dc2626;  --danger-700:  #b91c1c; --danger-50:  #fef2f2; --danger-200:  #fecaca;
  --info-600:    #2563eb;  --info-700:    #1d4ed8; --info-50:    #eff6ff; --info-200:    #bfdbfe;
  --neutral-50:  #f3f4f6;  --neutral-200: #e5e7eb; --neutral-600: #4b5563;

  /* ---- Ngữ nghĩa (dùng các biến này trong component) ---- */
  --color-bg:            #f6f7fb;
  --color-surface:       #ffffff;
  --color-surface-2:     #fafbfd;   /* nền phụ trong thẻ: header bảng, ô readonly */
  --color-surface-hover: #f3f4f9;
  --color-border:        #e7e9f0;
  --color-border-strong: #d4d7e2;
  --color-text:          #111827;
  --color-text-2:        #374151;
  --color-text-3:        #6b7280;
  --color-text-inverse:  #ffffff;

  --color-primary:        var(--brand-600);
  --color-primary-hover:  var(--brand-700);
  --color-primary-soft:   var(--brand-50);
  --color-primary-soft-2: var(--brand-100);
  --color-primary-text:   var(--brand-700);   /* chữ màu brand trên nền sáng — AA */

  --color-success: var(--success-600); --color-success-soft: var(--success-50); --color-success-text: var(--success-700);
  --color-warning: var(--warning-500); --color-warning-soft: var(--warning-50); --color-warning-text: var(--warning-700);
  --color-danger:  var(--danger-600);  --color-danger-soft:  var(--danger-50);  --color-danger-text:  var(--danger-700);
  --color-info:    var(--info-600);    --color-info-soft:    var(--info-50);    --color-info-text:    var(--info-700);
  --color-muted-soft: var(--neutral-50); --color-muted-text: var(--neutral-600);

  --color-focus: var(--brand-500);
  --color-overlay: rgba(17, 24, 39, .48);
  --skeleton-a: #eceef4;
  --skeleton-b: #f6f7fb;

  /* ---- Chữ ---- */
  --font-sans: 'Be Vietnam Pro', 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --fs-xs: 12px;  --lh-xs: 16px;
  --fs-sm: 13px;  --lh-sm: 20px;
  --fs-md: 14px;  --lh-md: 22px;   /* chữ thân mặc định */
  --fs-lg: 16px;  --lh-lg: 24px;
  --fs-xl: 18px;  --lh-xl: 28px;
  --fs-2xl: 22px; --lh-2xl: 30px;
  --fs-3xl: 28px; --lh-3xl: 36px;
  --fs-4xl: 36px; --lh-4xl: 44px;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* ---- Khoảng cách (thang 4px) ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  /* ---- Bo góc ---- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;   /* input, nút */
  --radius-lg: 14px;   /* thẻ, modal */
  --radius-full: 999px;

  /* ---- Bóng (rất nhẹ) ---- */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .05);
  --shadow-md: 0 4px 12px -2px rgba(16, 24, 40, .07), 0 2px 4px -2px rgba(16, 24, 40, .04);
  --shadow-lg: 0 16px 40px -8px rgba(16, 24, 40, .16), 0 4px 10px -4px rgba(16, 24, 40, .06);
  --ring: 0 0 0 3px rgba(91, 76, 245, .28);
  --ring-danger: 0 0 0 3px rgba(220, 38, 38, .2);

  /* ---- Bố cục ---- */
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 64px;
  --content-max: 1200px;
  --z-sticky: 20; --z-drawer: 40; --z-modal: 50; --z-toast: 60; --z-dropdown: 30;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur: 160ms;

  color-scheme: light;
}

/* ==========================================================================
   Dark mode — khu Khách hàng & Quản trị
   ========================================================================== */
[data-theme="dark"] {
  --color-bg:            #0c0e15;
  --color-surface:       #141720;
  --color-surface-2:     #181b26;
  --color-surface-hover: #1e2230;
  --color-border:        #262a38;
  --color-border-strong: #353a4c;
  --color-text:          #eef0f6;
  --color-text-2:        #c6cad6;
  --color-text-3:        #8d93a6;
  --color-text-inverse:  #ffffff;

  --color-primary:        var(--brand-500);
  --color-primary-hover:  var(--brand-400);
  --color-primary-soft:   rgba(112, 98, 247, .14);
  --color-primary-soft-2: rgba(112, 98, 247, .24);
  --color-primary-text:   var(--brand-300);

  --color-success-soft: rgba(22, 163, 74, .14);  --color-success-text: #4ade80;
  --color-warning-soft: rgba(245, 158, 11, .14); --color-warning-text: #fbbf24;
  --color-danger-soft:  rgba(220, 38, 38, .16);  --color-danger-text:  #f87171;
  --color-info-soft:    rgba(37, 99, 235, .16);  --color-info-text:    #60a5fa;
  --color-muted-soft:   rgba(148, 163, 184, .12); --color-muted-text:  #a3aabb;

  --color-focus: var(--brand-400);
  --color-overlay: rgba(0, 0, 0, .6);
  --skeleton-a: #1c202c;
  --skeleton-b: #232838;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .25);
  --shadow-md: 0 6px 16px -4px rgba(0, 0, 0, .45);
  --shadow-lg: 0 20px 48px -12px rgba(0, 0, 0, .6);
  --ring: 0 0 0 3px rgba(140, 127, 248, .4);

  color-scheme: dark;
}