/* =========================================================
   UIX modernization layer — BASE
   Scope: .uix-app
   Conservative on purpose: this file MUST NOT change the look
   of legacy pages that have not been migrated yet. It only:
     - normalizes box-sizing (no-op next to Bootstrap reboot),
     - exposes opt-in typography helper classes,
     - defines a visible focus ring.
   Global body font swap (Muli -> Roboto) happens per-screen,
   once that screen has been migrated and visually verified.
   ========================================================= */

.uix-app *,
.uix-app *::before,
.uix-app *::after {
  box-sizing: border-box;
}

/* Migrated-page base: any screen wrapped in .uix-page gets the design-system
   font and text color for ALL its text — including markup with no uix class
   (e.g. table cells generated in code-behind), which otherwise inherits the
   legacy Muli/#212529 body styling. Legacy (unwrapped) pages are unaffected. */
.uix-app .uix-page {
  font-family: var(--uix-font-family);
  color: var(--uix-color-text);
}

/* Opt-in typography (apply explicitly; does not restyle legacy text) */
.uix-app .uix-title {
  font-family: var(--uix-font-family);
  font-size: var(--uix-title-size);
  line-height: var(--uix-title-line);
  font-weight: var(--uix-title-weight);
  color: var(--uix-color-text);
  letter-spacing: 0; /* Figma H3 tracking is 0 */
  margin: 0;
}

.uix-app .uix-subtitle {
  font-family: var(--uix-font-family);
  font-size: var(--uix-body-size);
  line-height: var(--uix-body-line);
  font-weight: var(--uix-body-weight);
  color: var(--uix-color-text-secondary);
  margin: 0;
}
/* Page-intro paragraph tone used by the Figma upload/funding frames (Gray/600). */
.uix-app .uix-subtitle--muted { color: var(--uix-color-text-muted); }

.uix-app .uix-section-title {
  font-family: var(--uix-font-family);
  font-size: var(--uix-h6-size);
  line-height: var(--uix-h6-line);
  font-weight: var(--uix-h6-weight);
  color: var(--uix-color-text);
  margin: 0;
}

.uix-app .uix-body {
  font-family: var(--uix-font-family);
  font-size: var(--uix-body-size);
  line-height: var(--uix-body-line);
  color: var(--uix-color-text);
}

.uix-app .uix-body-sm {
  font-family: var(--uix-font-family);
  font-size: var(--uix-body-sm-size);
  line-height: var(--uix-body-sm-line);
  color: var(--uix-color-text-secondary);
}

/* Accessible focus ring for migrated interactive elements */
.uix-app .uix-btn:focus-visible,
.uix-app .uix-input:focus-visible,
.uix-app .uix-select:focus-visible {
  outline: none;
  box-shadow: var(--uix-focus-ring);
}