:root {
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #868e96;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;

  --app-bg-viewer-primary: var(--gray-100);
  --app-bg-viewer-primary-activated: var(--gray-200);
  --app-bg-viewer-primary-hover: var(--gray-300);
  --app-bg-primary: var(--gray-100);
  --app-bg-primary-activated: var(--gray-200);
  --app-bg-primary-hover: var(--gray-300);
  --app-bg-secondary: var(--gray-200);
  --app-bg-secondary-activated: var(--gray-300);
  --app-bg-secondary-hover: var(--gray-400);
  --app-bg-third: var(--gray-300);
  --app-bg-third-hover: var(--gray-400);
  --app-border: var(--gray-700);
  --app-bg-footer: #0073dd;
  /* Fallback for blue-500 if not defined */
  --app-bg-table: #fff;
  --app-text-color: var(--gray-900);
  /* Dark text for Light mode */
}

/* Global Font Override for Vietnamese text rendering */
body,
.p-component,
.p-dropdown-panel .p-dropdown-item,
.p-select-panel .p-select-option,
.p-multiselect-panel .p-multiselect-item,
.p-datepicker-panel,
.p-datepicker-header,
.p-datepicker-title,
.p-dialog .p-dialog-header,
.p-dialog .p-dialog-content,
.p-button,
input,
textarea,
select,
button,
label,
span,
div,
p,
a,
li {
  font-family: "Poppins", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* Exclude icon fonts from font-family override */
.pi,
.fa,
.fas,
.far,
.fab,
.fa-solid,
.fa-regular,
.fa-light,
.fa-duotone,
.fa-thin,
.fa-brands {
  font-family: 'primeicons', 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'Font Awesome 5 Brands' !important;
}