/* Shared primitive consumers. Loaded after module styles so global display
 * settings have one deterministic application point without screen patches. */
html { font-size: calc(16px * var(--font-scale)); }
body { background: var(--page-bg); color: var(--text-primary); font-size: var(--font-size-md); line-height: var(--app-line-height); }
.topbar { background: var(--header-bg); border-color: var(--border); }
.sidebar { background: var(--sidebar-bg); color: var(--sidebar-text); }
.nav-item { color: var(--sidebar-text); }
.nav-item:hover, .nav-item.active { background: var(--sidebar-active); }

:where(.panel,.kpi,.settings-card,.comparison-page-head,.expense-detail-panel,.modal-card,.dialog-card) {
  border-color: var(--border);
  background: var(--surface);
}
:where(.panel,.kpi,.settings-card,.comparison-page-head,.expense-detail-panel) { box-shadow: var(--shadow-card); }

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),select,textarea) {
  border-color: var(--input-border);
  background: var(--input-bg);
  color: var(--text-primary);
}
:where(input,select,textarea)::placeholder { color: var(--input-placeholder); }
:where(input[type="checkbox"],input[type="radio"]) { accent-color: var(--accent); }
:where(input,select,textarea):disabled { background: var(--input-disabled-bg); color: var(--text-disabled); cursor:not-allowed; }
:where(button,a,input,select,textarea,[tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

:where(.primary,[data-appearance="primary"]) { background: linear-gradient(135deg, var(--accent), var(--accent-active)); }
:where(.primary,[data-appearance="primary"]):hover { filter: brightness(.96); }
:where(.text-button,a.link,.analytics-row-toggle) { color: var(--accent); }
:where(.settings-tab.active,.data-center-tab.active,.analytics-phase-tab.active,.reports-tab.active,.manual-entry-tab.active,.expense-view-segment.active) { color: var(--accent); }

table th { background: var(--table-header-bg); }
table td { border-color: var(--divider); }
table tbody tr:hover > td { background-color: var(--table-row-hover); }
:where(tr.selected,tr[aria-selected="true"]) > td { background-color: var(--table-selected-bg); }

.modal { background: var(--overlay-bg); }
.modal-card { background: var(--modal-bg); box-shadow: var(--shadow-floating); }
.chart-data-tooltip { background: var(--tooltip-bg); color: var(--tooltip-text); box-shadow: var(--shadow-floating); }
:where(.popover,.drawer) { background: var(--popover-bg); border-color: var(--border); color: var(--text-primary); box-shadow: var(--shadow-floating); }

/* Consistent system font consumers. Page-local report/table size controls
 * intentionally override their own subtree and never mutate --font-scale. */
:where(button,input,select,textarea,table,.popover,.tooltip,.drawer,.modal-card) { font-family: inherit; }
:where(button,input,select,textarea,.settings-tab,.data-center-tab,.analytics-tab,.reports-tab,.manual-entry-tab,.expense-view-segment) { font-size: var(--font-size-sm) !important; }
:where(table,.data-table,.branch-report-table,.expense-matrix,.ranking-table,.reports-preview-table,.review-table) { font-size: var(--font-size-sm); }
:where(.panel-head p,.settings-card-head p,.comparison-page-head p,.expense-detail-header p:not(.eyebrow),.muted,.helper-text) { font-size: var(--font-size-sm); }
:where(.chart-svg text,.kpi-chart-labels text,.comparison-chart-panel svg text,.chart-data-tooltip) { font-size: var(--font-size-xs); }
.settings-ownership-note { margin: 10px 0 0; color: var(--text-muted); font-size: var(--font-size-sm); }