/*
  VKT font system, matched to the ShopBang dashboard baseline.
  Default workspace text is 14px; smaller sizes are reserved for helper links,
  tags, and compact status controls.
*/
:root {
  --vkt-font-body: 14px;
  --vkt-line-body: 22px;
  --vkt-font-small: 13px;
  --vkt-line-small: 20px;
  --vkt-font-chip: 12px;
  --vkt-line-chip: 18px;
  --vkt-font-section: 16px;
  --vkt-line-section: 24px;
  --vkt-font-page: 24px;
  --vkt-line-page: 32px;
  --vkt-font-metric: 27px;
  --vkt-line-metric: 32px;
}

html,
body {
  font-size: var(--vkt-font-body);
}

body,
button,
input,
select,
textarea {
  font-size: var(--vkt-font-body);
  line-height: var(--vkt-line-body);
}

main,
main p,
main a,
main button,
main input,
main select,
main textarea,
main label {
  font-size: var(--vkt-font-body);
  line-height: var(--vkt-line-body);
}

aside,
aside a,
aside button,
aside span,
header,
header a,
header button,
header span,
#workspace-tabs,
#workspace-tabs a,
#workspace-tabs button {
  font-size: var(--vkt-font-body) !important;
}

aside a,
aside button,
aside span {
  font-weight: 400 !important;
}

aside .menu-item,
aside .menu-item.group,
aside .menu-item-active,
aside .menu-item-inactive {
  min-height: 40px !important;
  height: 40px !important;
  line-height: 40px !important;
}

aside .menu-item-text,
aside nav a,
aside nav button,
aside nav span {
  line-height: 40px !important;
}

aside nav a.rounded-lg,
aside nav .rounded-lg {
  min-height: 40px !important;
  height: 40px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
}

header,
header > div,
header a,
header button,
header span,
#workspace-tabs a,
#workspace-tabs button {
  min-height: 46px;
  line-height: 22px !important;
  font-weight: 400 !important;
}

#workspace-tabs a,
#workspace-tabs button {
  min-height: 31px;
}

main h1,
main .text-3xl {
  font-size: 20px !important;
  line-height: 28px !important;
}

main h2,
main .text-2xl,
main .text-xl {
  font-size: 20px !important;
  line-height: 28px !important;
}

main h3,
main h4,
main .text-lg,
main .text-base {
  font-size: var(--vkt-font-section) !important;
  line-height: var(--vkt-line-section) !important;
}

main table thead th,
main table thead th :is(span, p, div, a, button) {
  font-size: var(--vkt-font-small) !important;
  line-height: var(--vkt-line-small) !important;
}

main table tbody td,
main table tbody td :is(p, span, a, button, input, select, textarea, label) {
  font-size: var(--vkt-font-body) !important;
  line-height: var(--vkt-line-body) !important;
}

main .text-sm,
main .text-theme-sm,
main [class*="text-theme-sm"] {
  font-size: var(--vkt-font-body) !important;
  line-height: var(--vkt-line-body) !important;
}

main .text-xs,
main .text-theme-xs,
main [class*="text-theme-xs"],
main small {
  font-size: var(--vkt-font-chip) !important;
  line-height: var(--vkt-line-chip) !important;
}

main [class*="badge"],
main [class*="chip"],
main [class*="status"],
main .vkt-mini-btn,
main .vkt-page-btn,
main .vkt-icon-btn {
  font-size: var(--vkt-font-chip) !important;
  line-height: var(--vkt-line-chip) !important;
}

main .vkt-btn,
main .vkt-order-action-btn,
main .my-orders-stage-card,
main button.rounded-full {
  font-size: var(--vkt-font-body) !important;
  line-height: var(--vkt-line-small) !important;
  font-weight: 400 !important;
}

main button:not(.vkt-mini-btn):not(.vkt-page-btn):not(.vkt-icon-btn):not([class*="status"]):not([class*="chip"]):not([class*="badge"]) {
  font-size: var(--vkt-font-body) !important;
  line-height: var(--vkt-line-small) !important;
  font-weight: 400 !important;
}

main .my-orders-stage-card {
  min-height: 40px !important;
  height: 40px !important;
}

main .inline-flex.h-8,
main button.h-8 {
  min-height: 32px !important;
  height: 32px !important;
}

main .inline-flex.h-9,
main button.h-9 {
  min-height: 32px !important;
  height: 32px !important;
}

main .my-order-product-title,
main .my-order-product-summary,
main .vkt-modal__header h3 {
  font-size: var(--vkt-font-section) !important;
  line-height: var(--vkt-line-section) !important;
}

