/* FFM Design System v2 – generated by scripts/build_tokens.py from Figma (2026-11-03). Do not edit by hand. */
/* Font: Inter (UI) · Geist Mono (code) · Icon: Phosphor Regular · Light mode only (chưa có Dark mode) */
:root {
  /* ---- Seed (primitive – không dùng trực tiếp trong component) ---- */
  --ffm-neutral-0: #FFFFFF;
  --ffm-neutral-50: #FAFAF9;
  --ffm-neutral-100: #F5F5F4;
  --ffm-neutral-150: #EEEDEB;
  --ffm-neutral-200: #E7E5E4;
  --ffm-neutral-300: #D6D3D1;
  --ffm-neutral-400: #A8A29E;
  --ffm-neutral-500: #78716C;
  --ffm-neutral-600: #57534E;
  --ffm-neutral-700: #44403C;
  --ffm-neutral-800: #292524;
  --ffm-neutral-900: #1C1917;
  --ffm-neutral-950: #0C0A09;
  --ffm-neutral-1000: #000000;
  --ffm-blue-brand-50: #EFF8FF;
  --ffm-blue-brand-100: #D1E9FF;
  --ffm-blue-brand-200: #B2DDFF;
  --ffm-blue-brand-300: #84CAFF;
  --ffm-blue-brand-400: #53B1FD;
  --ffm-blue-brand-500: #2E90FA;
  --ffm-blue-brand-600: #1570EF;
  --ffm-blue-brand-700: #175CD3;
  --ffm-blue-brand-800: #1849A9;
  --ffm-blue-brand-900: #194185;
  --ffm-green-50: #F0FDF4;
  --ffm-green-100: #DCFCE7;
  --ffm-green-200: #BBF7D0;
  --ffm-green-300: #86EFAC;
  --ffm-green-400: #4ADE80;
  --ffm-green-500: #22C55E;
  --ffm-green-600: #16A34A;
  --ffm-green-700: #15803D;
  --ffm-green-800: #166534;
  --ffm-green-900: #14532D;
  --ffm-red-50: #FEF2F2;
  --ffm-red-100: #FEE2E2;
  --ffm-red-200: #FECACA;
  --ffm-red-300: #FCA5A5;
  --ffm-red-400: #F87171;
  --ffm-red-500: #EF4444;
  --ffm-red-600: #DC2626;
  --ffm-red-700: #B91C1C;
  --ffm-red-800: #991B1B;
  --ffm-red-900: #7F1D1D;
  --ffm-orange-50: #FFF7ED;
  --ffm-orange-100: #FFEDD5;
  --ffm-orange-200: #FED7AA;
  --ffm-orange-300: #FDBA74;
  --ffm-orange-400: #FB923C;
  --ffm-orange-500: #F97316;
  --ffm-orange-600: #EA580C;
  --ffm-orange-700: #C2410C;
  --ffm-orange-800: #9A3412;
  --ffm-orange-900: #7C2D12;
  --ffm-yellow-50: #FFFBEB;
  --ffm-yellow-100: #FEF3C7;
  --ffm-yellow-200: #FDE68A;
  --ffm-yellow-300: #FCD34D;
  --ffm-yellow-400: #FBBF24;
  --ffm-yellow-500: #F59E0B;
  --ffm-yellow-600: #D97706;
  --ffm-yellow-700: #B45309;
  --ffm-yellow-800: #92400E;
  --ffm-yellow-900: #78350F;
  --ffm-blue-50: #EFF6FF;
  --ffm-blue-100: #DBEAFE;
  --ffm-blue-200: #BFDBFE;
  --ffm-blue-300: #93C5FD;
  --ffm-blue-400: #60A5FA;
  --ffm-blue-500: #3B82F6;
  --ffm-blue-600: #2563EB;
  --ffm-blue-700: #1D4ED8;
  --ffm-blue-800: #1E40AF;
  --ffm-blue-900: #1E3A8A;
  --ffm-cyan-50: #ECFEFF;
  --ffm-cyan-100: #CFFAFE;
  --ffm-cyan-200: #A5F3FC;
  --ffm-cyan-300: #67E8F9;
  --ffm-cyan-400: #22D3EE;
  --ffm-cyan-500: #06B6D4;
  --ffm-cyan-600: #0891B2;
  --ffm-cyan-700: #0E7490;
  --ffm-cyan-800: #155E75;
  --ffm-cyan-900: #164E63;
  --ffm-purple-50: #F5F3FF;
  --ffm-purple-100: #EDE9FE;
  --ffm-purple-200: #DDD6FE;
  --ffm-purple-300: #C4B5FD;
  --ffm-purple-400: #A78BFA;
  --ffm-purple-500: #8B5CF6;
  --ffm-purple-600: #7C3AED;
  --ffm-purple-700: #6D28D9;
  --ffm-purple-800: #5B21B6;
  --ffm-purple-900: #4C1D95;
  --ffm-pink-50: #FDF2F8;
  --ffm-pink-100: #FCE7F3;
  --ffm-pink-200: #FBCFE8;
  --ffm-pink-300: #F9A8D4;
  --ffm-pink-400: #F472B6;
  --ffm-pink-500: #EC4899;
  --ffm-pink-600: #DB2777;
  --ffm-pink-700: #BE185D;
  --ffm-pink-800: #9D174D;
  --ffm-pink-900: #831843;
  --ffm-neutral-alpha-0: #0C0A0900;
  --ffm-neutral-alpha-50: #0C0A0908;
  --ffm-neutral-alpha-100: #0C0A090F;
  --ffm-neutral-alpha-150: #0C0A0914;
  --ffm-neutral-alpha-200: #0C0A091A;
  --ffm-neutral-alpha-300: #0C0A0929;
  --ffm-neutral-alpha-400: #0C0A094D;
  --ffm-neutral-alpha-500: #0C0A0973;
  --ffm-neutral-alpha-600: #0C0A0999;
  --ffm-neutral-alpha-700: #0C0A09B2;
  --ffm-neutral-alpha-800: #0C0A09CC;
  --ffm-neutral-alpha-900: #0C0A09E0;
  --ffm-neutral-alpha-950: #0C0A09F0;
  --ffm-neutral-alpha-1000: #0C0A09;
  --ffm-blue-brand-alpha-50: #1570EF0D;
  --ffm-blue-brand-alpha-100: #1570EF1A;
  --ffm-blue-brand-alpha-200: #1570EF29;
  --ffm-blue-brand-alpha-300: #1570EF3D;
  --ffm-blue-brand-alpha-400: #1570EF57;
  --ffm-blue-brand-alpha-500: #1570EF75;
  --ffm-blue-brand-alpha-600: #1570EF99;
  --ffm-blue-brand-alpha-700: #1570EFB8;
  --ffm-blue-brand-alpha-800: #1570EFD6;
  --ffm-blue-brand-alpha-900: #1570EFEB;
  --ffm-green-alpha-50: #16A34A0D;
  --ffm-green-alpha-100: #16A34A1A;
  --ffm-green-alpha-200: #16A34A29;
  --ffm-green-alpha-300: #16A34A3D;
  --ffm-green-alpha-400: #16A34A57;
  --ffm-green-alpha-500: #16A34A75;
  --ffm-green-alpha-600: #16A34A99;
  --ffm-green-alpha-700: #16A34AB8;
  --ffm-green-alpha-800: #16A34AD6;
  --ffm-green-alpha-900: #16A34AEB;
  --ffm-red-alpha-50: #DC26260D;
  --ffm-red-alpha-100: #DC26261A;
  --ffm-red-alpha-200: #DC262629;
  --ffm-red-alpha-300: #DC26263D;
  --ffm-red-alpha-400: #DC262657;
  --ffm-red-alpha-500: #DC262675;
  --ffm-red-alpha-600: #DC262699;
  --ffm-red-alpha-700: #DC2626B8;
  --ffm-red-alpha-800: #DC2626D6;
  --ffm-red-alpha-900: #DC2626EB;
  --ffm-orange-alpha-50: #EA580C0D;
  --ffm-orange-alpha-100: #EA580C1A;
  --ffm-orange-alpha-200: #EA580C29;
  --ffm-orange-alpha-300: #EA580C3D;
  --ffm-orange-alpha-400: #EA580C57;
  --ffm-orange-alpha-500: #EA580C75;
  --ffm-orange-alpha-600: #EA580C99;
  --ffm-orange-alpha-700: #EA580CB8;
  --ffm-orange-alpha-800: #EA580CD6;
  --ffm-orange-alpha-900: #EA580CEB;
  --ffm-yellow-alpha-50: #D977060D;
  --ffm-yellow-alpha-100: #D977061A;
  --ffm-yellow-alpha-200: #D9770629;
  --ffm-yellow-alpha-300: #D977063D;
  --ffm-yellow-alpha-400: #D9770657;
  --ffm-yellow-alpha-500: #D9770675;
  --ffm-yellow-alpha-600: #D9770699;
  --ffm-yellow-alpha-700: #D97706B8;
  --ffm-yellow-alpha-800: #D97706D6;
  --ffm-yellow-alpha-900: #D97706EB;
  --ffm-blue-alpha-50: #2563EB0D;
  --ffm-blue-alpha-100: #2563EB1A;
  --ffm-blue-alpha-200: #2563EB29;
  --ffm-blue-alpha-300: #2563EB3D;
  --ffm-blue-alpha-400: #2563EB57;
  --ffm-blue-alpha-500: #2563EB75;
  --ffm-blue-alpha-600: #2563EB99;
  --ffm-blue-alpha-700: #2563EBB8;
  --ffm-blue-alpha-800: #2563EBD6;
  --ffm-blue-alpha-900: #2563EBEB;
  --ffm-cyan-alpha-50: #0891B20D;
  --ffm-cyan-alpha-100: #0891B21A;
  --ffm-cyan-alpha-200: #0891B229;
  --ffm-cyan-alpha-300: #0891B23D;
  --ffm-cyan-alpha-400: #0891B257;
  --ffm-cyan-alpha-500: #0891B275;
  --ffm-cyan-alpha-600: #0891B299;
  --ffm-cyan-alpha-700: #0891B2B8;
  --ffm-cyan-alpha-800: #0891B2D6;
  --ffm-cyan-alpha-900: #0891B2EB;
  --ffm-purple-alpha-50: #7C3AED0D;
  --ffm-purple-alpha-100: #7C3AED1A;
  --ffm-purple-alpha-200: #7C3AED29;
  --ffm-purple-alpha-300: #7C3AED3D;
  --ffm-purple-alpha-400: #7C3AED57;
  --ffm-purple-alpha-500: #7C3AED75;
  --ffm-purple-alpha-600: #7C3AED99;
  --ffm-purple-alpha-700: #7C3AEDB8;
  --ffm-purple-alpha-800: #7C3AEDD6;
  --ffm-purple-alpha-900: #7C3AEDEB;
  --ffm-pink-alpha-50: #DB27770D;
  --ffm-pink-alpha-100: #DB27771A;
  --ffm-pink-alpha-200: #DB277729;
  --ffm-pink-alpha-300: #DB27773D;
  --ffm-pink-alpha-400: #DB277757;
  --ffm-pink-alpha-500: #DB277775;
  --ffm-pink-alpha-600: #DB277799;
  --ffm-pink-alpha-700: #DB2777B8;
  --ffm-pink-alpha-800: #DB2777D6;
  --ffm-pink-alpha-900: #DB2777EB;
  --ffm-white-alpha-50: #FFFFFF0D;
  --ffm-white-alpha-100: #FFFFFF1A;
  --ffm-white-alpha-150: #FFFFFF24;
  --ffm-white-alpha-200: #FFFFFF2E;
  --ffm-white-alpha-300: #FFFFFF42;
  --ffm-white-alpha-400: #FFFFFF66;

  /* ---- 1. Color (semantic) ---- */
  --ffm-fg-base-header: var(--ffm-neutral-950); /* Tiêu đề trang, số liệu lớn */
  --ffm-fg-base-primary: var(--ffm-neutral-950); /* Chữ chính (foreground) */
  --ffm-fg-base-secondary: var(--ffm-neutral-500); /* Chữ phụ, mô tả (muted-foreground) */
  --ffm-fg-base-placeholder: var(--ffm-neutral-400); /* Placeholder ô nhập */
  --ffm-fg-base-hint: var(--ffm-neutral-400); /* Gợi ý, meta mờ */
  --ffm-fg-base-disable: var(--ffm-neutral-300); /* Chữ/icon vô hiệu */
  --ffm-fg-base-icon: var(--ffm-neutral-600); /* Icon mặc định */
  --ffm-fg-base-light-solid: var(--ffm-neutral-0); /* Chữ/icon trên nền đậm */
  --ffm-bg-base-canvas: var(--ffm-neutral-0); /* Nền trang (background) */
  --ffm-bg-base-surface: var(--ffm-neutral-50); /* Nền phụ: sidebar, vùng phân khu */
  --ffm-bg-base-surface-strong: var(--ffm-neutral-100); /* Nền muted: header bảng, tabs list, block phân cấp */
  --ffm-bg-base-hover: var(--ffm-neutral-150); /* Hover item/hàng trên nền canvas hoặc surface (≥1 bậc đậm hơn nền) */
  --ffm-bg-base-hover-strong: var(--ffm-neutral-200); /* Hover trên nền surface-strong / pressed */
  --ffm-bg-base-focus: var(--ffm-neutral-300); /* Pressed / đang nhấn */
  --ffm-bg-base-ring: var(--ffm-blue-brand-300); /* Màu vòng focus */
  --ffm-bg-base-selected: var(--ffm-neutral-200); /* Item đang chọn (trung tính) – ≥2 bậc đậm hơn nền */
  --ffm-bg-base-disabled: var(--ffm-neutral-50); /* Nền control vô hiệu */
  --ffm-bg-base-inverse: var(--ffm-neutral-900); /* Tooltip, toast tối */
  --ffm-bg-base-card: var(--ffm-neutral-0); /* Card, popover, dialog */
  --ffm-bg-overlay-base-surface-on-trans: var(--ffm-neutral-alpha-0);
  --ffm-bg-overlay-base-surface-on-filled: var(--ffm-neutral-alpha-50);
  --ffm-bg-overlay-base-hover-on-trans: var(--ffm-neutral-alpha-200); /* Hover ghost trên nền trong suốt (10%) */
  --ffm-bg-overlay-base-hover-on-filled: var(--ffm-neutral-alpha-300); /* Hover trên nền màu (16%) */
  --ffm-bg-overlay-base-focus: var(--ffm-neutral-alpha-300);
  --ffm-bg-overlay-base-selected: var(--ffm-neutral-alpha-300); /* Chọn trên nền bất kỳ (16%) */
  --ffm-bg-overlay-base-disabled: var(--ffm-neutral-alpha-50);
  --ffm-bg-overlay-base-scrim: var(--ffm-neutral-alpha-500); /* Lớp phủ sau Dialog/Sheet */
  --ffm-border-base-default: var(--ffm-neutral-200); /* Viền card, input, bảng (border) */
  --ffm-border-base-hover: var(--ffm-neutral-300); /* Viền khi hover */
  --ffm-border-base-focus: var(--ffm-blue-brand-500); /* Viền khi focus (ring) */
  --ffm-border-base-invalid: var(--ffm-red-500); /* Viền lỗi */
  --ffm-border-base-selected: var(--ffm-blue-brand-600); /* Viền item đang chọn */
  --ffm-border-base-disabled: var(--ffm-neutral-150); /* Viền vô hiệu */
  --ffm-fg-brand-primary: var(--ffm-blue-brand-700); /* Thương hiệu – hành động chính, đang chọn */
  --ffm-fg-brand-hover: var(--ffm-blue-brand-800);
  --ffm-fg-brand-focus: var(--ffm-blue-brand-900);
  --ffm-fg-brand-selected: var(--ffm-blue-brand-700);
  --ffm-fg-brand-disabled: var(--ffm-blue-brand-300);
  --ffm-bg-brand-default: var(--ffm-blue-brand-600); /* Thương hiệu – hành động chính, đang chọn */
  --ffm-bg-brand-hover: var(--ffm-blue-brand-700);
  --ffm-bg-brand-focus: var(--ffm-blue-brand-800);
  --ffm-bg-brand-selected: var(--ffm-blue-brand-100);
  --ffm-bg-brand-disabled: var(--ffm-blue-brand-300);
  --ffm-bg-overlay-brand-default: var(--ffm-blue-brand-alpha-100); /* Nền nhạt (badge soft, alert, hàng bảng) – Thương hiệu – hành động chính, đang chọn */
  --ffm-bg-overlay-brand-hover: var(--ffm-blue-brand-alpha-200);
  --ffm-bg-overlay-brand-focus: var(--ffm-blue-brand-alpha-300);
  --ffm-bg-overlay-brand-selected: var(--ffm-blue-brand-alpha-200);
  --ffm-bg-overlay-brand-disabled: var(--ffm-blue-brand-alpha-50);
  --ffm-border-brand-default: var(--ffm-blue-brand-500); /* Thương hiệu – hành động chính, đang chọn */
  --ffm-border-brand-hover: var(--ffm-blue-brand-600);
  --ffm-border-brand-focus: var(--ffm-blue-brand-700);
  --ffm-border-brand-selected: var(--ffm-blue-brand-700);
  --ffm-border-brand-disabled: var(--ffm-blue-brand-200);
  --ffm-border-brand-subtle: var(--ffm-blue-brand-alpha-300); /* Viền nhạt cho alert/badge outline */
  --ffm-fg-success-primary: var(--ffm-green-700); /* Thành công / hoàn tất */
  --ffm-fg-success-hover: var(--ffm-green-800);
  --ffm-fg-success-focus: var(--ffm-green-900);
  --ffm-fg-success-selected: var(--ffm-green-700);
  --ffm-fg-success-disabled: var(--ffm-green-300);
  --ffm-bg-success-default: var(--ffm-green-600); /* Thành công / hoàn tất */
  --ffm-bg-success-hover: var(--ffm-green-700);
  --ffm-bg-success-focus: var(--ffm-green-800);
  --ffm-bg-success-selected: var(--ffm-green-100);
  --ffm-bg-success-disabled: var(--ffm-green-300);
  --ffm-bg-overlay-success-default: var(--ffm-green-alpha-100); /* Nền nhạt (badge soft, alert, hàng bảng) – Thành công / hoàn tất */
  --ffm-bg-overlay-success-hover: var(--ffm-green-alpha-200);
  --ffm-bg-overlay-success-focus: var(--ffm-green-alpha-300);
  --ffm-bg-overlay-success-selected: var(--ffm-green-alpha-200);
  --ffm-bg-overlay-success-disabled: var(--ffm-green-alpha-50);
  --ffm-border-success-default: var(--ffm-green-500); /* Thành công / hoàn tất */
  --ffm-border-success-hover: var(--ffm-green-600);
  --ffm-border-success-focus: var(--ffm-green-700);
  --ffm-border-success-selected: var(--ffm-green-700);
  --ffm-border-success-disabled: var(--ffm-green-200);
  --ffm-border-success-subtle: var(--ffm-green-alpha-300); /* Viền nhạt cho alert/badge outline */
  --ffm-fg-warning-primary: var(--ffm-orange-700); /* Cảnh báo / đang hoàn / sắp quá SLA */
  --ffm-fg-warning-hover: var(--ffm-orange-800);
  --ffm-fg-warning-focus: var(--ffm-orange-900);
  --ffm-fg-warning-selected: var(--ffm-orange-700);
  --ffm-fg-warning-disabled: var(--ffm-orange-300);
  --ffm-bg-warning-default: var(--ffm-orange-600); /* Cảnh báo / đang hoàn / sắp quá SLA */
  --ffm-bg-warning-hover: var(--ffm-orange-700);
  --ffm-bg-warning-focus: var(--ffm-orange-800);
  --ffm-bg-warning-selected: var(--ffm-orange-100);
  --ffm-bg-warning-disabled: var(--ffm-orange-300);
  --ffm-bg-overlay-warning-default: var(--ffm-orange-alpha-100); /* Nền nhạt (badge soft, alert, hàng bảng) – Cảnh báo / đang hoàn / sắp quá SLA */
  --ffm-bg-overlay-warning-hover: var(--ffm-orange-alpha-200);
  --ffm-bg-overlay-warning-focus: var(--ffm-orange-alpha-300);
  --ffm-bg-overlay-warning-selected: var(--ffm-orange-alpha-200);
  --ffm-bg-overlay-warning-disabled: var(--ffm-orange-alpha-50);
  --ffm-border-warning-default: var(--ffm-orange-500); /* Cảnh báo / đang hoàn / sắp quá SLA */
  --ffm-border-warning-hover: var(--ffm-orange-600);
  --ffm-border-warning-focus: var(--ffm-orange-700);
  --ffm-border-warning-selected: var(--ffm-orange-700);
  --ffm-border-warning-disabled: var(--ffm-orange-200);
  --ffm-border-warning-subtle: var(--ffm-orange-alpha-300); /* Viền nhạt cho alert/badge outline */
  --ffm-fg-error-primary: var(--ffm-red-700); /* Lỗi / nguy hiểm / cần chú ý */
  --ffm-fg-error-hover: var(--ffm-red-800);
  --ffm-fg-error-focus: var(--ffm-red-900);
  --ffm-fg-error-selected: var(--ffm-red-700);
  --ffm-fg-error-disabled: var(--ffm-red-300);
  --ffm-bg-error-default: var(--ffm-red-600); /* Lỗi / nguy hiểm / cần chú ý */
  --ffm-bg-error-hover: var(--ffm-red-700);
  --ffm-bg-error-focus: var(--ffm-red-800);
  --ffm-bg-error-selected: var(--ffm-red-100);
  --ffm-bg-error-disabled: var(--ffm-red-300);
  --ffm-bg-overlay-error-default: var(--ffm-red-alpha-100); /* Nền nhạt (badge soft, alert, hàng bảng) – Lỗi / nguy hiểm / cần chú ý */
  --ffm-bg-overlay-error-hover: var(--ffm-red-alpha-200);
  --ffm-bg-overlay-error-focus: var(--ffm-red-alpha-300);
  --ffm-bg-overlay-error-selected: var(--ffm-red-alpha-200);
  --ffm-bg-overlay-error-disabled: var(--ffm-red-alpha-50);
  --ffm-border-error-default: var(--ffm-red-500); /* Lỗi / nguy hiểm / cần chú ý */
  --ffm-border-error-hover: var(--ffm-red-600);
  --ffm-border-error-focus: var(--ffm-red-700);
  --ffm-border-error-selected: var(--ffm-red-700);
  --ffm-border-error-disabled: var(--ffm-red-200);
  --ffm-border-error-subtle: var(--ffm-red-alpha-300); /* Viền nhạt cho alert/badge outline */
  --ffm-fg-info-primary: var(--ffm-blue-700); /* Thông tin / cần xác nhận */
  --ffm-fg-info-hover: var(--ffm-blue-800);
  --ffm-fg-info-focus: var(--ffm-blue-900);
  --ffm-fg-info-selected: var(--ffm-blue-700);
  --ffm-fg-info-disabled: var(--ffm-blue-300);
  --ffm-bg-info-default: var(--ffm-blue-600); /* Thông tin / cần xác nhận */
  --ffm-bg-info-hover: var(--ffm-blue-700);
  --ffm-bg-info-focus: var(--ffm-blue-800);
  --ffm-bg-info-selected: var(--ffm-blue-100);
  --ffm-bg-info-disabled: var(--ffm-blue-300);
  --ffm-bg-overlay-info-default: var(--ffm-blue-alpha-100); /* Nền nhạt (badge soft, alert, hàng bảng) – Thông tin / cần xác nhận */
  --ffm-bg-overlay-info-hover: var(--ffm-blue-alpha-200);
  --ffm-bg-overlay-info-focus: var(--ffm-blue-alpha-300);
  --ffm-bg-overlay-info-selected: var(--ffm-blue-alpha-200);
  --ffm-bg-overlay-info-disabled: var(--ffm-blue-alpha-50);
  --ffm-border-info-default: var(--ffm-blue-500); /* Thông tin / cần xác nhận */
  --ffm-border-info-hover: var(--ffm-blue-600);
  --ffm-border-info-focus: var(--ffm-blue-700);
  --ffm-border-info-selected: var(--ffm-blue-700);
  --ffm-border-info-disabled: var(--ffm-blue-200);
  --ffm-border-info-subtle: var(--ffm-blue-alpha-300); /* Viền nhạt cho alert/badge outline */
  --ffm-fg-caution-primary: var(--ffm-yellow-700); /* Lưu ý nhẹ / chờ hàng */
  --ffm-fg-caution-hover: var(--ffm-yellow-800);
  --ffm-fg-caution-focus: var(--ffm-yellow-900);
  --ffm-fg-caution-selected: var(--ffm-yellow-700);
  --ffm-fg-caution-disabled: var(--ffm-yellow-300);
  --ffm-bg-caution-default: var(--ffm-yellow-600); /* Lưu ý nhẹ / chờ hàng */
  --ffm-bg-caution-hover: var(--ffm-yellow-700);
  --ffm-bg-caution-focus: var(--ffm-yellow-800);
  --ffm-bg-caution-selected: var(--ffm-yellow-100);
  --ffm-bg-caution-disabled: var(--ffm-yellow-300);
  --ffm-bg-overlay-caution-default: var(--ffm-yellow-alpha-100); /* Nền nhạt (badge soft, alert, hàng bảng) – Lưu ý nhẹ / chờ hàng */
  --ffm-bg-overlay-caution-hover: var(--ffm-yellow-alpha-200);
  --ffm-bg-overlay-caution-focus: var(--ffm-yellow-alpha-300);
  --ffm-bg-overlay-caution-selected: var(--ffm-yellow-alpha-200);
  --ffm-bg-overlay-caution-disabled: var(--ffm-yellow-alpha-50);
  --ffm-border-caution-default: var(--ffm-yellow-500); /* Lưu ý nhẹ / chờ hàng */
  --ffm-border-caution-hover: var(--ffm-yellow-600);
  --ffm-border-caution-focus: var(--ffm-yellow-700);
  --ffm-border-caution-selected: var(--ffm-yellow-700);
  --ffm-border-caution-disabled: var(--ffm-yellow-200);
  --ffm-border-caution-subtle: var(--ffm-yellow-alpha-300); /* Viền nhạt cho alert/badge outline */
  --ffm-fg-status-0-primary: var(--ffm-cyan-700); /* Trạng thái: mới, đang vận chuyển */
  --ffm-fg-status-0-hover: var(--ffm-cyan-800);
  --ffm-fg-status-0-focus: var(--ffm-cyan-900);
  --ffm-fg-status-0-selected: var(--ffm-cyan-700);
  --ffm-fg-status-0-disabled: var(--ffm-cyan-300);
  --ffm-bg-status-0-default: var(--ffm-cyan-600); /* Trạng thái: mới, đang vận chuyển */
  --ffm-bg-status-0-hover: var(--ffm-cyan-700);
  --ffm-bg-status-0-focus: var(--ffm-cyan-800);
  --ffm-bg-status-0-selected: var(--ffm-cyan-100);
  --ffm-bg-status-0-disabled: var(--ffm-cyan-300);
  --ffm-bg-overlay-status-0-default: var(--ffm-cyan-alpha-100); /* Nền nhạt (badge soft, alert, hàng bảng) – Trạng thái: mới, đang vận chuyển */
  --ffm-bg-overlay-status-0-hover: var(--ffm-cyan-alpha-200);
  --ffm-bg-overlay-status-0-focus: var(--ffm-cyan-alpha-300);
  --ffm-bg-overlay-status-0-selected: var(--ffm-cyan-alpha-200);
  --ffm-bg-overlay-status-0-disabled: var(--ffm-cyan-alpha-50);
  --ffm-border-status-0-default: var(--ffm-cyan-500); /* Trạng thái: mới, đang vận chuyển */
  --ffm-border-status-0-hover: var(--ffm-cyan-600);
  --ffm-border-status-0-focus: var(--ffm-cyan-700);
  --ffm-border-status-0-selected: var(--ffm-cyan-700);
  --ffm-border-status-0-disabled: var(--ffm-cyan-200);
  --ffm-border-status-0-subtle: var(--ffm-cyan-alpha-300); /* Viền nhạt cho alert/badge outline */
  --ffm-fg-status-1-primary: var(--ffm-pink-700); /* Trạng thái: khâu in vận đơn */
  --ffm-fg-status-1-hover: var(--ffm-pink-800);
  --ffm-fg-status-1-focus: var(--ffm-pink-900);
  --ffm-fg-status-1-selected: var(--ffm-pink-700);
  --ffm-fg-status-1-disabled: var(--ffm-pink-300);
  --ffm-bg-status-1-default: var(--ffm-pink-600); /* Trạng thái: khâu in vận đơn */
  --ffm-bg-status-1-hover: var(--ffm-pink-700);
  --ffm-bg-status-1-focus: var(--ffm-pink-800);
  --ffm-bg-status-1-selected: var(--ffm-pink-100);
  --ffm-bg-status-1-disabled: var(--ffm-pink-300);
  --ffm-bg-overlay-status-1-default: var(--ffm-pink-alpha-100); /* Nền nhạt (badge soft, alert, hàng bảng) – Trạng thái: khâu in vận đơn */
  --ffm-bg-overlay-status-1-hover: var(--ffm-pink-alpha-200);
  --ffm-bg-overlay-status-1-focus: var(--ffm-pink-alpha-300);
  --ffm-bg-overlay-status-1-selected: var(--ffm-pink-alpha-200);
  --ffm-bg-overlay-status-1-disabled: var(--ffm-pink-alpha-50);
  --ffm-border-status-1-default: var(--ffm-pink-500); /* Trạng thái: khâu in vận đơn */
  --ffm-border-status-1-hover: var(--ffm-pink-600);
  --ffm-border-status-1-focus: var(--ffm-pink-700);
  --ffm-border-status-1-selected: var(--ffm-pink-700);
  --ffm-border-status-1-disabled: var(--ffm-pink-200);
  --ffm-border-status-1-subtle: var(--ffm-pink-alpha-300); /* Viền nhạt cho alert/badge outline */
  --ffm-fg-status-2-primary: var(--ffm-purple-700); /* Trạng thái: kho xử lý (nhập, đóng gói) */
  --ffm-fg-status-2-hover: var(--ffm-purple-800);
  --ffm-fg-status-2-focus: var(--ffm-purple-900);
  --ffm-fg-status-2-selected: var(--ffm-purple-700);
  --ffm-fg-status-2-disabled: var(--ffm-purple-300);
  --ffm-bg-status-2-default: var(--ffm-purple-600); /* Trạng thái: kho xử lý (nhập, đóng gói) */
  --ffm-bg-status-2-hover: var(--ffm-purple-700);
  --ffm-bg-status-2-focus: var(--ffm-purple-800);
  --ffm-bg-status-2-selected: var(--ffm-purple-100);
  --ffm-bg-status-2-disabled: var(--ffm-purple-300);
  --ffm-bg-overlay-status-2-default: var(--ffm-purple-alpha-100); /* Nền nhạt (badge soft, alert, hàng bảng) – Trạng thái: kho xử lý (nhập, đóng gói) */
  --ffm-bg-overlay-status-2-hover: var(--ffm-purple-alpha-200);
  --ffm-bg-overlay-status-2-focus: var(--ffm-purple-alpha-300);
  --ffm-bg-overlay-status-2-selected: var(--ffm-purple-alpha-200);
  --ffm-bg-overlay-status-2-disabled: var(--ffm-purple-alpha-50);
  --ffm-border-status-2-default: var(--ffm-purple-500); /* Trạng thái: kho xử lý (nhập, đóng gói) */
  --ffm-border-status-2-hover: var(--ffm-purple-600);
  --ffm-border-status-2-focus: var(--ffm-purple-700);
  --ffm-border-status-2-selected: var(--ffm-purple-700);
  --ffm-border-status-2-disabled: var(--ffm-purple-200);
  --ffm-border-status-2-subtle: var(--ffm-purple-alpha-300); /* Viền nhạt cho alert/badge outline */
  --ffm-bg-inverse-default: var(--ffm-neutral-900); /* Nền tối: bulk action bar, tooltip */
  --ffm-bg-inverse-raised: var(--ffm-neutral-800); /* Nền tối nổi hơn (menu mở từ bulk bar) */
  --ffm-bg-overlay-inverse-hover: var(--ffm-white-alpha-100); /* Hover trên nền tối (trắng 10%) */
  --ffm-bg-overlay-inverse-focus: var(--ffm-white-alpha-200); /* Pressed / đang mở trên nền tối (trắng 18%) */
  --ffm-border-inverse-default: var(--ffm-neutral-700); /* Viền / vạch ngăn trên nền tối */
  --ffm-fg-inverse-primary: var(--ffm-neutral-50); /* Chữ & icon trên nền tối */
  --ffm-fg-inverse-secondary: var(--ffm-neutral-400); /* Chữ phụ trên nền tối */
  --ffm-fg-inverse-danger: var(--ffm-red-400); /* Hành động nguy hiểm trên nền tối */

  /* ---- 2. Spacing ---- */
  --ffm-padding-none: 0px;
  --ffm-padding-6xs: 1px;
  --ffm-padding-5xs: 2px;
  --ffm-padding-4xs: 4px;
  --ffm-padding-3xs: 6px;
  --ffm-padding-2xs: 8px;
  --ffm-padding-xs: 10px;
  --ffm-padding-sm: 12px;
  --ffm-padding-md: 16px;
  --ffm-padding-lg: 20px;
  --ffm-padding-xl: 24px;
  --ffm-padding-2xl: 32px;
  --ffm-padding-3xl: 40px;
  --ffm-padding-4xl: 48px;
  --ffm-padding-5xl: 64px;
  --ffm-padding-6xl: 80px;
  --ffm-gap-none: 0px;
  --ffm-gap-3xs: 2px;
  --ffm-gap-2xs: 4px;
  --ffm-gap-xs: 6px;
  --ffm-gap-sm: 8px;
  --ffm-gap-md: 12px;
  --ffm-gap-lg: 16px;
  --ffm-gap-xl: 20px;
  --ffm-gap-2xl: 24px;
  --ffm-gap-3xl: 32px;
  --ffm-gap-4xl: 40px;
  --ffm-gap-5xl: 48px;
  --ffm-gap-6xl: 64px;
  --ffm-size-icon-xxs: 12px;
  --ffm-size-icon-xs: 14px;
  --ffm-size-icon-sm: 16px;
  --ffm-size-icon-md: 20px;
  --ffm-size-icon-lg: 24px;
  --ffm-size-avatar-xs: 24px;
  --ffm-size-avatar-sm: 32px;
  --ffm-size-avatar-md: 40px;
  --ffm-size-avatar-xl: 56px;
  --ffm-size-control-sm: 32px;
  --ffm-size-control-md: 36px;
  --ffm-size-control-lg: 40px;
  --ffm-size-table-row: 52px;
  --ffm-size-header: 56px;
  --ffm-size-sidebar-collapsed: 48px;
  --ffm-size-table-head: 40px;

  /* ---- 3. Radius ---- */
  --ffm-radius-none: 0px;
  --ffm-radius-2xs: 2px;
  --ffm-radius-xs: 4px;
  --ffm-radius-sm: 6px;
  --ffm-radius-md: 8px;
  --ffm-radius-lg: 10px;
  --ffm-radius-xl: 12px;
  --ffm-radius-2xl: 16px;
  --ffm-radius-3xl: 20px;
  --ffm-radius-4xl: 24px;
  --ffm-radius-5xl: 28px;
  --ffm-radius-6xl: 32px;
  --ffm-radius-full: 9999px;

  /* ---- 4. Effect ---- */
  --ffm-shadow-2xs: 0px 1px 0px 0px rgba(0,0,0,0.05);
  --ffm-shadow-xs: 0px 1px 2px 0px rgba(0,0,0,0.05);
  --ffm-shadow-sm: 0px 1px 3px 0px rgba(0,0,0,0.1), 0px 1px 2px -1px rgba(0,0,0,0.1);
  --ffm-shadow-md: 0px 4px 6px -1px rgba(0,0,0,0.1), 0px 2px 4px -2px rgba(0,0,0,0.1);
  --ffm-shadow-lg: 0px 10px 15px -3px rgba(0,0,0,0.1), 0px 4px 6px -4px rgba(0,0,0,0.1);
  --ffm-shadow-xl: 0px 20px 25px -5px rgba(0,0,0,0.1), 0px 8px 10px -6px rgba(0,0,0,0.1);
  --ffm-shadow-2xl: 0px 25px 50px -12px rgba(0,0,0,0.25);
  --ffm-shadow-ring-brand: 0 0 0 3px #1570EF75;
  --ffm-shadow-ring-error: 0 0 0 3px #DC26263D;

  /* ---- Typography ---- */
  --ffm-font-heading: 'Inter', system-ui, sans-serif;
  --ffm-font-body: 'Inter', system-ui, sans-serif;
  --ffm-font-code: 'Geist Mono', ui-monospace, monospace;
  --ffm-text-xs: 12px; --ffm-leading-xs: 16px; --ffm-tracking-xs: 0px;
  --ffm-text-sm: 14px; --ffm-leading-sm: 20px; --ffm-tracking-sm: 0px;
  --ffm-text-md: 16px; --ffm-leading-md: 24px; --ffm-tracking-md: 0px;
  --ffm-text-lg: 18px; --ffm-leading-lg: 28px; --ffm-tracking-lg: -0.2px;
  --ffm-text-xl: 20px; --ffm-leading-xl: 28px; --ffm-tracking-xl: -0.3px;
  --ffm-text-2xl: 24px; --ffm-leading-2xl: 32px; --ffm-tracking-2xl: -0.5px;
  --ffm-text-3xl: 30px; --ffm-leading-3xl: 36px; --ffm-tracking-3xl: -0.6px;
  --ffm-text-4xl: 36px; --ffm-leading-4xl: 40px; --ffm-tracking-4xl: -0.8px;
}

