/* Global app typography system */
:root {
  --type-font: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --type-color: #f5f7ff;
  --type-secondary: rgba(226, 231, 249, 0.86);
  --type-muted: rgba(180, 189, 220, 0.74);
  --type-faint: rgba(151, 162, 199, 0.66);
  --type-link: #9edcff;
  --type-link-hover: #c5ecff;
  --type-heading: #ffffff;
  --type-table: rgba(238, 242, 255, 0.92);
  --type-table-head: rgba(220, 225, 246, 0.86);
  --type-size-xs: 0.78rem;
  --type-size-sm: 0.9rem;
  --type-size-base: 1rem;
  --type-size-lg: 1.15rem;
  --type-size-xl: 1.45rem;
  --type-size-2xl: 1.9rem;
}

body,
.main {
  color: var(--type-color);
  font-family: var(--type-font);
  font-size: var(--type-size-base);
  line-height: 1.5;
}

.main :where(h1, h2, h3, h4, h5, h6, .page-header, .page-title) {
  color: var(--type-heading) !important;
  font-family: var(--type-font) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}

.main :where(h1, .page-header) {
  font-size: var(--type-size-2xl) !important;
}

.main :where(h2, .page-title) {
  font-size: var(--type-size-xl) !important;
}

.main :where(h3) {
  font-size: var(--type-size-lg) !important;
}

.main :where(h4, h5, h6) {
  font-size: var(--type-size-base) !important;
}

.main :where(p, li, dt, dd, label, span, small, strong, td, th, input, select, textarea) {
  font-family: var(--type-font);
}

.main :where(p, li, dt, dd) {
  color: var(--type-secondary);
  font-size: var(--type-size-base);
}

.main :where(label, .form-group label) {
  color: var(--type-secondary) !important;
  font-size: var(--type-size-sm) !important;
  font-weight: 650 !important;
}

.main :where(small, .help-text, .text-muted, .is-muted, .qb-subtle, .page-subtitle, .empty-state, .empty-row, .no-data, .db-empty) {
  color: var(--type-muted) !important;
  font-size: var(--type-size-sm) !important;
}

.main :where(strong, b) {
  color: var(--type-heading);
  font-weight: 700;
}

.main :where(a, a:visited, .text-link) {
  color: var(--type-link) !important;
  font-weight: 600;
  text-decoration: none !important;
}

.main :where(a:hover, .text-link:hover) {
  color: var(--type-link-hover) !important;
  text-decoration: none !important;
}

.main :where(
  .cyberpunk-table,
  .qb-table,
  .dashboard-table,
  .db-table,
  .cart-table,
  .price-break-table,
  .orders-table,
  .customers-table,
  .services-table,
  .line-items-table,
  .table-container table
) :where(td, td a, td span, td small, td strong) {
  color: var(--type-table) !important;
  font-size: var(--type-size-sm) !important;
}

.main :where(
  .cyberpunk-table,
  .qb-table,
  .dashboard-table,
  .db-table,
  .cart-table,
  .price-break-table,
  .orders-table,
  .customers-table,
  .services-table,
  .line-items-table,
  .table-container table
) th {
  color: var(--type-table-head) !important;
  font-size: var(--type-size-xs) !important;
  font-weight: 750 !important;
  letter-spacing: 0.06em !important;
}

.main :where(.status-badge, .status-pill, .movement-type, .pill, .type-pill, .chip-muted, .chip-toggle) {
  font-size: var(--type-size-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

.main :where(.btn, .button, .db-btn, .print-button, .qb-btn, button, input, select, textarea) {
  font-family: var(--type-font) !important;
}

.main :where(input, select, textarea) {
  color: var(--type-color) !important;
  font-size: var(--type-size-sm) !important;
}

.main :where(input::placeholder, textarea::placeholder) {
  color: var(--type-faint) !important;
}

.main :where(code, .code-inline) {
  color: #d8e6ff !important;
  font-size: var(--type-size-sm);
}