:root {
  --color-primary: #041E8D;
  --color-primary-hover: #03176E;
  --color-background: #F5F6F8;
  --color-soft-blue: #EEF0FA;
  --color-soft-blue-border: #CDD4EB;
  --color-surface: #FFFFFF;
  --color-text: #172B3A;
  --color-muted: #5E6B78;
  --color-border: #E0E4EB;
  --color-danger: #A01010;
  --color-danger-soft: #FAEEEE;
  --color-danger-border: #E8C9C9;
  --color-warning: #8A641C;
  --color-warning-soft: #FFF5DF;
  --color-focus: rgba(4, 30, 141, .26);
  --color-focus-soft: rgba(4, 30, 141, .14);
  --shadow: 0 9px 30px rgba(23, 43, 58, .06);
}

/* Prevent iOS focus zoom without restricting user zoom or changing form geometry.
   Component styles load later, so only this mobile font-size needs priority. */
@media (max-width: 900px), (any-pointer: coarse) {
  input:where(:not([type="checkbox"], [type="radio"], [type="range"],
    [type="color"], [type="file"], [type="hidden"], [type="button"],
    [type="submit"], [type="reset"], [type="image"])),
  textarea,
  select {
    font-size: 16px !important;
  }

  /* Keep the existing three-row notes box from growing with the larger font. */
  .agent-notes textarea {
    height: 70px;
  }
}