/* ════════════════════════════════════════════════════════════
   tokens.css — BẢNG ĐIỀU KHIỂN DIỆN MẠO (Design Tokens)
   Đổi giao diện toàn app = sửa giá trị trong :root dưới đây.
   Tách từ index.html (block <style> gốc). Không chứa layout.
   ════════════════════════════════════════════════════════════ */

/*
  ════════════════════════════════════════════════════════════════════
  BẢNG MÀU — chỉnh tại đây để thay đổi toàn bộ giao diện
  ════════════════════════════════════════════════════════════════════
  Cách dùng: đổi mã màu hex (#xxxxxx) là được.
  Mỗi biến được dùng xuyên suốt toàn bộ app & PDF preview.
*/
:root {
  /* --- Màu nền --- */
  --bg:       #faf7f4;   /* Nền tổng thể — kem pastel ấm */
  --surface:  #ffffff;   /* Nền card, panel (trắng) */
  --surface2: #f5f0eb;   /* Nền input, hover nhẹ — cam kem rất nhạt */

  /* --- Đường viền --- */
  --border:   #ede6df;   /* Đường viền nhạt — tông warm */
  --border2:  #d9cfc6;   /* Đường viền đậm hơn */

  /* --- Màu thương hiệu (Brand) — GIỮ NGUYÊN ĐEN & CAM --- */
  --accent:   #E87722;   /* Cam thương hiệu chính */
  --accent2:  #cc5f0f;   /* Cam đậm hơn — hover */
  --dark:     #0d0d0d;   /* Đen sâu — sidebar, header */
  --dark2:    #1a1a1a;   /* Đen nhạt — hover dark */
  --blue:     #0d0d0d;   /* Đen — header nhóm hạng mục */

  /* --- Màu chữ --- */
  --text:     #1a1a1a;   /* Chữ chính */
  --text2:    #6b5f57;   /* Chữ phụ — warm brown-gray */
  --text3:    #a89a91;   /* Chữ mờ, label — warm taupe */

  /* --- Màu trạng thái --- */
  --red:      #c0392b;   /* Lỗi, Lost, xóa */
  --green:    #27ae60;   /* Won, thành công */
  --yellow:   #e67e22;   /* Pending, VAT */
  --usd:      #1a6b3c;   /* Màu hiển thị USD */

  /* ============ MỞ RỘNG (tự động token hóa) ============ */
  /* --- Neutral tuyệt đối --- */
  --white:    #ffffff;
  --black:    #000000;

  /* --- Kênh RGB cho rgba() tint (đổi cùng màu gốc tương ứng) --- */
  --white-rgb:  255,255,255;
  --black-rgb:  0,0,0;
  --accent-rgb: 232,119,34;   /* = --accent  #E87722 */
  --green-rgb:  39,174,96;    /* = --green   #27ae60 */
  --red-rgb:    192,57,43;    /* = --red     #c0392b */
  --usd-rgb:    26,107,60;    /* = --usd     #1a6b3c */

  /* --- Sidebar / nền tối --- */
  --sidebar-bg:       #1C1C1E;   /* nền sidebar */
  --sidebar-accent:   #FF8C42;   /* cam icon/chữ active (khác --accent) */
  --sidebar-tint-rgb: 255,107,26;/* cam dùng cho rgba glow trên sidebar */

  /* --- Trạng thái mở rộng (iOS-style) --- */
  --red2:   #ff453a;   /* đỏ tươi */
  --green2: #34c759;   /* xanh tươi */
  --amber:  #ff9f0a;   /* hổ phách / cảnh báo */
  --info:   #3b82f6;   /* xanh dương thông tin */
  --violet: #8b5cf6;   /* tím nhấn */

  /* ════════ DESIGN SYSTEM MỞ RỘNG (UI Kit) — chỉ THÊM, không đổi giá trị cũ ════════ */
  /* Font thống nhất cho cả chữ & số (số canh cột bằng tabular-nums) */
  --ff: 'Google Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  /* Thang chữ */
  --fs-2xs:9px; --fs-xs:11px; --fs-sm:12px; --fs-base:13px;
  --fs-md:15px; --fs-lg:18px; --fs-xl:22px; --fs-2xl:28px;
  /* Bo góc */
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-pill:999px;
  /* Đổ bóng */
  --sh-1:0 1px 3px rgba(20,18,15,.06),0 1px 2px rgba(20,18,15,.04);
  --sh-2:0 6px 24px rgba(20,18,15,.10);
  /* Spacing (4pt) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  /* Màu phụ bổ sung */
  --surface3:#ece3da; --accent-tint:#FFF3EB;

  /* ════════ ALIAS HỆ THỐNG QUẢN LÝ DỰ ÁN (redesign Quản lý dự án) ════════
     Chỉ ánh xạ sang token sẵn có để dùng tên design — KHÔNG đổi giá trị cũ. */
  --wah:           var(--accent);        /* cam thương hiệu */
  --wah-dark:      var(--accent2);       /* cam đậm — text-on-light / pressed */
  --wah-light:     var(--accent-tint);   /* nền cam rất nhạt — selected/hover */
  --page-bg:       var(--bg);            /* nền view */
  --bg2:           var(--surface2);
  --bg3:           var(--surface3);
  --border-strong: var(--border2);
  --green-bg:      rgba(39,174,96,.12);
  --red-bg:        rgba(192,57,43,.10);
  --amber-bg:      rgba(230,126,22,.12);
  --blue-fg:       var(--info);          /* #3b82f6 — KHÔNG đụng --blue (đang = đen) */
  --blue-bg:       #eaf4fb;
  --shadow-card:   var(--sh-1);
  --ease:          cubic-bezier(.4,0,.2,1);
  --font-sans:     var(--ff);
  --font-mono:     'Google Sans Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ════════ ALIAS — Dashboard CEO redesign (2026-07-05) ════════
     Design mockup dùng --accent-hover/--font-display/--font-num — map về token sẵn có,
     KHÔNG nạp font trial (TT Firs Neue/Space Grotesk), dùng Inter/--ff theo yêu cầu user. */
  --accent-hover:  var(--accent2);
  --font-display:  var(--font-sans);
  --font-num:      var(--font-sans);

  /* ════════ ALIAS — "Chi phí từ bảng IC" redesign (2026-07-17) ════════ */
  --ls-eyebrow:    .07em;
  --dur:           .15s;
  --dur-slow:      .3s;
}

/* ════════ DARK MODE ════════ */
html.dark {
  --bg:        #111111;
  --surface:   #1c1c1e;
  --surface2:  #2c2c2e;
  --surface3:  #3a3a3c;
  --border:    #3a3a3c;
  --border2:   #48484a;
  --text:      #f2f2f7;
  --text2:     #aeaeb2;
  --text3:     #636366;
  --accent-tint: rgba(232,119,34,0.15);
  --sidebar-bg:  #000000;
  --blue-bg:     rgba(59,130,246,0.15);
  --green-bg:    rgba(39,174,96,0.20);
  --red-bg:      rgba(192,57,43,0.18);
  --amber-bg:    rgba(230,126,22,0.18);
  --sh-1: 0 1px 3px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 6px 24px rgba(0,0,0,.6);
  --blue: #aeaeb2;
  color-scheme: dark;
}

html.dark .cat-header { background: rgba(255,255,255,.06); }