:root {
  --type-caption: 10.5px;
  --type-meta: 11.5px;
  --type-body: 12.5px;
  --type-control: 13px;
  --type-title: 14px;
  --type-section: 19px;
  --type-page: 25px;
  --type-display: 30px;
}

.phone,
.scenario-control {
  font-family: "Vazirmatn Regular", Tahoma, sans-serif;
  font-size: var(--type-body);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* The previous wireframe used 5–8px labels. Keep three legible text tiers. */
.phone span {
  font-size: var(--type-meta) !important;
  line-height: 1.45;
}

.phone .toast > span {
  font-size: var(--type-body) !important;
  font-family:"Vazirmatn ExtraBold",Tahoma,sans-serif;
  line-height: 1.7;
}

.phone :is(small, dt) {
  font-size: var(--type-caption) !important;
  line-height: 1.6;
}

.phone :is(p, li, dd) {
  font-size: var(--type-body) !important;
  line-height: 1.7;
}

.phone :is(button, input, select, textarea, label) {
  font-size: var(--type-control) !important;
  line-height: 1.45;
}

.phone :is(strong, b) {
  font-size: var(--type-title) !important;
  line-height: 1.45;
}

.phone i:not(.stepper i):not(.snapshot-bars i):not(.cashflow-chart i):not(.energy-meter i) {
  font-size: var(--type-caption) !important;
  line-height: 1.45;
}

.phone h1 {
  font-size: var(--type-page) !important;
  line-height: 1.4;
  letter-spacing: -0.025em;
}

.phone h2 {
  font-size: var(--type-section) !important;
  line-height: 1.45;
  letter-spacing: -0.015em;
}

.phone h3 {
  font-size: 16px !important;
  line-height: 1.5;
}

/* Display figures remain prominent without overpowering the rest of the UI. */
.phone :is(.hero-amount strong, .total-summary strong, .statement-summary strong, .account-detail-hero > div:last-child strong, .amount-entry input, .review-amount, .next-home-balance > div strong, .next-home-scf-card > div strong) {
  font-size: var(--type-display) !important;
  line-height: 1.25;
}

.phone :is(.login-brand h1, .welcome-copy h1, .new-welcome-hero h1) {
  font-size: 28px !important;
}

.phone :is(.snapshot-net > strong, .scf-home-copy strong, .next-home-cashflow-summary-main strong, .cashflow-detail-summary strong) {
  font-size: 21px !important;
}

.phone .next-home-cashflow-breakdown > span > b,
.phone .next-home-cashflow-breakdown strong,
.phone .next-home-cashflow-low strong {
  font-size: 12px !important;
  line-height: 1.45;
}

.phone .next-home-cashflow-summary-main > b {
  font-size: 10.5px !important;
}

.phone .next-home-cashflow-summary-metrics strong {
  font-size: 12px !important;
  line-height: 1.45;
}

.phone :is(.service-summary-hero > div strong, .cashflow-forecast strong, .energy-hero strong, .scf-status-card h2, .scf-quote-card header strong) {
  font-size: 23px !important;
  line-height: 1.3;
}

.phone :is(.widget-grid strong, .health-score strong, .cashflow-hero strong) {
  font-size: 20px !important;
}

.phone .next-business-summary strong {
  font-size: 18px !important;
  line-height: 1.3;
}

.phone :is(.brand-placeholder, .header-actions .brand-placeholder) {
  font-size: 22px !important;
  line-height: 1;
}

.phone :is(.account-icon, .round-symbol, .avatar, .management-icon, .service-mark, .connector-icon, .row-symbol) {
  font-size: 14px !important;
  line-height: 1;
}

.phone .physical-card > strong {
  font-size: 15px !important;
  line-height: 1.2;
}

.phone :is(.primary-button, .secondary-button) {
  min-height: 54px;
  font-family:"Vazirmatn ExtraBold",Tahoma,sans-serif;
}

.phone :is(.account-row, .transaction-list article, .space-row, .recipient-row, .selected-recipient, .management-list > button, .connected-list > button) {
  min-height: 70px;
}

.phone :is(.field > div, .search-field) {
  min-height: 54px;
}

.phone .detail-list > div {
  min-height: 50px;
}

.phone .bottom-nav button {
  font-size: 11px !important;
}

/* Prototype controls are denser than the product UI, but should still be readable. */
.scenario-control :is(button, input, select) {
  font-size: 12px !important;
  line-height: 1.45;
}

.scenario-control strong,
.scenario-control .scenario-section-heading > span {
  font-size: 12.5px !important;
  line-height: 1.45;
}

.scenario-control small,
.scenario-control .scenario-section-heading > small,
.scenario-control b {
  font-size: 10.5px !important;
  line-height: 1.55;
}

.scenario-control button {
  min-height: 44px;
}

.scenario-control .workflow-scenario-buttons button {
  min-height: 60px;
}

@media (max-width: 390px) {
  :root {
    --type-caption: 10px;
    --type-meta: 11px;
    --type-body: 12px;
    --type-control: 12.5px;
    --type-title: 13.5px;
    --type-page: 23px;
    --type-display: 28px;
  }
}