main .my-order-product-meta,
main .my-order-product-spec,
main .vkt-modal__header p,
main .vkt-form-field span,
main .vkt-modal__message {
  font-size: var(--vkt-font-small) !important;
  line-height: var(--vkt-line-small) !important;
}

main .my-order-inventory-count,
main .my-order-inventory-status,
main .order-inline-edit {
  font-size: var(--vkt-font-chip) !important;
  line-height: var(--vkt-line-chip) !important;
}

main :is(.metric-value, .stats-value, .dashboard-value, [data-metric-value]) {
  font-size: var(--vkt-font-metric) !important;
  line-height: var(--vkt-line-metric) !important;
  font-weight: 700;
}

/* Order table visual density: closer to ShopBang's lighter 14px baseline. */
main .my-orders-grid thead th,
main .my-orders-grid thead th :is(span, p, div, a, button) {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
}

main .my-orders-grid tbody td,
main .my-orders-grid tbody td :is(p, span, a, button, input, select, textarea, label) {
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 19px !important;
}

main .my-orders-grid tbody td {
  padding-bottom: 10px !important;
  padding-top: 10px !important;
}

main .my-orders-grid strong,
main .my-orders-grid b,
main .my-orders-grid .font-semibold,
main .my-orders-grid .font-bold {
  font-weight: 500 !important;
}

main .my-orders-grid .my-order-product {
  gap: 10px !important;
}

main .my-orders-grid .my-order-product-image {
  flex-basis: 72px !important;
  height: 72px !important;
  width: 72px !important;
}

main .my-orders-grid .my-order-product-title {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 18px !important;
}

main .my-orders-grid .my-order-product-summary {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 18px !important;
}

main .my-orders-grid .my-order-product-meta,
main .my-orders-grid .my-order-product-spec,
main .my-orders-grid .text-xs,
main .my-orders-grid .text-theme-xs {
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 17px !important;
}

main .my-orders-grid .my-order-product-divider {
  margin-bottom: 5px !important;
  margin-top: 5px !important;
}

main .my-orders-grid .my-order-inventory {
  gap: 4px !important;
  margin-top: 4px !important;
}

main .my-orders-grid .my-order-inventory-count,
main .my-orders-grid .my-order-inventory-status,
main .my-orders-grid .vkt-mini-btn,
main .my-orders-grid .vkt-page-btn,
main .my-orders-grid .order-inline-edit {
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 17px !important;
  min-height: 22px !important;
}

main .my-orders-grid .vkt-order-action-btn,
main .my-orders-grid button:not(.my-orders-stage-card):not(.vkt-icon-btn) {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 18px !important;
}

main .my-orders-grid .my-orders-stage-card,
main .my-orders-grid .my-orders-stage-card span {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 18px !important;
}

/* Dashboard cards: keep the same lighter visual scale as the order table. */
main .dashboard-overview,
main [data-dashboard],
main .dashboard-card {
  font-size: 13px !important;
  line-height: 19px !important;
}

main .dashboard-overview h1,
main .dashboard-overview h2,
main .dashboard-overview h3,
main [data-dashboard] h1,
main [data-dashboard] h2,
main [data-dashboard] h3,
main .dashboard-card h1,
main .dashboard-card h2,
main .dashboard-card h3 {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
}

main .dashboard-overview p,
main .dashboard-overview span,
main .dashboard-overview a,
main [data-dashboard] p,
main [data-dashboard] span,
main [data-dashboard] a,
main .dashboard-card p,
main .dashboard-card span,
main .dashboard-card a {
  font-size: 13px !important;
  line-height: 19px !important;
}

main .dashboard-overview .text-3xl,
main .dashboard-overview .text-2xl,
main .dashboard-overview .text-xl,
main [data-dashboard] .text-3xl,
main [data-dashboard] .text-2xl,
main [data-dashboard] .text-xl,
main .dashboard-card .text-3xl,
main .dashboard-card .text-2xl,
main .dashboard-card .text-xl {
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 28px !important;
}

main .dashboard-overview .text-sm,
main .dashboard-overview .text-xs,
main [data-dashboard] .text-sm,
main [data-dashboard] .text-xs,
main .dashboard-card .text-sm,
main .dashboard-card .text-xs {
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 18px !important;
}

main .dashboard-overview button,
main [data-dashboard] button,
main .dashboard-card button {
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 18px !important;
  min-height: 30px !important;
}

main .dashboard-overview .grid a,
main [data-dashboard] .grid a,
main .dashboard-card .grid a {
  font-size: 13px !important;
  line-height: 19px !important;
}