/* Text style classes (khớp text style Figma) */
.ffm-heading-4xl { font-family: var(--ffm-font-heading); font-size: 36px; line-height: 40px; font-weight: 700; letter-spacing: -0.8px; }
.ffm-heading-3xl { font-family: var(--ffm-font-heading); font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -0.6px; }
.ffm-heading-2xl { font-family: var(--ffm-font-heading); font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.5px; }
.ffm-heading-xl { font-family: var(--ffm-font-heading); font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.3px; }
.ffm-heading-lg { font-family: var(--ffm-font-heading); font-size: 18px; line-height: 28px; font-weight: 600; letter-spacing: -0.2px; }
.ffm-body-md-regular { font-family: var(--ffm-font-body); font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: 0px; }
.ffm-body-md-medium { font-family: var(--ffm-font-body); font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: 0px; }
.ffm-body-md-semibold { font-family: var(--ffm-font-body); font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: 0px; }
.ffm-body-sm-regular { font-family: var(--ffm-font-body); font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: 0px; }
.ffm-body-sm-medium { font-family: var(--ffm-font-body); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0px; }
.ffm-body-sm-semibold { font-family: var(--ffm-font-body); font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0px; }
.ffm-caption-xs-regular { font-family: var(--ffm-font-body); font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: 0px; }
.ffm-caption-xs-medium { font-family: var(--ffm-font-body); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0px; }
.ffm-caption-xs-semibold { font-family: var(--ffm-font-body); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0px; }
.ffm-code-sm { font-family: var(--ffm-font-code); font-size: 13px; line-height: 20px; font-weight: 400; letter-spacing: 0px; }
.ffm-code-xs { font-family: var(--ffm-font-code); font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: 0px; }