/*
 * BoxBMS Design System — token nền tảng.
 * Chuẩn tham chiếu: Atlassian Design System (atlassian.design) — tên token giữ quy ước `--ds-*`.
 *
 * Thứ tự nạp:  bootstrap.min.css → ds-tokens.css → ds-colors.css → ds-bootstrap.css
 *
 * Quy tắc:
 *   - Component chỉ dùng token, KHÔNG dùng mã màu / px rời rạc.
 *   - Màu chủ đạo (brand) nằm ở ds-colors.css, đổi theo html[data-color].
 *   - Màu trạng thái (success/danger/warning/information) cố định, không đổi theo màu chủ đạo.
 */

:root {
  /* ---------- Font ---------- */
  --ds-font-family-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ds-font-family-heading: var(--ds-font-family-body);
  --ds-font-family-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ds-font-weight-regular: 400;
  --ds-font-weight-medium: 500;
  --ds-font-weight-semibold: 600;
  --ds-font-weight-bold: 700;

  /* Thang chữ — size / line-height. Line-height nới hơn Atlassian ~2px vì dấu tiếng Việt chồng tầng. */
  --ds-font-heading-xxlarge: 700 2rem/2.5rem var(--ds-font-family-heading);        /* 32/40 */
  --ds-font-heading-xlarge: 700 1.75rem/2.25rem var(--ds-font-family-heading);     /* 28/36 */
  --ds-font-heading-large: 700 1.5rem/2rem var(--ds-font-family-heading);          /* 24/32 */
  --ds-font-heading-medium: 700 1.25rem/1.75rem var(--ds-font-family-heading);     /* 20/28 */
  --ds-font-heading-small: 700 1rem/1.375rem var(--ds-font-family-heading);        /* 16/22 */
  --ds-font-heading-xsmall: 700 0.875rem/1.25rem var(--ds-font-family-heading);    /* 14/20 */
  --ds-font-heading-xxsmall: 700 0.75rem/1rem var(--ds-font-family-heading);       /* 12/16 */
  --ds-font-body-large: 400 1rem/1.5rem var(--ds-font-family-body);                /* 16/24 */
  --ds-font-body: 400 0.875rem/1.375rem var(--ds-font-family-body);                /* 14/22 */
  --ds-font-body-small: 400 0.75rem/1.125rem var(--ds-font-family-body);           /* 12/18 */
  --ds-font-code: 400 0.8125rem/1.25rem var(--ds-font-family-code);

  /* ---------- Khoảng cách (lưới 8px, bậc 2px) ---------- */
  --ds-space-0: 0;
  --ds-space-025: 0.125rem;  /* 2 */
  --ds-space-050: 0.25rem;   /* 4 */
  --ds-space-075: 0.375rem;  /* 6 */
  --ds-space-100: 0.5rem;    /* 8 */
  --ds-space-150: 0.75rem;   /* 12 */
  --ds-space-200: 1rem;      /* 16 */
  --ds-space-250: 1.25rem;   /* 20 */
  --ds-space-300: 1.5rem;    /* 24 */
  --ds-space-400: 2rem;      /* 32 */
  --ds-space-500: 2.5rem;    /* 40 */
  --ds-space-600: 3rem;      /* 48 */
  --ds-space-800: 4rem;      /* 64 */
  --ds-space-1000: 5rem;     /* 80 */

  /* ---------- Bo góc ---------- */
  --ds-radius-xsmall: 2px;   /* checkbox, tag nhỏ */
  --ds-radius-small: 4px;    /* badge, lozenge */
  --ds-radius-medium: 6px;   /* button, input, dropdown item */
  --ds-radius-large: 8px;    /* card, popover, dropdown */
  --ds-radius-xlarge: 12px;  /* modal, panel, cột Kanban */
  --ds-radius-full: 999px;   /* avatar, pill */

  --ds-border-width: 1px;
  --ds-border-width-selected: 2px;
  --ds-border-width-focused: 2px;

  /* ---------- Kích thước control ---------- */
  --ds-control-height-small: 1.75rem;   /* 28 */
  --ds-control-height: 2.25rem;         /* 36 */
  --ds-control-height-large: 2.75rem;   /* 44 — chạm tốt trên mobile/POS */

  /* ---------- Neutral (cố định cho mọi màu chủ đạo) ---------- */
  --ds-neutral-0: #FFFFFF;
  --ds-neutral-100: #F7F8F9;
  --ds-neutral-200: #F1F2F4;
  --ds-neutral-300: #DCDFE4;
  --ds-neutral-400: #B3B9C4;
  --ds-neutral-500: #8590A2;
  --ds-neutral-600: #758195;
  --ds-neutral-700: #626F86;
  --ds-neutral-800: #44546F;
  --ds-neutral-900: #2C3E5D;
  --ds-neutral-1000: #172B4D;

  /* Bề mặt */
  --ds-surface: #FFFFFF;
  --ds-surface-hovered: #F1F2F4;
  --ds-surface-pressed: #DCDFE4;
  --ds-surface-sunken: #F7F8F9;          /* nền trang, nền cột Kanban */
  --ds-surface-raised: #FFFFFF;          /* card */
  --ds-surface-raised-hovered: #F7F8F9;
  --ds-surface-overlay: #FFFFFF;         /* dropdown, modal, popover */

  /* Nền */
  --ds-background-neutral: rgba(9, 30, 66, 0.06);
  --ds-background-neutral-hovered: rgba(9, 30, 66, 0.14);
  --ds-background-neutral-pressed: rgba(9, 30, 66, 0.31);
  --ds-background-neutral-subtle: transparent;
  --ds-background-neutral-subtle-hovered: rgba(9, 30, 66, 0.06);
  --ds-background-neutral-subtle-pressed: rgba(9, 30, 66, 0.14);
  --ds-background-neutral-bold: #44546F;
  --ds-background-neutral-bold-hovered: #2C3E5D;
  --ds-background-neutral-bold-pressed: #172B4D;
  --ds-background-input: #FFFFFF;
  --ds-background-input-hovered: #F7F8F9;
  --ds-background-input-pressed: #FFFFFF;
  --ds-background-disabled: rgba(9, 30, 66, 0.03);
  --ds-blanket: rgba(9, 30, 66, 0.54);   /* lớp phủ sau modal */

  /* Chữ */
  --ds-text: #172B4D;
  --ds-text-subtle: #44546F;
  --ds-text-subtlest: #626F86;
  --ds-text-disabled: rgba(9, 30, 66, 0.31);
  --ds-text-inverse: #FFFFFF;

  /* Icon */
  --ds-icon: #44546F;
  --ds-icon-subtle: #626F86;
  --ds-icon-disabled: rgba(9, 30, 66, 0.31);
  --ds-icon-inverse: #FFFFFF;

  /* Viền */
  --ds-border: rgba(9, 30, 66, 0.14);
  --ds-border-bold: #758195;
  --ds-border-input: #8590A2;
  --ds-border-disabled: rgba(9, 30, 66, 0.06);

  /* ---------- Màu trạng thái (cố định) ---------- */
  --ds-background-success-bold: #1F845A;
  --ds-background-success-bold-hovered: #216E4E;
  --ds-background-success-bold-pressed: #164B35;
  --ds-background-success: #DCFFF1;
  --ds-background-success-hovered: #BAF3DB;
  --ds-text-success: #216E4E;
  --ds-icon-success: #22A06B;
  --ds-border-success: #22A06B;

  --ds-background-danger-bold: #C9372C;
  --ds-background-danger-bold-hovered: #AE2E24;
  --ds-background-danger-bold-pressed: #5D1F1A;
  --ds-background-danger: #FFECEB;
  --ds-background-danger-hovered: #FFD5D2;
  --ds-text-danger: #AE2E24;
  --ds-icon-danger: #C9372C;
  --ds-border-danger: #E2483D;

  --ds-background-warning-bold: #F5CD47;
  --ds-background-warning-bold-hovered: #E2B203;
  --ds-background-warning-bold-pressed: #CF9F02;
  --ds-background-warning: #FFF7D6;
  --ds-background-warning-hovered: #F8E6A0;
  --ds-text-warning: #A54800;
  --ds-text-warning-inverse: #172B4D;   /* chữ trên nền warning-bold */
  --ds-icon-warning: #E2B203;
  --ds-border-warning: #E2B203;

  --ds-background-information-bold: #1D7AFC;
  --ds-background-information-bold-hovered: #0C66E4;
  --ds-background-information-bold-pressed: #0055CC;
  --ds-background-information: #E9F2FF;
  --ds-background-information-hovered: #CCE0FF;
  --ds-text-information: #0055CC;
  --ds-icon-information: #1D7AFC;
  --ds-border-information: #1D7AFC;

  --ds-background-discovery-bold: #8270DB;
  --ds-background-discovery-bold-hovered: #6E5DC6;
  --ds-background-discovery: #F3F0FF;
  --ds-background-discovery-hovered: #DFD8FD;
  --ds-text-discovery: #5E4DB2;
  --ds-icon-discovery: #8270DB;

  /* ---------- Màu nhấn (nhãn kiểu Trello, tag, avatar, lịch) ---------- */
  --ds-accent-green-subtlest: #DCFFF1;  --ds-accent-green-subtler: #BAF3DB;  --ds-accent-green-subtle: #4BCE97;  --ds-accent-green-bolder: #216E4E;
  --ds-accent-lime-subtlest: #EEFBDA;   --ds-accent-lime-subtler: #D3F1A7;   --ds-accent-lime-subtle: #94C748;   --ds-accent-lime-bolder: #4C6B1F;
  --ds-accent-yellow-subtlest: #FFF7D6; --ds-accent-yellow-subtler: #F8E6A0; --ds-accent-yellow-subtle: #F5CD47; --ds-accent-yellow-bolder: #7F5F01;
  --ds-accent-orange-subtlest: #FFF3EB; --ds-accent-orange-subtler: #FEDEC8; --ds-accent-orange-subtle: #FEA362; --ds-accent-orange-bolder: #A54800;
  --ds-accent-red-subtlest: #FFECEB;    --ds-accent-red-subtler: #FFD5D2;    --ds-accent-red-subtle: #F87168;    --ds-accent-red-bolder: #AE2E24;
  --ds-accent-magenta-subtlest: #FFECF8; --ds-accent-magenta-subtler: #FDD0EC; --ds-accent-magenta-subtle: #E774BB; --ds-accent-magenta-bolder: #943D73;
  --ds-accent-purple-subtlest: #F3F0FF; --ds-accent-purple-subtler: #DFD8FD; --ds-accent-purple-subtle: #9F8FEF; --ds-accent-purple-bolder: #5E4DB2;
  --ds-accent-blue-subtlest: #E9F2FF;   --ds-accent-blue-subtler: #CCE0FF;   --ds-accent-blue-subtle: #579DFF;   --ds-accent-blue-bolder: #0055CC;
  --ds-accent-teal-subtlest: #E7F9FF;   --ds-accent-teal-subtler: #C6EDFB;   --ds-accent-teal-subtle: #6CC3E0;   --ds-accent-teal-bolder: #206A83;
  --ds-accent-gray-subtlest: #F1F2F4;   --ds-accent-gray-subtler: #DCDFE4;   --ds-accent-gray-subtle: #8590A2;   --ds-accent-gray-bolder: #44546F;

  /* ---------- Biểu đồ ----------
   * 1 chuỗi số liệu  → màu chủ đạo (--ds-background-brand-bold), đổi theo data-color.
   * Nhiều chuỗi      → 8 màu phân loại CỐ ĐỊNH, dùng đúng thứ tự (đã kiểm tra mù màu, nền trắng).
   *                    Không sinh màu thứ 9: gộp vào "Khác". Màu theo đối tượng, không theo thứ hạng.
   * Độ lớn liên tục  → thang màu chủ đạo 100→1000.
   */
  --ds-chart-1: #2A78D6;  /* xanh dương */
  --ds-chart-2: #EB6834;  /* cam */
  --ds-chart-3: #1BAF7A;  /* xanh ngọc */
  --ds-chart-4: #EDA100;  /* vàng */
  --ds-chart-5: #E87BA4;  /* hồng */
  --ds-chart-6: #008300;  /* xanh lá */
  --ds-chart-7: #6250D6;  /* tím */
  --ds-chart-8: #E34948;  /* đỏ */
  --ds-chart-grid: #EBECF0;
  --ds-chart-axis: #C1C7D0;

  /* ---------- RGB (chỉ dùng trong rgba() khi cần độ trong suốt; màu chủ đạo: --ds-brand-bold-rgb) ---------- */
  --ds-text-rgb: 23, 43, 77;
  --ds-text-subtlest-rgb: 98, 111, 134;
  --ds-surface-rgb: 255, 255, 255;
  --ds-border-rgb: 220, 223, 228;
  --ds-success-rgb: 34, 160, 107;
  --ds-danger-rgb: 201, 55, 44;
  --ds-warning-rgb: 226, 178, 3;
  --ds-information-rgb: 29, 122, 252;
  --ds-chart-2-rgb: 235, 104, 52;
  --ds-chart-3-rgb: 27, 175, 122;
  --ds-chart-4-rgb: 237, 161, 0;

  /* ---------- Độ nổi (elevation) ---------- */
  --ds-shadow-raised: 0 1px 1px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31);
  --ds-shadow-raised-hovered: 0 2px 4px rgba(9, 30, 66, 0.16), 0 0 1px rgba(9, 30, 66, 0.31);
  --ds-shadow-overflow: 0 0 8px rgba(9, 30, 66, 0.16), 0 0 1px rgba(9, 30, 66, 0.12);
  --ds-shadow-overlay: 0 8px 12px rgba(9, 30, 66, 0.15), 0 0 1px rgba(9, 30, 66, 0.31);
  --ds-shadow-modal: 0 20px 32px -8px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31);

  /* ---------- Chuyển động ---------- */
  --ds-duration-fast: 100ms;
  --ds-duration: 200ms;
  --ds-duration-slow: 300ms;
  --ds-easing: cubic-bezier(0.2, 0, 0, 1);
  --ds-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Lớp chồng (z-index) ---------- */
  --ds-z-nav: 100;
  --ds-z-dropdown: 1000;
  --ds-z-sticky: 1020;
  --ds-z-modal: 1050;
  --ds-z-toast: 1090;
  --ds-z-tooltip: 1100;

  /* ---------- Layout ---------- */
  --ds-nav-height: 3.5rem;        /* 56 */
  --ds-sidebar-width: 16rem;      /* 256 */
  --ds-content-max-width: 90rem;  /* 1440 */
}


@media (prefers-reduced-motion: reduce) {
  :root { --ds-duration-fast: 0ms; --ds-duration: 0ms; --ds-duration-slow: 0ms; }
}